diff --git a/README.md b/README.md
index 68a2ace..37e7773 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,11 @@ core deploy command must not copy private plugin sources into this repository.
 
 For more details, see [DEPLOY.md](./DEPLOY.md) or [DEPLOY-QUICK.md](./DEPLOY-QUICK.md).
 
+For an API managed by PM2, run `pnpm api:pm2:env:check` on the server before a
+release. It compares each running API process with the local `.env` and reports only
+drifting variable names. After changing `.env`, use `pnpm api:pm2:reload` to reload
+with the file's values, verify all instances, and save the corrected PM2 state.
+
 ## Versioning and releases
 
 The deployable core is released as a **single version**: the root `package.json`, `apps/*` and `packages/common` always carry the same number, and an annotated git tag points at it.  `@contexthub/promo-sdk` is excluded — it is published separately and keeps its own version.
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 426652b..7bb7f96 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contexthub/admin",
-  "version": "0.1.15",
+  "version": "0.1.19",
   "private": true,
   "description": "React administration interface for contextHub",
   "type": "module",
diff --git a/apps/admin/src/components/Footer.jsx b/apps/admin/src/components/Footer.jsx
index eedaca3..acd135c 100644
--- a/apps/admin/src/components/Footer.jsx
+++ b/apps/admin/src/components/Footer.jsx
@@ -19,7 +19,7 @@ export default function Footer({
   const currentYear = new Date().getFullYear()
 
   return (
-    <footer className="bg-white border-t border-gray-200">
+    <footer className="shrink-0 bg-white border-t border-gray-200">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 items-center gap-3 py-4 lg:grid-cols-[auto_1fr_auto]">
           {/* Dil seçici - sol */}
diff --git a/apps/admin/src/components/Layout.jsx b/apps/admin/src/components/Layout.jsx
index ac95da1..aada45d 100644
--- a/apps/admin/src/components/Layout.jsx
+++ b/apps/admin/src/components/Layout.jsx
@@ -559,7 +559,7 @@ export default function Layout() {
                 ? <Navigate to="/faturalandirma" replace /> : <Outlet />}
             </div>
           </main>
-          <Footer authenticated />
+          {!isContentEditorRoute && <Footer authenticated />}
         </div>
       </div>
     </div>
diff --git a/apps/admin/src/lib/api/billing.js b/apps/admin/src/lib/api/billing.js
index 5797335..932a90c 100644
--- a/apps/admin/src/lib/api/billing.js
+++ b/apps/admin/src/lib/api/billing.js
@@ -1,7 +1,9 @@
 import { apiClient } from '../api.js'
 
-export async function fetchBillingOverview() {
-  const response = await apiClient.get('/billing/overview')
+export async function fetchBillingOverview({ previewCountry = '', previewPlanSlug = '', previewInterval = 'month' } = {}) {
+  const response = await apiClient.get('/billing/overview', {
+    params: { previewCountry, previewPlanSlug, previewInterval },
+  })
   return response.data
 }
 
diff --git a/apps/admin/src/locales/en/content.json b/apps/admin/src/locales/en/content.json
index 8910014..e1f67a2 100644
--- a/apps/admin/src/locales/en/content.json
+++ b/apps/admin/src/locales/en/content.json
@@ -101,6 +101,8 @@
   "content.refreshing": "Refreshing",
   "content.replace": "Replace",
   "content.save_failed": "Saving failed. Please try again.",
+  "content.save_panel_drag": "Drag the save panel. Use arrow keys to move it; press Home or Escape to return it to its default position.",
+  "content.save_panel_label": "Content save panel",
   "content.scheduled_publish_date": "Scheduled Publish Date",
   "content.scheduling_disabled": "Content scheduling is disabled for this tenant.",
   "content.scheduling_disabled_existing": "Scheduling is disabled for this tenant, but this content is currently scheduled. Once you change the status you will not be able to schedule it again.",
@@ -121,8 +123,9 @@
   "content.slug_taken_for_title": "\"{{slug}}\" is already in use. Please choose a different title.",
   "content.source_html_current": "Edit in HTML format",
   "content.source_html_switch": "Switch to HTML format",
-  "content.source_json_current": "Edit in JSON format",
-  "content.source_json_switch": "Switch to JSON format",
+  "content.source_block_current": "Edit in block view",
+  "content.source_block_switch": "Switch to block view",
+  "content.source_block_label": "Block",
   "content.source_label": "Source:",
   "content.status_unknown": "Unknown",
   "content.summary": "Summary",
diff --git a/apps/admin/src/locales/tr/content.json b/apps/admin/src/locales/tr/content.json
index 02c6d5d..520cf49 100644
--- a/apps/admin/src/locales/tr/content.json
+++ b/apps/admin/src/locales/tr/content.json
@@ -101,6 +101,8 @@
   "content.refreshing": "Yenileniyor",
   "content.replace": "Değiştir",
   "content.save_failed": "Kaydetme işlemi başarısız oldu. Lütfen tekrar deneyin.",
+  "content.save_panel_drag": "Kayıt panelini sürükle. Ok tuşlarıyla taşıyın; başlangıç konumuna dönmek için Home veya Escape tuşuna basın.",
+  "content.save_panel_label": "İçerik kayıt paneli",
   "content.scheduled_publish_date": "Planlanan Yayın Tarihi",
   "content.scheduling_disabled": "Bu varlık için içerik zamanlama özelliği kapalı.",
   "content.scheduling_disabled_existing": "Zamanlama bu varlık için kapalı; mevcut içerik zamanlanmış durumda. Durumu değiştirdiğinizde yeniden zamanlayamazsınız.",
@@ -121,8 +123,9 @@
   "content.slug_taken_for_title": "\"{{slug}}\" zaten kullanılıyor. Lütfen farklı bir başlık seçin.",
   "content.source_html_current": "HTML biçiminde düzenle",
   "content.source_html_switch": "HTML biçimine geç",
-  "content.source_json_current": "JSON biçiminde düzenle",
-  "content.source_json_switch": "JSON biçimine geç",
+  "content.source_block_current": "Blok görünümünde düzenle",
+  "content.source_block_switch": "Blok görünümüne geç",
+  "content.source_block_label": "Blok",
   "content.source_label": "Kaynak:",
   "content.status_unknown": "Bilinmiyor",
   "content.summary": "Özet",
diff --git a/apps/admin/src/pages/billing/Billing.jsx b/apps/admin/src/pages/billing/Billing.jsx
index 752aae4..dbea7ff 100644
--- a/apps/admin/src/pages/billing/Billing.jsx
+++ b/apps/admin/src/pages/billing/Billing.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import {
@@ -118,8 +118,19 @@ export default function Billing() {
   const [profile, setProfile] = useState(EMPTY_PROFILE)
   const [fieldErrors, setFieldErrors] = useState({})
   const [hostedPaymentContent, setHostedPaymentContent] = useState('')
+  const profileInitializedForTenant = useRef('')
+  const scrolledToPlanForTenant = useRef('')
   const locale = i18n.resolvedLanguage === 'en' ? 'en-US' : 'tr-TR'
-  const overview = useQuery({ queryKey: ['billing', 'overview', activeTenantId], queryFn: fetchBillingOverview, retry: 1, enabled: canView, refetchInterval: (data) => data?.tenant?.status === 'pending_payment' ? 5000 : false })
+  const previewCountry = profile.country
+  const overview = useQuery({
+    queryKey: ['billing', 'overview', activeTenantId, previewCountry, checkoutIntent.planSlug, interval],
+    queryFn: () => fetchBillingOverview({ previewCountry, previewPlanSlug: checkoutIntent.planSlug, previewInterval: interval }),
+    retry: 1,
+    enabled: canView,
+    keepPreviousData: true,
+    staleTime: 60_000,
+    refetchInterval: false,
+  })
 
   useEffect(() => {
     if (overview.data?.tenant?.status === 'active' && activeMembership?.tenant?.status === 'pending_payment') {
@@ -151,25 +162,31 @@ export default function Billing() {
   }, [t, toast])
 
   useEffect(() => {
+    if (!activeTenantId || overview.data?.tenant?.id !== activeTenantId || profileInitializedForTenant.current === activeTenantId) return
+    profileInitializedForTenant.current = activeTenantId
     const saved = overview.data?.billingAccount
-    if (!saved) return
     setProfile({
       ...EMPTY_PROFILE,
-      ...saved,
+      ...(saved || {}),
       taxId: '',
-      address: { ...EMPTY_PROFILE.address, ...(saved.address || {}) },
+      address: { ...EMPTY_PROFILE.address, ...(saved?.address || {}) },
       declarationAccepted: false,
       serviceAgreementAccepted: false,
     })
-  }, [overview.data?.billingAccount])
+  }, [activeTenantId, overview.data?.tenant?.id, overview.data?.billingAccount])
 
   useEffect(() => {
-    if (!overview.data || !checkoutIntent.planSlug) return
-    document.getElementById(`billing-plan-${checkoutIntent.planSlug}`)?.scrollIntoView({
+    if (!overview.data?.plans?.length || !checkoutIntent.planSlug || !activeTenantId) return
+    const scrollKey = `${activeTenantId}:${checkoutIntent.planSlug}`
+    if (scrolledToPlanForTenant.current === scrollKey) return
+    const planElement = document.getElementById(`billing-plan-${checkoutIntent.planSlug}`)
+    if (!planElement) return
+    scrolledToPlanForTenant.current = scrollKey
+    planElement.scrollIntoView({
       behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
       block: 'center',
     })
-  }, [checkoutIntent.planSlug, overview.data])
+  }, [activeTenantId, checkoutIntent.planSlug, overview.data?.plans])
 
   const checkout = useMutation({
     mutationFn: createBillingCheckout,
@@ -247,7 +264,7 @@ export default function Billing() {
 
   return (
     <main style={TOKENS} className="min-h-[calc(100vh-4rem)] bg-[var(--billing-canvas)] text-[var(--billing-ink)]">
-      <HostedPaymentFrame content={hostedPaymentContent} onClose={() => setHostedPaymentContent('')} t={t} />
+      <HostedPaymentFrame content={hostedPaymentContent} onClose={() => { setHostedPaymentContent(''); overview.refetch() }} t={t} />
       <div className="mx-auto max-w-7xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
         <header className="flex flex-col gap-4 border-b border-[var(--billing-line)] pb-6 sm:flex-row sm:items-end sm:justify-between">
           <div>
@@ -278,6 +295,11 @@ export default function Billing() {
               <div className="p-6 sm:p-8">
                 <p className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--billing-muted)]">{t('billing.active.eyebrow')}</p>
                 <div className="mt-3 flex flex-wrap items-baseline gap-3"><h2 className="text-4xl font-semibold">{overview.data.tenant.status === 'pending_payment' ? t('tenant.payment_pending') : overview.data.tenant.plan.name}</h2><span className="rounded-full bg-[var(--billing-accent-soft)] px-3 py-1 text-xs font-bold text-[var(--billing-accent)]">{overview.data.tenant.status === 'pending_payment' ? overview.data.plans?.find((plan) => plan.slug === overview.data.tenant.requestedPlanSlug)?.name : activePlanStatus(t, overview.data.tenant.plan, overview.data.subscription)}</span></div>
+                {overview.data.tenant.status === 'pending_payment' && (
+                  <button type="button" onClick={() => overview.refetch()} disabled={!online || overview.isFetching} className="mt-4 inline-flex items-center gap-2 rounded-lg border border-[var(--billing-line)] px-3 py-2 text-sm font-semibold disabled:opacity-50">
+                    <ArrowPathIcon className="h-4 w-4" /> {t('common.refresh')}
+                  </button>
+                )}
                 <p className="mt-5 text-sm text-[var(--billing-muted)]">{t('billing.active.accountLine', { tenant: overview.data.tenant.name, account: overview.data.account.name })}</p>
               </div>
               <div className="border-t border-[var(--billing-line)] bg-[var(--billing-accent)] p-6 text-white lg:border-l lg:border-t-0 sm:p-8">
@@ -448,7 +470,7 @@ export default function Billing() {
                 </div>
               </div>
               <p className="mt-3 max-w-3xl text-xs leading-5 text-[var(--billing-muted)]">
-                {t(overview.data.billingAccount?.country === 'TR'
+                {t((previewCountry || overview.data.billingAccount?.country) === 'TR'
                   ? 'billing.plans.tryCatalogNote'
                   : 'billing.plans.usdCatalogNote')}
               </p>
@@ -461,7 +483,7 @@ export default function Billing() {
                     const requested = overview.data.tenant.status === 'pending_payment' && overview.data.tenant.requestedPlanSlug === plan.slug
                     const highlighted = checkoutIntent.planSlug === plan.slug
                     const hasSubscription = Boolean(overview.data.subscription && ['active', 'trialing', 'past_due', 'paused'].includes(overview.data.subscription.status))
-                    const checkoutAvailable = Boolean(overview.data.paymentRouting?.checkoutAvailable)
+                    const checkoutAvailable = Boolean(overview.data.paymentRouting?.checkoutAvailable && profile.country === overview.data.billingAccount?.country)
                     const canCheckout = !enterprise && !current && !hasSubscription && canManage && online && checkoutAvailable && price?.checkoutReady && price?.id
                     const canOpenProfile = !enterprise && !current && !hasSubscription && canManage && online && !overview.data.paymentRouting?.profileComplete
                     const buttonLabel = checkoutButtonLabel(t, { current, enterprise, checkoutAvailable, checkoutReady: price?.checkoutReady, hasProfile: overview.data.paymentRouting?.profileComplete, hasSubscription })
diff --git a/apps/admin/src/pages/billing/BillingFlow.test.jsx b/apps/admin/src/pages/billing/BillingFlow.test.jsx
new file mode 100644
index 0000000..e37532b
--- /dev/null
+++ b/apps/admin/src/pages/billing/BillingFlow.test.jsx
@@ -0,0 +1,108 @@
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useQuery } from '@tanstack/react-query'
+import Billing from './Billing.jsx'
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(),
+  useMutation: () => ({ mutate: vi.fn(), isPending: false }),
+}))
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key) => key, i18n: { resolvedLanguage: 'tr' } }),
+}))
+vi.mock('../../contexts/AuthContext.jsx', () => ({
+  useAuth: () => ({ hasPermission: () => true, activeTenantId: 'tenant-1', activeMembership: null }),
+}))
+vi.mock('../../contexts/ToastContext.jsx', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn() }),
+}))
+vi.mock('../../components/CountryCombobox.jsx', () => ({
+  default: ({ value, onChange }) => <select aria-label="Country" value={value} onChange={(event) => onChange(event.target.value)}><option value="" /><option value="TR">TR</option></select>,
+}))
+
+function overview() {
+  return {
+    tenant: { id: 'tenant-1', name: 'Canary', status: 'pending_payment', requestedPlanSlug: 'pro', plan: { slug: 'free', name: 'Free' } },
+    account: { name: 'Canary' },
+    billingAccount: { legalName: '', country: '', address: {} },
+    paymentRouting: { profileComplete: false, checkoutAvailable: false },
+    subscription: null,
+    plans: [{ id: 'pro-id', slug: 'pro', name: 'Pro', prices: [{ interval: 'month', amountMinor: 49900, currency: 'TRY', catalogOnly: true }], capabilities: [] }],
+    charges: { subscription: { amountMinor: 49900, currency: 'TRY', interval: 'month', isEstimated: true }, usageEstimate: { available: false, lines: [] }, latestInvoice: null },
+    quotaAlerts: [], usage: {}, invoices: [],
+  }
+}
+
+describe('billing checkout intent', () => {
+  let root
+  let container
+  let queryData
+  let scrollIntoView
+  let refetch
+
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true
+    window.history.pushState({}, '', '/faturalandirma?plan=pro&interval=month')
+    window.matchMedia = vi.fn(() => ({ matches: true }))
+    scrollIntoView = vi.fn()
+    refetch = vi.fn()
+    Element.prototype.scrollIntoView = scrollIntoView
+    queryData = overview()
+    useQuery.mockImplementation(({ queryKey }) => {
+      const tr = queryKey[3] === 'TR'
+      const data = {
+        ...queryData,
+        plans: [{ ...queryData.plans[0], prices: [{ ...queryData.plans[0].prices[0], amountMinor: tr ? 49900 : 1200, currency: tr ? 'TRY' : 'USD' }] }],
+        charges: { ...queryData.charges, subscription: { ...queryData.charges.subscription, amountMinor: tr ? 49900 : 1200, currency: tr ? 'TRY' : 'USD' } },
+      }
+      return { data, isLoading: false, isError: false, refetch }
+    })
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(async () => {
+    await act(async () => root.unmount())
+    container.remove()
+    window.history.replaceState({}, '', '/')
+    delete Element.prototype.scrollIntoView
+    delete globalThis.IS_REACT_ACT_ENVIRONMENT
+    vi.clearAllMocks()
+  })
+
+  it('shows USD until TR is selected and keeps the form usable through overview refreshes', async () => {
+    await act(async () => root.render(<Billing />))
+
+    expect(useQuery.mock.calls.at(-1)[0].queryKey).toContain('')
+    expect(useQuery.mock.calls.at(-1)[0].refetchInterval).toBe(false)
+    expect(container.textContent).toContain('$12')
+    expect(scrollIntoView).toHaveBeenCalledTimes(1)
+
+    const country = container.querySelector('select[aria-label="Country"]')
+    await act(async () => {
+      country.value = 'TR'
+      country.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+    expect(useQuery.mock.calls.at(-1)[0].queryKey).toContain('TR')
+    expect(container.textContent).toContain('₺499')
+    expect(container.textContent).toContain('common.refresh')
+    const refreshButton = Array.from(container.querySelectorAll('button')).find((button) => button.textContent.includes('common.refresh'))
+    await act(async () => refreshButton.click())
+    expect(refetch).toHaveBeenCalledTimes(1)
+
+    const nameInput = container.querySelector('input[autocomplete="organization"]')
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(nameInput, 'Canary Ltd')
+      nameInput.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(nameInput.value).toBe('Canary Ltd')
+
+    queryData = overview()
+    await act(async () => root.render(<Billing />))
+
+    expect(nameInput.value).toBe('Canary Ltd')
+    expect(scrollIntoView).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/apps/admin/src/pages/contents/ContentEditor.css b/apps/admin/src/pages/contents/ContentEditor.css
index 70588b3..d805df8 100644
--- a/apps/admin/src/pages/contents/ContentEditor.css
+++ b/apps/admin/src/pages/contents/ContentEditor.css
@@ -373,13 +373,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0;
   padding: 12px 0;
 }
 
 .editor-image {
   display: block;
-  max-width: 640px;
-  max-height: 640px;
+  max-width: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
@@ -419,6 +419,134 @@
   pointer-events: none;
 }
 
+.editor-image-caption {
+  max-width: 72ch;
+  margin-inline: auto;
+}
+
+.editor-image-context-toolbar__surface {
+  white-space: nowrap;
+}
+
+.editor-image-toolbar-button {
+  position: relative;
+  display: inline-flex;
+  min-width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  color: #475569;
+  background: transparent;
+  transition: color 140ms ease, background-color 140ms ease;
+}
+
+.editor-image-tooltip::before,
+.editor-image-tooltip::after {
+  position: absolute;
+  left: 50%;
+  z-index: 30;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.editor-image-tooltip::before {
+  content: '';
+  top: calc(100% + 3px);
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #0f172a;
+  border-left: 5px solid transparent;
+  transform: translate(-50%, -3px);
+}
+
+.editor-image-tooltip::after {
+  content: attr(data-tooltip);
+  top: calc(100% + 8px);
+  width: max-content;
+  max-width: 220px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: #fff;
+  background: #0f172a;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: center;
+  white-space: normal;
+  transform: translate(-50%, -3px);
+}
+
+.editor-image-tooltip:hover::before,
+.editor-image-tooltip:hover::after,
+.editor-image-tooltip:focus-visible::before,
+.editor-image-tooltip:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.editor-image-toolbar-button:hover:not(:disabled),
+.editor-image-toolbar-button:focus-visible {
+  color: #0f172a;
+  background: #f1f5f9;
+  outline: none;
+}
+
+.editor-image-toolbar-button:focus-visible {
+  box-shadow: 0 0 0 2px #bfdbfe;
+}
+
+.editor-image-toolbar-button.is-active {
+  color: #1d4ed8;
+  background: #dbeafe;
+}
+
+.editor-image-toolbar-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.editor-image-toolbar-button--label {
+  padding-inline: 10px;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.editor-image-toolbar-button--danger:hover,
+.editor-image-toolbar-button--danger:focus-visible {
+  color: #b91c1c;
+  background: #fef2f2;
+}
+
+.editor-image-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin-inline: 2px;
+  background: #e2e8f0;
+}
+
+.editor-image-resizer {
+  z-index: 11;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 3px solid #fff;
+  border-radius: 999px;
+  background: #2563eb;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
+  cursor: nwse-resize;
+  transform: translate(50%, 50%);
+}
+
+.editor-image-resizer:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
 .editor-form-wrapper {
   display: block;
   width: 100%;
@@ -912,15 +1040,404 @@
   z-index: 6;
 }
 
-/* Fix image toolbar positioning in table cells */
-.editor-table-cell .editor-image-container .selected > div:first-child {
-  z-index: 100 !important;
-  position: absolute !important;
+.editor-table-cell .editor-image-context-toolbar {
+  z-index: 12;
+}
+
+.editor-table-cell .editor-image-resizer {
+  z-index: 11;
+}
+
+.editor-image-dialog {
+  --image-surface: #ffffff;
+  --image-surface-subtle: #f8fafc;
+  --image-ink: #0f172a;
+  --image-ink-muted: #64748b;
+  --image-accent: #2563eb;
+  --image-accent-soft: #dbeafe;
+  --image-border: #e2e8f0;
+  --image-danger: #b91c1c;
+  --image-radius-sm: 8px;
+  --image-radius-md: 12px;
+  --image-shadow: -16px 0 48px rgba(15, 23, 42, 0.18);
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(15, 23, 42, 0.46);
+}
+
+.editor-image-dialog__panel {
+  display: flex;
+  width: min(100%, 420px);
+  height: 100%;
+  flex-direction: column;
+  color: var(--image-ink);
+  background: var(--image-surface);
+  box-shadow: var(--image-shadow);
+}
+
+.editor-image-dialog__header,
+.editor-image-dialog__footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-color: var(--image-border);
+}
+
+.editor-image-dialog__header {
+  border-bottom: 1px solid var(--image-border);
+}
+
+.editor-image-dialog__footer {
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid var(--image-border);
+  background: var(--image-surface-subtle);
+}
+
+.editor-image-dialog__eyebrow {
+  margin: 0 0 4px;
+  color: var(--image-accent);
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.14em;
+}
+
+.editor-image-dialog__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
+  outline: none;
+}
+
+.editor-image-dialog__close {
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--image-radius-sm);
+  color: var(--image-ink-muted);
+  background: transparent;
+}
+
+.editor-image-dialog__close:hover,
+.editor-image-dialog__close:focus-visible {
+  color: var(--image-ink);
+  background: var(--image-surface-subtle);
+  outline: none;
+}
+
+.editor-image-dialog__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 8px 24px 32px;
+}
+
+.editor-image-settings-section {
+  min-width: 0;
+  margin: 0;
+  padding: 20px 0;
+  border: 0;
+  border-bottom: 1px solid var(--image-border);
+}
+
+.editor-image-settings-section > legend,
+.editor-image-settings-heading h3 {
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--image-ink);
+}
+
+.editor-image-settings-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.editor-image-settings-heading > span {
+  color: var(--image-ink-muted);
+  font-size: 11px;
+}
+
+.editor-image-segmented {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  margin-top: 12px;
+  padding: 4px;
+  border: 1px solid var(--image-border);
+  border-radius: var(--image-radius-md);
+  background: var(--image-surface-subtle);
+}
+
+.editor-image-segmented button {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 0;
+  border-radius: var(--image-radius-sm);
+  color: var(--image-ink-muted);
+  background: transparent;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.editor-image-segmented button:hover,
+.editor-image-segmented button:focus-visible {
+  color: var(--image-ink);
+  outline: none;
+}
+
+.editor-image-segmented button.is-active {
+  color: var(--image-accent);
+  background: var(--image-surface);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
+}
+
+.editor-image-dimension-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
+  gap: 8px;
+  align-items: end;
+}
+
+.editor-image-dimension-grid label > span,
+.editor-image-field__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  color: var(--image-ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.editor-image-input-suffix {
+  position: relative;
+}
+
+.editor-image-input-suffix input {
+  padding-right: 34px !important;
+}
+
+.editor-image-input-suffix > span {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  color: var(--image-ink-muted);
+  font-size: 11px;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.editor-image-ratio-button {
+  display: inline-flex;
+  width: 36px;
+  height: 38px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--image-border);
+  border-radius: var(--image-radius-sm);
+  color: var(--image-ink-muted);
+  background: var(--image-surface);
+}
+
+.editor-image-ratio-button.is-active {
+  color: var(--image-accent);
+  border-color: #bfdbfe;
+  background: var(--image-accent-soft);
+}
+
+.editor-image-field {
+  display: block;
+  margin-top: 12px;
+}
+
+.editor-image-field input,
+.editor-image-field textarea,
+.editor-image-dimension-grid input {
+  width: 100%;
+  border: 1px solid #cbd5e1;
+  border-radius: var(--image-radius-sm);
+  color: var(--image-ink);
+  background: var(--image-surface);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.editor-image-field input,
+.editor-image-dimension-grid input {
+  height: 38px;
+  padding: 0 10px;
+}
+
+.editor-image-field textarea {
+  min-height: 76px;
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.editor-image-field input:focus,
+.editor-image-field textarea:focus,
+.editor-image-dimension-grid input:focus {
+  border-color: var(--image-accent);
+  outline: 0;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
+}
+
+.editor-image-field input[aria-invalid='true'] {
+  border-color: var(--image-danger);
 }
 
-/* Fix image resizer in table cells */
-.editor-table-cell .editor-image-container .selected [title="Yeniden boyutlandır"] {
-  z-index: 50 !important;
+.editor-image-help,
+.editor-image-error {
+  margin: 6px 0 0;
+  color: var(--image-ink-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.editor-image-error {
+  color: var(--image-danger);
+}
+
+.editor-image-inline-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.editor-image-inline-actions button {
+  padding: 0;
+  border: 0;
+  color: var(--image-accent);
+  background: transparent;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.editor-image-switch,
+.editor-image-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--image-ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.editor-image-switch span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.editor-image-checkbox {
+  margin-top: 12px;
+}
+
+.editor-image-switch input,
+.editor-image-checkbox input {
+  accent-color: var(--image-accent);
+}
+
+.editor-image-button {
+  min-height: 38px;
+  padding: 0 16px;
+  border-radius: var(--image-radius-sm);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.editor-image-button--secondary {
+  border: 1px solid var(--image-border);
+  color: var(--image-ink);
+  background: var(--image-surface);
+}
+
+.editor-image-button--primary {
+  border: 1px solid var(--image-accent);
+  color: #fff;
+  background: var(--image-accent);
+}
+
+.editor-image-button:hover,
+.editor-image-button:focus-visible {
+  filter: brightness(0.96);
+  outline: none;
+}
+
+body.editor-image-dialog-open {
+  overflow: hidden;
+}
+
+body.editor-image-dialog-open .table-cell-action-button-container,
+body.editor-image-dialog-open .table-selection-info,
+body.editor-image-dialog-open .table-toolbar,
+body.editor-image-dialog-open .table-add-row-button,
+body.editor-image-dialog-open .table-add-column-button,
+body.editor-image-dialog-open .table-cell-resizer,
+body.editor-image-dialog-open .floating-text-format-toolbar,
+body.editor-image-dialog-open .editor-image-context-toolbar {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+@media (max-width: 640px) {
+  .editor-image-context-toolbar {
+    top: 4px;
+    padding-inline: 4px;
+  }
+
+  .editor-image-context-toolbar__surface {
+    max-width: calc(100vw - 32px);
+    overflow-x: auto;
+  }
+
+  .editor-image-toolbar-button--label span {
+    display: none;
+  }
+
+  .editor-image-dialog {
+    align-items: flex-end;
+  }
+
+  .editor-image-dialog__panel {
+    width: 100%;
+    height: min(92vh, 760px);
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.2);
+  }
+
+  .editor-image-dialog__header,
+  .editor-image-dialog__footer {
+    padding: 16px 20px;
+  }
+
+  .editor-image-dialog__body {
+    padding-inline: 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-image,
+  .editor-image-toolbar-button,
+  .editor-image-tooltip::before,
+  .editor-image-tooltip::after {
+    transition: none;
+  }
 }
 
 .editor-table-cell:hover {
@@ -1977,3 +2494,153 @@
 .editor-editable:hover {
   scrollbar-color: #a0aec0 transparent;
 }
+
+/*
+ * Content editor workspace tokens
+ * A document-style editing surface owns its scroll; the application shell does
+ * not move when a large table is pasted or edited.
+ */
+.content-editor-workspace {
+  --editor-surface: #ffffff;
+  --editor-surface-muted: #f8fafc;
+  --editor-ink: #111827;
+  --editor-ink-muted: #64748b;
+  --editor-accent: #2563eb;
+  --editor-accent-soft: #dbeafe;
+  --editor-border: #d7dce5;
+  --editor-radius-sm: 4px;
+  --editor-radius-md: 8px;
+  --editor-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.content-editor-frame {
+  background: var(--editor-surface);
+  color: var(--editor-ink);
+}
+
+.content-editor-frame:focus-within {
+  border-color: var(--editor-accent);
+  box-shadow: var(--editor-shadow-focus);
+}
+
+.content-editor-viewport {
+  background: var(--editor-surface);
+  scrollbar-color: #cbd5e1 transparent;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+}
+
+.content-editor-viewport::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.content-editor-viewport::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 999px;
+}
+
+.content-editor-viewport::-webkit-scrollbar-thumb:hover {
+  background-color: #94a3b8;
+}
+
+.content-editor-input {
+  box-sizing: border-box;
+  color: var(--editor-ink);
+  caret-color: var(--editor-accent);
+  overflow-wrap: anywhere;
+}
+
+/* Keep pasted tables inside the document canvas. Many-column tables may scroll
+   horizontally, while long cell content wraps instead of widening the page. */
+.content-editor-input .editor-table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+.content-editor-input .editor-table-cell {
+  min-width: 72px;
+  max-width: 480px;
+  cursor: text;
+  overflow-wrap: anywhere;
+  scroll-margin-block: 64px;
+  word-break: normal;
+}
+
+.content-editor-input .editor-table-cell:focus-within {
+  background: var(--editor-surface) !important;
+  outline: 2px solid var(--editor-accent);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 1px var(--editor-accent-soft);
+}
+
+.content-editor-input .editor-table-cell img,
+.content-editor-input .editor-table-cell video,
+.content-editor-input .editor-table-cell iframe {
+  max-width: 100%;
+}
+
+.content-save-panel-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 65;
+  pointer-events: none;
+}
+
+.content-save-panel.content-save-panel--floating {
+  --save-panel-surface: #ffffff;
+  --save-panel-border: #e2e8f0;
+  --save-panel-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
+  position: fixed !important;
+  right: max(16px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  z-index: 65;
+  box-sizing: border-box;
+  width: min(300px, calc(100vw - 32px));
+  max-height: calc(100vh - 24px);
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+  pointer-events: auto;
+  border-color: var(--save-panel-border);
+  background: var(--save-panel-surface);
+  box-shadow: var(--save-panel-shadow);
+  animation: content-save-panel-enter 160ms ease-out;
+}
+
+.content-save-panel__drag-handle {
+  cursor: grab;
+}
+
+.content-save-panel__drag-handle:active {
+  cursor: grabbing;
+}
+
+@keyframes content-save-panel-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .content-save-panel--floating {
+    animation: none;
+  }
+
+  .content-editor-viewport {
+    scroll-behavior: auto;
+  }
+
+  .content-editor-input .editor-table-cell,
+  .table-add-row-button,
+  .table-add-column-button {
+    transition: none;
+  }
+}
diff --git a/apps/admin/src/pages/contents/ContentEditor.jsx b/apps/admin/src/pages/contents/ContentEditor.jsx
index 9c41ef2..de5dd85 100644
--- a/apps/admin/src/pages/contents/ContentEditor.jsx
+++ b/apps/admin/src/pages/contents/ContentEditor.jsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { cloneElement, useEffect, useState, useCallback, useRef, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -268,6 +269,108 @@ const resolveI18nText = (value, preferredLocales = ['tr', 'en']) => {
   return Object.values(value)[0] || ''
 }
 
+const FLOATING_SAVE_PANEL_MARGIN = 12
+
+const clampFloatingPanelPosition = ({ x, y }, { width, height }) => ({
+  x: Math.min(
+    Math.max(FLOATING_SAVE_PANEL_MARGIN, x),
+    Math.max(FLOATING_SAVE_PANEL_MARGIN, window.innerWidth - width - FLOATING_SAVE_PANEL_MARGIN)
+  ),
+  y: Math.min(
+    Math.max(FLOATING_SAVE_PANEL_MARGIN, y),
+    Math.max(FLOATING_SAVE_PANEL_MARGIN, window.innerHeight - height - FLOATING_SAVE_PANEL_MARGIN)
+  ),
+})
+
+function SavePanel({
+  cardClass,
+  dirty,
+  floating = false,
+  isNew,
+  isSaving,
+  lastUpdatedText,
+  onSave,
+  panelRef,
+  position,
+  saveError,
+  t,
+  onDragPointerDown,
+  onDragPointerMove,
+  onDragPointerUp,
+  onDragKeyDown,
+}) {
+  return (
+    <section
+      ref={panelRef}
+      className={clsx(
+        cardClass,
+        'content-save-panel space-y-3 p-5 shadow-md',
+        floating
+          ? 'content-save-panel--floating'
+          : 'sticky top-4'
+      )}
+      style={floating
+        ? position
+          ? {
+              bottom: 'auto',
+              left: `${position.x}px`,
+              right: 'auto',
+              top: `${position.y}px`,
+            }
+          : {
+              bottom: '16px',
+              left: 'auto',
+              right: '16px',
+              top: 'auto',
+            }
+        : undefined}
+      aria-label={t('content.save_panel_label')}
+    >
+      {floating && (
+        <button
+          type="button"
+          className="content-save-panel__drag-handle absolute right-2 top-2 inline-flex h-8 w-8 touch-none items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500"
+          aria-label={t('content.save_panel_drag')}
+          aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown Home Escape"
+          title={t('content.save_panel_drag')}
+          onPointerDown={onDragPointerDown}
+          onPointerMove={onDragPointerMove}
+          onPointerUp={onDragPointerUp}
+          onPointerCancel={onDragPointerUp}
+          onLostPointerCapture={onDragPointerUp}
+          onKeyDown={onDragKeyDown}
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <circle cx="5" cy="3" r="1.25" />
+            <circle cx="11" cy="3" r="1.25" />
+            <circle cx="5" cy="8" r="1.25" />
+            <circle cx="11" cy="8" r="1.25" />
+            <circle cx="5" cy="13" r="1.25" />
+            <circle cx="11" cy="13" r="1.25" />
+          </svg>
+        </button>
+      )}
+      <div className={clsx('space-y-1 text-xs text-gray-500', floating && 'pr-8')}>
+        {dirty && !saveError && <p>{t('common.unsaved_changes')}</p>}
+        {!isNew && (
+          <p>{lastUpdatedText}</p>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={onSave}
+        disabled={(!dirty && !isNew) || isSaving}
+        className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        {isSaving ? t('common.saving') : t('common.save')}
+      </button>
+      {saveError && (
+        <span className="block text-xs text-red-500" role="alert">{saveError}</span>
+      )}
+    </section>
+  )
+}
+
 // Lexical Playground inspired theme
 const theme = {
   paragraph: 'editor-paragraph',
@@ -429,6 +532,7 @@ export default function ContentEditor() {
   const [sidebarOpen, setSidebarOpen] = useState(() => (
     typeof window === 'undefined' ? true : window.innerWidth >= 1024
   ))
+  const [floatingSavePosition, setFloatingSavePosition] = useState(null)
   const [isSlugAutoGenerated, setIsSlugAutoGenerated] = useState(true)
   const [slugValidationPending, setSlugValidationPending] = useState(false)
   const [fileLinkEditor, setFileLinkEditor] = useState({ open: false, url: '', name: '', download: false, linkKey: null, error: '' })
@@ -436,6 +540,8 @@ export default function ContentEditor() {
   const [embedDialog, setEmbedDialog] = useState({ open: false, value: '', error: '' })
   const [formDialog, setFormDialog] = useState({ open: false, selectedFormId: '', error: '' })
   const editorRef = useRef(null)
+  const floatingSavePanelRef = useRef(null)
+  const savePanelDragRef = useRef(null)
   const pendingHtmlSyncRef = useRef(null)
   const slugDebounceRef = useRef(null)
   const manualSlugDebounceRef = useRef(null)
@@ -1485,10 +1591,105 @@ export default function ContentEditor() {
     setSaveError('')
   }, [linkEditor, t])
 
+  useEffect(() => {
+    setFloatingSavePosition(null)
+    savePanelDragRef.current = null
+    document.body.style.userSelect = ''
+  }, [sidebarOpen])
+
+  useEffect(() => {
+    if (sidebarOpen) return undefined
+
+    const keepFloatingPanelInViewport = () => {
+      const panel = floatingSavePanelRef.current
+      if (!panel) return
+      const rect = panel.getBoundingClientRect()
+      setFloatingSavePosition((current) => (
+        current
+          ? clampFloatingPanelPosition(current, { width: rect.width, height: rect.height })
+          : current
+      ))
+    }
+
+    window.addEventListener('resize', keepFloatingPanelInViewport)
+    return () => window.removeEventListener('resize', keepFloatingPanelInViewport)
+  }, [sidebarOpen])
+
+  useEffect(() => () => {
+    document.body.style.userSelect = ''
+  }, [])
+
+  const handleSavePanelPointerDown = useCallback((event) => {
+    if (event.button !== 0) return
+    const panel = floatingSavePanelRef.current
+    if (!panel) return
+
+    event.preventDefault()
+    const rect = panel.getBoundingClientRect()
+    savePanelDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      width: rect.width,
+      height: rect.height,
+    }
+    setFloatingSavePosition({ x: rect.left, y: rect.top })
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  const handleSavePanelPointerMove = useCallback((event) => {
+    const drag = savePanelDragRef.current
+    if (!drag || drag.pointerId !== event.pointerId) return
+
+    event.preventDefault()
+    setFloatingSavePosition(clampFloatingPanelPosition({
+      x: event.clientX - drag.offsetX,
+      y: event.clientY - drag.offsetY,
+    }, drag))
+  }, [])
+
+  const handleSavePanelPointerUp = useCallback((event) => {
+    const drag = savePanelDragRef.current
+    if (!drag || drag.pointerId !== event.pointerId) return
+
+    savePanelDragRef.current = null
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+    document.body.style.userSelect = ''
+  }, [])
+
+  const handleSavePanelKeyDown = useCallback((event) => {
+    if (event.key === 'Home' || event.key === 'Escape') {
+      event.preventDefault()
+      setFloatingSavePosition(null)
+      return
+    }
+
+    const direction = {
+      ArrowLeft: [-1, 0],
+      ArrowRight: [1, 0],
+      ArrowUp: [0, -1],
+      ArrowDown: [0, 1],
+    }[event.key]
+    if (!direction) return
+
+    const panel = floatingSavePanelRef.current
+    if (!panel) return
+    event.preventDefault()
+    const rect = panel.getBoundingClientRect()
+    const step = event.shiftKey ? 40 : 12
+    setFloatingSavePosition(clampFloatingPanelPosition({
+      x: rect.left + direction[0] * step,
+      y: rect.top + direction[1] * step,
+    }, { width: rect.width, height: rect.height }))
+  }, [])
+
   return (
     <>
       <div className={clsx(
-        'grid grid-cols-1 gap-6 lg:h-full lg:min-h-0 lg:overflow-hidden',
+        'content-editor-workspace grid min-w-0 grid-cols-1 gap-6 lg:h-full lg:min-h-0 lg:overflow-hidden',
         sidebarOpen && 'lg:grid-cols-[minmax(0,1fr)_300px]'
       )}>
         <div className="min-w-0 space-y-6 lg:min-h-0 lg:overflow-y-auto lg:pr-4">
@@ -1598,7 +1799,7 @@ export default function ContentEditor() {
             </div>
           </section>
 
-          <section className={`${cardClass} flex min-h-[60dvh] flex-col space-y-4 p-4 sm:p-6 lg:h-full lg:min-h-0`}>
+          <section className={`${cardClass} content-editor-panel flex min-h-[60dvh] flex-col space-y-4 p-4 sm:p-6 lg:h-full lg:min-h-0`}>
             <div className="flex flex-wrap items-center justify-between gap-3">
               <div className="flex min-w-0 flex-wrap items-center gap-3">
                 <div>
@@ -1613,9 +1814,9 @@ export default function ContentEditor() {
                         ? 'bg-blue-100 text-blue-700'
                         : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
                         }`}
-                      title={renderMode === 'json' ? t('content.source_json_current') : t('content.source_json_switch')}
+                      title={renderMode === 'json' ? t('content.source_block_current') : t('content.source_block_switch')}
                     >
-                      JSON
+                      {t('content.source_block_label')}
                     </button>
                     <button
                       onClick={handleSwitchToHtml}
@@ -1646,7 +1847,7 @@ export default function ContentEditor() {
                 )}
               </button>
             </div>
-            <div className="flex-1 rounded-lg border border-gray-200 bg-white flex flex-col overflow-hidden">
+            <div className="content-editor-frame flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
               {renderMode === 'json' || !canUseHtmlMode ? (
                 <LexicalComposer initialConfig={initialConfig}>
                   <Toolbar
@@ -1667,9 +1868,9 @@ export default function ContentEditor() {
                   <EmbedPlugin />
                   <GalleryPlugin />
                   <FormPlugin />
-                  <div className="relative flex-1 flex overflow-hidden flex-col" ref={editorContainerRef}>
+                  <div className="content-editor-viewport relative flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain" ref={editorContainerRef}>
                     <RichTextPlugin
-                      contentEditable={<ContentEditable className="content-editor-input prose prose-sm prose-headings:my-1 prose-p:my-2 max-w-none flex-1 overflow-x-auto overflow-y-visible px-4 py-3 outline-none scroll-smooth sm:pl-10" />}
+                      contentEditable={<ContentEditable className="content-editor-input prose prose-sm prose-headings:my-1 prose-p:my-2 min-h-full min-w-full max-w-none flex-none px-4 py-3 outline-none sm:pl-10" />}
                       placeholder={<Placeholder />}
                       ErrorBoundary={LexicalErrorBoundary}
                     />
@@ -2196,29 +2397,45 @@ export default function ContentEditor() {
               </section>
             )}
 
-            <section className={`${cardClass} sticky top-4 space-y-3 p-5 shadow-md`}>
-              <div className="space-y-1 text-xs text-gray-500">
-                {dirty && !saveError && <p>{t('common.unsaved_changes')}</p>}
-                {!isNew && (
-                  <p>{t('content.last_updated', { date: formatDateTime(contentData?.updatedAt) })}</p>
-                )}
-              </div>
-              <button
-                onClick={() => handleSave()}
-                disabled={(!dirty && !isNew) || isSaving}
-                className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-40"
-              >
-                {isSaving ? t('common.saving') : t('common.save')}
-              </button>
-              {saveError && (
-                <span className="text-xs text-red-500">{saveError}</span>
-              )}
-            </section>
+            <SavePanel
+              cardClass={cardClass}
+              dirty={dirty}
+              isNew={isNew}
+              isSaving={isSaving}
+              lastUpdatedText={t('content.last_updated', { date: formatDateTime(contentData?.updatedAt) })}
+              onSave={() => handleSave()}
+              saveError={saveError}
+              t={t}
+            />
           </aside>
           </>
         )}
+
       </div>
 
+      {!sidebarOpen && typeof document !== 'undefined' ? createPortal(
+        <div className="content-save-panel-layer" aria-live="polite">
+          <SavePanel
+            cardClass={cardClass}
+            dirty={dirty}
+            floating
+            isNew={isNew}
+            isSaving={isSaving}
+            lastUpdatedText={t('content.last_updated', { date: formatDateTime(contentData?.updatedAt) })}
+            onSave={() => handleSave()}
+            panelRef={floatingSavePanelRef}
+            position={floatingSavePosition}
+            saveError={saveError}
+            t={t}
+            onDragPointerDown={handleSavePanelPointerDown}
+            onDragPointerMove={handleSavePanelPointerMove}
+            onDragPointerUp={handleSavePanelPointerUp}
+            onDragKeyDown={handleSavePanelKeyDown}
+          />
+        </div>,
+        document.body,
+      ) : null}
+
       <MediaPickerModal
         isOpen={mediaPickerState.open}
         mode={mediaPickerState.mode}
@@ -3930,7 +4147,9 @@ function TablePastePlugin() {
           tables.forEach(table => {
             const lexicalTable = convertHTMLTableToLexicalTable(table, editor)
             if (lexicalTable) {
-              $insertNodes([lexicalTable])
+              // A trailing paragraph gives the caret a stable escape point after
+              // a pasted table, matching document editors such as Google Docs.
+              $insertNodes([lexicalTable, $createParagraphNode()])
             }
           })
         })
diff --git a/apps/admin/src/pages/contents/nodes/ImageComponent.jsx b/apps/admin/src/pages/contents/nodes/ImageComponent.jsx
index ae1cd7b..ee2c65e 100644
--- a/apps/admin/src/pages/contents/nodes/ImageComponent.jsx
+++ b/apps/admin/src/pages/contents/nodes/ImageComponent.jsx
@@ -1,21 +1,117 @@
-import { memo, useRef, useEffect, useCallback, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection'
 import { mergeRegister } from '@lexical/utils'
 import {
-  $getSelection,
-  $isNodeSelection,
   $getNodeByKey,
-  $createParagraphNode,
   CLICK_COMMAND,
   COMMAND_PRIORITY_LOW,
   DRAGSTART_COMMAND,
-  KEY_DELETE_COMMAND,
   KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
 } from 'lexical'
-import { $isImageNode, $createImageNode } from './ImageNode.jsx'
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Captions,
+  Eye,
+  EyeOff,
+  ImagePlus,
+  Link2,
+  Lock,
+  Settings2,
+  Trash2,
+  Unlock,
+  X,
+} from 'lucide-react'
+import { $createImageNode, $isImageNode } from './ImageNode.jsx'
+import {
+  dispatchEditorInteractionChange,
+  requestTableSelectionClear,
+} from '../utils/editorInteractionEvents.js'
+import {
+  MAX_IMAGE_DIMENSION,
+  MIN_IMAGE_DIMENSION,
+  clampImageDimension,
+  getDisplayDimensions,
+  normalizeImageLink,
+} from './imageSettings.js'
+
+const ALIGNMENTS = [
+  { value: 'left', label: 'Sola yasla', Icon: AlignLeft },
+  { value: 'center', label: 'Ortala', Icon: AlignCenter },
+  { value: 'right', label: 'Sağa yasla', Icon: AlignRight },
+]
+
+function preventToolbarMouseDown(event) {
+  event.preventDefault()
+  event.stopPropagation()
+}
 
-const DEFAULT_IMAGE_DIMENSION = 640
+function stopToolbarPropagation(event) {
+  event.stopPropagation()
+}
+
+function ImageToolbarButton({
+  label,
+  active = false,
+  danger = false,
+  showLabel = false,
+  disabled = false,
+  onClick,
+  children,
+}) {
+  const classNames = [
+    'editor-image-toolbar-button',
+    'editor-image-tooltip',
+    active ? 'is-active' : '',
+    danger ? 'editor-image-toolbar-button--danger' : '',
+    showLabel ? 'editor-image-toolbar-button--label' : '',
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button
+      type="button"
+      className={classNames}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onClick?.(event)
+      }}
+      data-tooltip={label}
+      aria-label={label}
+      aria-pressed={active || undefined}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
+}
+
+function getInitialSettings({
+  width,
+  height,
+  altText,
+  alignment,
+  caption,
+  showCaption,
+  linkUrl,
+  linkTarget,
+}) {
+  return {
+    width: width ?? '',
+    height: height ?? '',
+    altText,
+    alignment,
+    caption,
+    showCaption,
+    linkUrl,
+    openInNewTab: linkTarget === '_blank',
+    lockRatio: true,
+  }
+}
 
 function ImageComponent({
   src,
@@ -29,558 +125,456 @@ function ImageComponent({
   linkTarget = '_blank',
   nodeKey,
   resizable = true,
-  onReplaceImage = null
+  onReplaceImage = null,
 }) {
   const imageRef = useRef(null)
-  const textareaRef = useRef(null)
+  const settingsTitleRef = useRef(null)
   const [editor] = useLexicalComposerContext()
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
   const [isResizing, setIsResizing] = useState(false)
-  const [isEditingCaption, setIsEditingCaption] = useState(false)
-  const [editCaption, setEditCaption] = useState(caption)
-  const [boldParts, setBoldParts] = useState([])
-  const [italicParts, setItalicParts] = useState([])
-  const [underlineParts, setUnderlineParts] = useState([])
+  const [isEditing, setIsEditing] = useState(false)
+  const [linkError, setLinkError] = useState('')
+  const [settings, setSettings] = useState(() => getInitialSettings({
+    width,
+    height,
+    altText,
+    alignment,
+    caption,
+    showCaption,
+    linkUrl,
+    linkTarget,
+  }))
 
-  // Try to get onReplaceImage callback from editor if not provided
   const replaceImageCallback = onReplaceImage || editor?._editorCallbacks?.onReplaceImage
+  const displayDimensions = getDisplayDimensions(width, height)
+  const displayWidth = displayDimensions.width
+  const displayHeight = displayDimensions.height
 
-  const clampedWidth = typeof width === 'number' ? Math.min(width, DEFAULT_IMAGE_DIMENSION) : undefined
-  const clampedHeight = typeof height === 'number' ? Math.min(height, DEFAULT_IMAGE_DIMENSION) : undefined
-
-  const onDelete = useCallback(
-    (payload) => {
-      if (isSelected) {
-        const event = payload
-        event.preventDefault()
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey)
-          if (node) {
-            node.remove()
-          }
-        })
-        return true
-      }
-      return false
-    },
-    [isSelected, nodeKey, editor]
-  )
-
-  const onClick = useCallback(
-    (payload) => {
-      const event = payload
-      if (isResizing) {
-        return true
-      }
-      if (event.target === imageRef.current) {
-        if (event.shiftKey) {
-          setSelected(!isSelected)
-        } else {
-          clearSelection()
-          setSelected(true)
-        }
-        return true
-      }
-      return false
-    },
-    [isResizing, isSelected, setSelected, clearSelection]
-  )
+  const onDelete = useCallback((event) => {
+    if (!isSelected || isEditing) return false
+    event.preventDefault()
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey)
+      node?.remove()
+    })
+    return true
+  }, [editor, isEditing, isSelected, nodeKey])
+
+  const onClick = useCallback((event) => {
+    if (isResizing) return true
+    if (event.target !== imageRef.current) return false
+
+    requestTableSelectionClear()
+    if (event.shiftKey) {
+      setSelected(!isSelected)
+    } else {
+      clearSelection()
+      setSelected(true)
+    }
+    return true
+  }, [clearSelection, isResizing, isSelected, setSelected])
 
-  // Handle keyboard shortcuts for copy/cut/paste
   const handleKeyboardShortcuts = useCallback((event) => {
-    if (!isSelected) return
+    if (!isSelected || isEditing) return
+
+    const target = event.target
+    if (target instanceof HTMLElement && (target.matches('input, textarea, select, button') || target.isContentEditable)) {
+      return
+    }
 
     const isMeta = event.metaKey || event.ctrlKey
     if (!isMeta) return
 
-    if (event.key === 'c' || event.key === 'C') {
-      // Copy
+    if (event.key === 'c' || event.key === 'C' || event.key === 'x' || event.key === 'X') {
       event.preventDefault()
+      const shouldRemove = event.key === 'x' || event.key === 'X'
       editor.update(() => {
         const node = $getNodeByKey(nodeKey)
-        if ($isImageNode(node)) {
-          const nodeData = {
-            type: 'image',
-            src: node.getSrc(),
-            altText: node.getAltText(),
-            width: node.getWidth(),
-            height: node.getHeight(),
-            alignment: node.getAlignment(),
-            caption: node.getCaption(),
-            showCaption: node.getShowCaption(),
-          }
-          if (!window.__lexicalClipboard) window.__lexicalClipboard = []
-          window.__lexicalClipboard = [nodeData]
-        }
+        if (!$isImageNode(node)) return
+        window.__lexicalClipboard = [{
+          type: 'image',
+          src: node.getSrc(),
+          altText: node.getAltText(),
+          width: node.getWidth(),
+          height: node.getHeight(),
+          alignment: node.getAlignment(),
+          caption: node.getCaption(),
+          showCaption: node.getShowCaption(),
+          linkUrl: node.getLinkUrl(),
+          linkTarget: node.getLinkTarget(),
+        }]
+        if (shouldRemove) node.remove()
       })
-    } else if (event.key === 'x' || event.key === 'X') {
-      // Cut
+      return
+    }
+
+    if ((event.key === 'v' || event.key === 'V') && window.__lexicalClipboard?.length > 0) {
+      const clipboardData = window.__lexicalClipboard[0]
+      if (clipboardData.type !== 'image') return
       event.preventDefault()
       editor.update(() => {
         const node = $getNodeByKey(nodeKey)
-        if ($isImageNode(node)) {
-          const nodeData = {
-            type: 'image',
-            src: node.getSrc(),
-            altText: node.getAltText(),
-            width: node.getWidth(),
-            height: node.getHeight(),
-            alignment: node.getAlignment(),
-            caption: node.getCaption(),
-            showCaption: node.getShowCaption(),
-          }
-          if (!window.__lexicalClipboard) window.__lexicalClipboard = []
-          window.__lexicalClipboard = [nodeData]
-          // Delete the node
-          node.remove()
-        }
+        if (!$isImageNode(node)) return
+        node.insertAfter($createImageNode(clipboardData))
       })
-    } else if (event.key === 'v' || event.key === 'V') {
-      // Paste
-      event.preventDefault()
-      if (window.__lexicalClipboard && window.__lexicalClipboard.length > 0) {
-        const clipboardData = window.__lexicalClipboard[0]
-        if (clipboardData.type === 'image') {
-          editor.update(() => {
-            const newNode = $createImageNode({
-              src: clipboardData.src,
-              altText: clipboardData.altText,
-              width: clipboardData.width,
-              height: clipboardData.height,
-              alignment: clipboardData.alignment,
-              caption: clipboardData.caption,
-              showCaption: clipboardData.showCaption,
-            })
-            const node = $getNodeByKey(nodeKey)
-            if ($isImageNode(node)) {
-              node.insertAfter(newNode)
-            }
-          })
-        }
-      }
     }
-  }, [isSelected, nodeKey, editor])
+  }, [editor, isEditing, isSelected, nodeKey])
 
-  useEffect(() => {
-    const unregister = mergeRegister(
-      editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW),
-      editor.registerCommand(
-        DRAGSTART_COMMAND,
-        (event) => {
-          if (event.target === imageRef.current) {
-            event.preventDefault()
-            return true
-          }
-          return false
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        KEY_DELETE_COMMAND,
-        onDelete,
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        KEY_BACKSPACE_COMMAND,
-        onDelete,
-        COMMAND_PRIORITY_LOW
-      )
-    )
-    return () => {
-      unregister()
-    }
-  }, [editor, onDelete, onClick])
+  useEffect(() => mergeRegister(
+    editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW),
+    editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+      if (event.target !== imageRef.current) return false
+      event.preventDefault()
+      return true
+    }, COMMAND_PRIORITY_LOW),
+    editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+    editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+  ), [editor, onClick, onDelete])
 
-  // Keyboard shortcuts listener
   useEffect(() => {
-    const handleKeyDown = (event) => {
-      handleKeyboardShortcuts(event)
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
+    document.addEventListener('keydown', handleKeyboardShortcuts)
+    return () => document.removeEventListener('keydown', handleKeyboardShortcuts)
   }, [handleKeyboardShortcuts])
 
-  const handleAlignmentChange = useCallback((newAlignment) => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey)
-      if ($isImageNode(node)) {
-        node.setAlignment(newAlignment)
-      }
-    })
-  }, [editor, nodeKey])
-
-  const handleCaptionChange = useCallback((newCaption) => {
+  const handleAlignmentChange = useCallback((nextAlignment) => {
     editor.update(() => {
       const node = $getNodeByKey(nodeKey)
-      if ($isImageNode(node)) {
-        node.setCaption(newCaption)
-      }
+      if ($isImageNode(node)) node.setAlignment(nextAlignment)
     })
   }, [editor, nodeKey])
 
   const handleToggleCaption = useCallback(() => {
     editor.update(() => {
       const node = $getNodeByKey(nodeKey)
-      if ($isImageNode(node)) {
-        node.setShowCaption(!showCaption)
-      }
+      if ($isImageNode(node)) node.setShowCaption(!showCaption)
     })
   }, [editor, nodeKey, showCaption])
 
-  const handleSaveCaption = useCallback(() => {
-    handleCaptionChange(editCaption)
-    setIsEditingCaption(false)
-  }, [handleCaptionChange, editCaption])
+  const openSettings = useCallback(() => {
+    setSettings(getInitialSettings({
+      width,
+      height,
+      altText,
+      alignment,
+      caption,
+      showCaption,
+      linkUrl,
+      linkTarget,
+    }))
+    setLinkError('')
+    setIsEditing(true)
+  }, [alignment, altText, caption, height, linkTarget, linkUrl, showCaption, width])
+
+  const closeSettings = useCallback(() => {
+    setIsEditing(false)
+    setLinkError('')
+  }, [])
 
-  const handleCancelCaption = useCallback(() => {
-    setEditCaption(caption)
-    setIsEditingCaption(false)
-  }, [caption])
-
-  // Sync edit caption with prop changes
   useEffect(() => {
-    setEditCaption(caption)
-  }, [caption])
+    if (!isEditing) return undefined
+    requestTableSelectionClear()
+    dispatchEditorInteractionChange('image-settings-dialog', true)
+    document.body.classList.add('editor-image-dialog-open')
+
+    const focusTimer = window.setTimeout(() => settingsTitleRef.current?.focus(), 0)
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') closeSettings()
+    }
+    document.addEventListener('keydown', handleEscape)
 
-  // Focus textarea and select text when modal opens
-  useEffect(() => {
-    if (isEditingCaption && textareaRef.current) {
-      setTimeout(() => {
-        textareaRef.current?.focus()
-        textareaRef.current?.select()
-      }, 0)
+    return () => {
+      window.clearTimeout(focusTimer)
+      document.removeEventListener('keydown', handleEscape)
+      document.body.classList.remove('editor-image-dialog-open')
+      dispatchEditorInteractionChange('image-settings-dialog', false)
     }
-  }, [isEditingCaption])
+  }, [closeSettings, isEditing])
 
-  const draggable = isSelected && !isResizing
+  const updateDimension = useCallback((field, rawValue) => {
+    if (rawValue === '') {
+      setSettings((current) => ({ ...current, [field]: '' }))
+      return
+    }
 
-  const getAlignmentStyle = () => {
-    switch (alignment) {
-      case 'left':
-        return 'justify-start'
-      case 'right':
-        return 'justify-end'
-      case 'center':
-      default:
-        return 'justify-center'
+    const value = Number.parseInt(rawValue, 10)
+    if (!Number.isFinite(value) || value < 0) return
+    setSettings((current) => {
+      const next = { ...current, [field]: value }
+      if (!current.lockRatio) return next
+      const storedWidth = Number(current.width)
+      const storedHeight = Number(current.height)
+      const image = imageRef.current
+      const ratio = storedWidth > 0 && storedHeight > 0
+        ? storedWidth / storedHeight
+        : image?.naturalWidth && image?.naturalHeight
+          ? image.naturalWidth / image.naturalHeight
+          : 1
+      if (field === 'width') next.height = Math.round(value / ratio)
+      if (field === 'height') next.width = Math.round(value * ratio)
+      return next
+    })
+  }, [])
+
+  const useOriginalDimensions = useCallback(() => {
+    const image = imageRef.current
+    if (!image?.naturalWidth || !image?.naturalHeight) return
+    const scale = Math.min(1, MAX_IMAGE_DIMENSION / Math.max(image.naturalWidth, image.naturalHeight))
+    setSettings((current) => ({
+      ...current,
+      width: Math.round(image.naturalWidth * scale),
+      height: Math.round(image.naturalHeight * scale),
+    }))
+  }, [])
+
+  const saveSettings = useCallback(() => {
+    const normalizedLink = normalizeImageLink(settings.linkUrl)
+    if (normalizedLink === null) {
+      setLinkError('http(s), e-posta, telefon veya site içi bir bağlantı girin.')
+      return
     }
-  }
+
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey)
+      if (!$isImageNode(node)) return
+      node.setDimensions({
+        width: settings.width === '' ? undefined : clampImageDimension(settings.width),
+        height: settings.height === '' ? undefined : clampImageDimension(settings.height),
+      })
+      node.setAltText(settings.altText.trim())
+      node.setAlignment(settings.alignment)
+      node.setCaption(settings.caption.trim())
+      node.setShowCaption(settings.showCaption)
+      node.setLink({
+        url: normalizedLink,
+        target: settings.openInNewTab ? '_blank' : '_self',
+      })
+    })
+    closeSettings()
+  }, [closeSettings, editor, nodeKey, settings])
+
+  const alignmentClassName = alignment === 'left'
+    ? 'justify-start'
+    : alignment === 'right'
+      ? 'justify-end'
+      : 'justify-center'
+  const draggable = isSelected && !isResizing
 
   return (
-    <div className={`editor-image-container flex ${getAlignmentStyle()}`}>
-      <div
-        className={`relative inline-block max-w-full ${
-          isSelected ? 'selected' : ''
-        }`}
-      >
-        <img
-          className={`editor-image ${
-            isSelected ? 'focused' : ''
-          } ${draggable ? 'draggable' : ''}`}
-          src={src}
-          alt={altText}
-          ref={imageRef}
-          style={{
-            maxWidth: `${DEFAULT_IMAGE_DIMENSION}px`,
-            maxHeight: `${DEFAULT_IMAGE_DIMENSION}px`,
-            width: clampedWidth ? `${clampedWidth}px` : 'auto',
-            height: clampedHeight ? `${clampedHeight}px` : 'auto',
-          }}
-          draggable={draggable}
-        />
-
-        {isSelected && resizable && (
-          <ImageResizer
-            editor={editor}
-            imageRef={imageRef}
-            nodeKey={nodeKey}
-            onResizeStart={() => setIsResizing(true)}
-            onResizeEnd={() => setIsResizing(false)}
+    <div className={`editor-image-container flex ${alignmentClassName}`}>
+      <figure className={`relative inline-block max-w-full ${isSelected ? 'selected' : ''}`}>
+        {linkUrl ? (
+          <a href={linkUrl} target={linkTarget} rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined} tabIndex={-1} onClick={(event) => event.preventDefault()}>
+            <img
+              className={`editor-image ${isSelected ? 'focused' : ''} ${draggable ? 'draggable' : ''}`}
+              src={src}
+              alt={altText}
+              ref={imageRef}
+              width={displayWidth}
+              height={displayHeight}
+              style={{ width: displayWidth ? `${displayWidth}px` : 'auto', height: displayHeight ? `${displayHeight}px` : 'auto' }}
+              draggable={draggable}
+            />
+          </a>
+        ) : (
+          <img
+            className={`editor-image ${isSelected ? 'focused' : ''} ${draggable ? 'draggable' : ''}`}
+            src={src}
+            alt={altText}
+            ref={imageRef}
+            width={displayWidth}
+            height={displayHeight}
+            style={{ width: displayWidth ? `${displayWidth}px` : 'auto', height: displayHeight ? `${displayHeight}px` : 'auto' }}
+            draggable={draggable}
           />
         )}
 
-        {isSelected && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 rounded">
-            <div className="flex items-center gap-2 bg-blue-600 text-white px-3 py-2 rounded text-xs font-medium shadow-lg">
-              <span className="hidden sm:inline">Görsel seçildi</span>
-            <span className="inline-flex items-center gap-1 ml-2">
-              {linkUrl ? (
-                <img src={new URL('../assets/icons/link.svg', import.meta.url)} alt="link" className="h-3 w-3" />
-              ) : null}
-            </span>
-            <div className="flex items-center gap-1 ml-2">
-              <button
-                className={`w-6 h-6 flex items-center justify-center rounded ${alignment === 'left' ? 'bg-blue-400' : 'bg-blue-700'} hover:bg-blue-500`}
-                onClick={() => handleAlignmentChange('left')}
-                title="Sola yasla"
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M4 6h16M4 12h8M4 18h16"/>
-                </svg>
-              </button>
-              <button
-                className={`w-6 h-6 flex items-center justify-center rounded ${alignment === 'center' ? 'bg-blue-400' : 'bg-blue-700'} hover:bg-blue-500`}
-                onClick={() => handleAlignmentChange('center')}
-                title="Ortala"
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M4 6h16M8 12h8M4 18h16"/>
-                </svg>
-              </button>
-              <button
-                className={`w-6 h-6 flex items-center justify-center rounded ${alignment === 'right' ? 'bg-blue-400' : 'bg-blue-700'} hover:bg-blue-500`}
-                onClick={() => handleAlignmentChange('right')}
-                title="Sağa yasla"
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M4 6h16M12 12h8M4 18h16"/>
-                </svg>
-              </button>
-            </div>
-            <div className="w-px h-4 bg-blue-400 mx-1"></div>
-            <button
-              className="w-6 h-6 flex items-center justify-center rounded bg-amber-600 hover:bg-amber-500"
-              onClick={() => {
-                if (typeof replaceImageCallback === 'function') {
-                  replaceImageCallback(nodeKey, caption)
-                }
-              }}
-              title="Resmi değiştir"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M3 7v6h6"/>
-                <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/>
-              </svg>
-            </button>
-            <div className="flex items-center gap-1">
-              <button
-                className={`w-6 h-6 flex items-center justify-center rounded ${showCaption ? 'bg-blue-400' : 'bg-blue-700'} hover:bg-blue-500`}
-                onClick={handleToggleCaption}
-                title="Caption görünürlüğü"
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M3 10h18M3 14h18M3 6h18M3 18h18"/>
-                </svg>
-              </button>
-              {showCaption && (
-                <button
-                  className="w-6 h-6 flex items-center justify-center rounded bg-blue-700 hover:bg-blue-500"
-                  onClick={() => setIsEditingCaption(true)}
-                  title="Caption düzenle"
-                >
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                    <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                  </svg>
-                </button>
-              )}
-            </div>
-            <button
-              className="text-white hover:text-red-200 ml-2"
-              onClick={() => {
-                editor.update(() => {
-                  const node = $getNodeByKey(nodeKey)
-                  if (node) {
-                    node.remove()
-                  }
-                })
-              }}
-              title="Görseli sil"
+        {isSelected && resizable ? (
+          <ImageResizer editor={editor} imageRef={imageRef} nodeKey={nodeKey} onResizeStart={() => setIsResizing(true)} onResizeEnd={() => setIsResizing(false)} />
+        ) : null}
+
+        {isSelected ? (
+          <div className="editor-image-context-toolbar pointer-events-none absolute inset-x-0 top-2 flex items-start justify-center px-2">
+            <div
+              className="editor-image-context-toolbar__surface pointer-events-auto flex items-center gap-1 rounded-xl border border-slate-200 bg-white p-1.5 text-slate-700 shadow-xl"
+              onPointerDown={stopToolbarPropagation}
+              onMouseDown={preventToolbarMouseDown}
+              onClick={stopToolbarPropagation}
+              onDoubleClick={stopToolbarPropagation}
             >
-              ×
-            </button>
-          </div>
-            </div>
-        )}
-
-        {showCaption && caption && (
-          <div className="mt-2 text-sm text-gray-600 text-center italic">
-            {caption}
-          </div>
-        )}
-      </div>
-
-      {/* Caption Edit Modal */}
-      {isEditingCaption && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 max-w-lg w-full mx-4 max-h-96 overflow-y-auto">
-            <h3 className="text-lg font-medium mb-4">Caption Düzenle</h3>
-            
-            {/* Formatting Toolbar */}
-            <div className="flex gap-1 mb-3 border-b pb-3">
-              <button
-                onClick={() => {
-                  const textarea = textareaRef.current
-                  if (!textarea) return
-                  const start = textarea.selectionStart
-                  const end = textarea.selectionEnd
-                  const selected = editCaption.substring(start, end)
-                  if (selected) {
-                    const before = editCaption.substring(0, start)
-                    const after = editCaption.substring(end)
-                    setEditCaption(`${before}<b>${selected}</b>${after}`)
-                  }
-                }}
-                className="px-3 py-1 text-sm font-bold bg-gray-200 rounded hover:bg-gray-300"
-                title="Kalın (Bold)"
-              >
-                B
-              </button>
-              <button
-                onClick={() => {
-                  const textarea = textareaRef.current
-                  if (!textarea) return
-                  const start = textarea.selectionStart
-                  const end = textarea.selectionEnd
-                  const selected = editCaption.substring(start, end)
-                  if (selected) {
-                    const before = editCaption.substring(0, start)
-                    const after = editCaption.substring(end)
-                    setEditCaption(`${before}<i>${selected}</i>${after}`)
-                  }
-                }}
-                className="px-3 py-1 text-sm italic bg-gray-200 rounded hover:bg-gray-300"
-                title="İtalik (Italic)"
-              >
-                I
-              </button>
-              <button
-                onClick={() => {
-                  const textarea = textareaRef.current
-                  if (!textarea) return
-                  const start = textarea.selectionStart
-                  const end = textarea.selectionEnd
-                  const selected = editCaption.substring(start, end)
-                  if (selected) {
-                    const before = editCaption.substring(0, start)
-                    const after = editCaption.substring(end)
-                    setEditCaption(`${before}<u>${selected}</u>${after}`)
-                  }
+              <div className="flex items-center" role="group" aria-label="Görsel hizalama">
+                {ALIGNMENTS.map(({ value, label, Icon }) => (
+                  <ImageToolbarButton key={value} label={label} active={alignment === value} onClick={() => handleAlignmentChange(value)}>
+                    <Icon size={16} strokeWidth={1.8} />
+                  </ImageToolbarButton>
+                ))}
+              </div>
+              <span className="editor-image-toolbar-divider" aria-hidden="true" />
+              <ImageToolbarButton label="Görsel seçeneklerini düzenle" showLabel onClick={openSettings}>
+                <Settings2 size={16} strokeWidth={1.8} />
+                <span>Düzenle</span>
+              </ImageToolbarButton>
+              <ImageToolbarButton
+                label="Görseli değiştir"
+                onClick={(event) => {
+                  event.currentTarget.blur()
+                  replaceImageCallback?.(nodeKey)
                 }}
-                className="px-3 py-1 text-sm underline bg-gray-200 rounded hover:bg-gray-300"
-                title="Altı Çizili (Underline)"
+                disabled={typeof replaceImageCallback !== 'function'}
               >
-                U
-              </button>
+                <ImagePlus size={16} strokeWidth={1.8} />
+              </ImageToolbarButton>
+              <ImageToolbarButton label={showCaption ? 'Caption’ı gizle' : 'Caption’ı göster'} active={showCaption} onClick={handleToggleCaption}>
+                <Captions size={16} strokeWidth={1.8} />
+              </ImageToolbarButton>
+              <span className="editor-image-toolbar-divider" aria-hidden="true" />
+              <ImageToolbarButton label="Görseli sil" danger onClick={onDelete}>
+                <Trash2 size={16} strokeWidth={1.8} />
+              </ImageToolbarButton>
             </div>
-
-            {/* Caption Textarea */}
-            <textarea
-              ref={textareaRef}
-              value={editCaption}
-              onChange={(e) => setEditCaption(e.target.value)}
-              className="w-full p-3 border border-gray-300 rounded-lg resize-none"
-              rows="3"
-              placeholder="Görsel açıklaması..."
-            />
-            
-            {/* Preview */}
-            {editCaption && (
-              <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
-                <p className="text-xs text-gray-500 mb-1">Önizleme:</p>
-                <div 
-                  className="text-sm text-gray-700"
-                  dangerouslySetInnerHTML={{ __html: editCaption }}
-                />
+          </div>
+        ) : null}
+
+        {showCaption && caption ? <figcaption className="editor-image-caption mt-2 whitespace-pre-line text-center text-sm italic text-gray-600">{caption}</figcaption> : null}
+      </figure>
+
+      {isEditing ? createPortal(
+        <div className="editor-image-dialog" onMouseDown={closeSettings}>
+          <section className="editor-image-dialog__panel" role="dialog" aria-modal="true" aria-labelledby={`image-settings-title-${nodeKey}`} onMouseDown={(event) => event.stopPropagation()}>
+            <header className="editor-image-dialog__header">
+              <div>
+                <p className="editor-image-dialog__eyebrow">GÖRSEL</p>
+                <h2 id={`image-settings-title-${nodeKey}`} ref={settingsTitleRef} className="editor-image-dialog__title" tabIndex={-1}>Görsel seçenekleri</h2>
               </div>
-            )}
-            
-            {/* Buttons */}
-            <div className="flex justify-end gap-2 mt-4">
-              <button
-                onClick={handleCancelCaption}
-                className="px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200"
-              >
-                İptal
-              </button>
-              <button
-                onClick={handleSaveCaption}
-                className="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700"
-              >
-                Kaydet
-              </button>
+              <button type="button" className="editor-image-dialog__close" onClick={closeSettings} aria-label="Kapat"><X size={20} /></button>
+            </header>
+
+            <div className="editor-image-dialog__body">
+              <fieldset className="editor-image-settings-section">
+                <legend>Yerleşim</legend>
+                <div className="editor-image-segmented" role="group" aria-label="Görsel hizalama">
+                  {ALIGNMENTS.map(({ value, label, Icon }) => (
+                    <button key={value} type="button" className={settings.alignment === value ? 'is-active' : ''} onClick={() => setSettings((current) => ({ ...current, alignment: value }))} aria-pressed={settings.alignment === value}>
+                      <Icon size={17} />
+                      <span>{label.replace(' yasla', '')}</span>
+                    </button>
+                  ))}
+                </div>
+              </fieldset>
+
+              <section className="editor-image-settings-section">
+                <div className="editor-image-settings-heading">
+                  <h3>Boyut</h3>
+                  <span>{MIN_IMAGE_DIMENSION}–{MAX_IMAGE_DIMENSION} px</span>
+                </div>
+                <div className="editor-image-dimension-grid">
+                  <label>
+                    <span>Genişlik</span>
+                    <div className="editor-image-input-suffix">
+                      <input type="number" min={MIN_IMAGE_DIMENSION} max={MAX_IMAGE_DIMENSION} value={settings.width} onChange={(event) => updateDimension('width', event.target.value)} placeholder="Otomatik" />
+                      <span>px</span>
+                    </div>
+                  </label>
+                  <button type="button" className={`editor-image-ratio-button ${settings.lockRatio ? 'is-active' : ''}`} onClick={() => setSettings((current) => ({ ...current, lockRatio: !current.lockRatio }))} aria-pressed={settings.lockRatio} title={settings.lockRatio ? 'En-boy oranı kilitli' : 'En-boy oranı serbest'}>
+                    {settings.lockRatio ? <Lock size={16} /> : <Unlock size={16} />}
+                  </button>
+                  <label>
+                    <span>Yükseklik</span>
+                    <div className="editor-image-input-suffix">
+                      <input type="number" min={MIN_IMAGE_DIMENSION} max={MAX_IMAGE_DIMENSION} value={settings.height} onChange={(event) => updateDimension('height', event.target.value)} placeholder="Otomatik" />
+                      <span>px</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="editor-image-inline-actions">
+                  <button type="button" onClick={useOriginalDimensions}>Özgün boyut</button>
+                  <button type="button" onClick={() => setSettings((current) => ({ ...current, width: '', height: '' }))}>Otomatik boyut</button>
+                </div>
+              </section>
+
+              <fieldset className="editor-image-settings-section">
+                <legend>Alternatif metin</legend>
+                <label className="editor-image-field">
+                  <span className="sr-only">Alternatif metin</span>
+                  <textarea value={settings.altText} onChange={(event) => setSettings((current) => ({ ...current, altText: event.target.value }))} maxLength={500} rows={3} placeholder="Görseli, göremeyen birine kısaca anlatın" />
+                </label>
+                <p className="editor-image-help">Dekoratif görsellerde boş bırakılabilir. Dosya adını tekrar etmeyin.</p>
+              </fieldset>
+
+              <section className="editor-image-settings-section">
+                <div className="editor-image-settings-heading">
+                  <h3>Caption</h3>
+                  <label className="editor-image-switch">
+                    <input type="checkbox" checked={settings.showCaption} onChange={(event) => setSettings((current) => ({ ...current, showCaption: event.target.checked }))} />
+                    <span>{settings.showCaption ? <Eye size={15} /> : <EyeOff size={15} />} Göster</span>
+                  </label>
+                </div>
+                <label className="editor-image-field">
+                  <span className="sr-only">Caption</span>
+                  <textarea value={settings.caption} onChange={(event) => setSettings((current) => ({ ...current, caption: event.target.value }))} maxLength={1000} rows={3} placeholder="Okuyucuya gösterilecek kısa açıklama" />
+                </label>
+                <p className="editor-image-help">Güvenli HTML çıktısı için caption düz metin olarak saklanır.</p>
+              </section>
+
+              <fieldset className="editor-image-settings-section">
+                <legend>Bağlantı</legend>
+                <label className="editor-image-field">
+                  <span className="editor-image-field__label"><Link2 size={15} /> URL</span>
+                  <input type="text" value={settings.linkUrl} onChange={(event) => { setSettings((current) => ({ ...current, linkUrl: event.target.value })); setLinkError('') }} placeholder="https:// veya /site-ici-sayfa" aria-invalid={Boolean(linkError)} aria-describedby={linkError ? `image-link-error-${nodeKey}` : undefined} />
+                </label>
+                {linkError ? <p id={`image-link-error-${nodeKey}`} className="editor-image-error">{linkError}</p> : null}
+                <label className="editor-image-checkbox">
+                  <input type="checkbox" checked={settings.openInNewTab} disabled={!settings.linkUrl.trim()} onChange={(event) => setSettings((current) => ({ ...current, openInNewTab: event.target.checked }))} />
+                  Yeni sekmede aç
+                </label>
+              </fieldset>
             </div>
-          </div>
-        </div>
-      )}
+
+            <footer className="editor-image-dialog__footer">
+              <button type="button" className="editor-image-button editor-image-button--secondary" onClick={closeSettings}>İptal</button>
+              <button type="button" className="editor-image-button editor-image-button--primary" onClick={saveSettings}>Uygula</button>
+            </footer>
+          </section>
+        </div>,
+        document.body,
+      ) : null}
     </div>
   )
 }
 
 function ImageResizer({ editor, imageRef, nodeKey, onResizeStart, onResizeEnd }) {
-  const controlRef = useRef(null)
+  const handleMouseDown = useCallback((event) => {
+    event.preventDefault()
+    onResizeStart()
+
+    const startX = event.clientX
+    const image = imageRef.current
+    if (!image) return
+    const startWidth = Number.parseInt(document.defaultView.getComputedStyle(image).width, 10)
+    const startHeight = Number.parseInt(document.defaultView.getComputedStyle(image).height, 10)
+    const ratio = startWidth / startHeight
+
+    function handleMouseMove(moveEvent) {
+      const nextWidth = clampImageDimension(startWidth + (moveEvent.clientX - startX))
+      if (!nextWidth) return
+      image.style.width = `${nextWidth}px`
+      image.style.height = `${Math.round(nextWidth / ratio)}px`
+    }
 
-  const handleMouseDown = useCallback(
-    (event) => {
-      event.preventDefault()
-      onResizeStart()
+    function handleMouseUp() {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      onResizeEnd()
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey)
+        if ($isImageNode(node)) node.setDimensions({ width: clampImageDimension(image.style.width), height: clampImageDimension(image.style.height) })
+      })
+    }
 
-      const startX = event.clientX
-      const startY = event.clientY
-      const image = imageRef.current
-      if (!image) return
-
-      const startWidth = parseInt(document.defaultView.getComputedStyle(image).width, 10)
-      const startHeight = parseInt(document.defaultView.getComputedStyle(image).height, 10)
-      const ratio = startWidth / startHeight
-
-      function handleMouseMove(moveEvent) {
-        const currentX = moveEvent.clientX
-        const currentY = moveEvent.clientY
-        const diffX = currentX - startX
-        const diffY = currentY - startY
-
-        const newWidth = startWidth + diffX
-        const newHeight = startHeight + diffY
-
-        const constrainedWidth = Math.max(100, Math.min(newWidth, DEFAULT_IMAGE_DIMENSION))
-        const constrainedHeight = constrainedWidth / ratio
-
-        if (image) {
-          image.style.width = `${constrainedWidth}px`
-          image.style.height = `${constrainedHeight}px`
-        }
-      }
-
-      function handleMouseUp() {
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-        onResizeEnd()
-
-        const image = imageRef.current
-        if (!image) return
-
-        const newWidth = parseInt(image.style.width, 10)
-        const newHeight = parseInt(image.style.height, 10)
-
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey)
-          if ($isImageNode(node)) {
-            node.setDimensions({ width: newWidth, height: newHeight })
-          }
-        })
-      }
-
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
-    },
-    [editor, imageRef, nodeKey, onResizeEnd, onResizeStart]
-  )
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }, [editor, imageRef, nodeKey, onResizeEnd, onResizeStart])
 
-  return (
-    <div
-      ref={controlRef}
-      className="absolute bottom-0 right-0 w-4 h-4 bg-blue-600 cursor-se-resize border border-white"
-      style={{
-        transform: 'translate(50%, 50%)',
-      }}
-      onMouseDown={handleMouseDown}
-      title="Yeniden boyutlandır"
-    />
-  )
+  return <button type="button" className="editor-image-resizer absolute bottom-0 right-0" onMouseDown={handleMouseDown} title="Oranı koruyarak yeniden boyutlandır" aria-label="Görseli yeniden boyutlandır" />
 }
 
 export default memo(ImageComponent)
-export { DEFAULT_IMAGE_DIMENSION }
diff --git a/apps/admin/src/pages/contents/nodes/ImageNode.jsx b/apps/admin/src/pages/contents/nodes/ImageNode.jsx
index 2154a85..9ec7d7c 100644
--- a/apps/admin/src/pages/contents/nodes/ImageNode.jsx
+++ b/apps/admin/src/pages/contents/nodes/ImageNode.jsx
@@ -1,5 +1,6 @@
 import { DecoratorNode } from 'lexical'
-import ImageComponent, { DEFAULT_IMAGE_DIMENSION } from './ImageComponent.jsx'
+import ImageComponent from './ImageComponent.jsx'
+import { DEFAULT_IMAGE_DIMENSION, normalizeImageLink } from './imageSettings.js'
 
 export class ImageNode extends DecoratorNode {
   __src
@@ -19,12 +20,12 @@ export class ImageNode extends DecoratorNode {
     this.__altText = altText
     this.__width = width
     this.__height = height
-    this.__alignment = alignment
+    this.__alignment = ['left', 'center', 'right'].includes(alignment) ? alignment : 'center'
     // Alt text is accessibility metadata; captions are optional editorial copy.
     this.__caption = caption || ''
     this.__showCaption = showCaption
-    this.__linkUrl = linkUrl || ''
-    this.__linkTarget = linkTarget || '_blank'
+    this.__linkUrl = normalizeImageLink(linkUrl || '') || ''
+    this.__linkTarget = linkTarget === '_self' ? '_self' : '_blank'
     this.__mediaId = mediaId || ''
   }
 
@@ -96,8 +97,9 @@ export class ImageNode extends DecoratorNode {
   }
 
   exportDOM() {
-    const element = document.createElement('div')
+    const element = document.createElement('figure')
     element.className = `editor-image-container flex ${this.getAlignmentClassName()}`
+    element.dataset.alignment = this.__alignment
 
     const wrapper = document.createElement('div')
     wrapper.className = 'relative inline-block max-w-full'
@@ -106,13 +108,20 @@ export class ImageNode extends DecoratorNode {
     img.src = this.__src
     img.alt = this.__altText
     img.className = 'editor-image'
+    img.loading = 'lazy'
+    img.decoding = 'async'
 
     if (this.__width) {
+      img.width = this.__width
       img.style.width = `${this.__width}px`
     }
     if (this.__height) {
+      img.height = this.__height
       img.style.height = `${this.__height}px`
     }
+    if (this.__mediaId) {
+      img.dataset.contexthubMediaId = this.__mediaId
+    }
 
     let content = img
 
@@ -128,8 +137,8 @@ export class ImageNode extends DecoratorNode {
     wrapper.appendChild(content)
 
     if (this.__showCaption && this.__caption) {
-      const caption = document.createElement('div')
-      caption.className = 'mt-2 text-sm text-gray-600 text-center italic'
+      const caption = document.createElement('figcaption')
+      caption.className = 'editor-image-caption mt-2 whitespace-pre-line text-sm text-gray-600 text-center italic'
       caption.textContent = this.__caption
       wrapper.appendChild(caption)
     }
@@ -176,8 +185,8 @@ export class ImageNode extends DecoratorNode {
 
   setDimensions({ width, height }) {
     const writable = this.getWritable()
-    writable.__width = typeof width === 'number' ? width : writable.__width
-    writable.__height = typeof height === 'number' ? height : writable.__height
+    writable.__width = typeof width === 'number' ? width : undefined
+    writable.__height = typeof height === 'number' ? height : undefined
   }
 
   setSrc(src) {
@@ -192,7 +201,7 @@ export class ImageNode extends DecoratorNode {
 
   setAlignment(alignment) {
     const writable = this.getWritable()
-    writable.__alignment = alignment
+    writable.__alignment = ['left', 'center', 'right'].includes(alignment) ? alignment : 'center'
   }
 
   setCaption(caption) {
@@ -207,8 +216,8 @@ export class ImageNode extends DecoratorNode {
 
   setLink({ url = '', target = '_blank' } = {}) {
     const writable = this.getWritable()
-    writable.__linkUrl = url || ''
-    writable.__linkTarget = target || '_blank'
+    writable.__linkUrl = normalizeImageLink(url || '') || ''
+    writable.__linkTarget = target === '_self' ? '_self' : '_blank'
   }
 
   getLinkUrl() {
@@ -227,6 +236,14 @@ export class ImageNode extends DecoratorNode {
     return this.__altText
   }
 
+  getWidth() {
+    return this.__width
+  }
+
+  getHeight() {
+    return this.__height
+  }
+
   getAlignment() {
     return this.__alignment
   }
@@ -278,18 +295,33 @@ function convertImageElement(domNode) {
   const height = heightAttr ? parseInt(heightAttr, 10) || undefined : undefined
 
   let alignment = 'center'
-  const container = domNode.closest('.editor-image-container')
-  if (container?.classList.contains('justify-start')) {
+  const container = domNode.closest('figure, .editor-image-container')
+  if (container?.dataset.alignment === 'left' || container?.classList.contains('justify-start')) {
     alignment = 'left'
-  } else if (container?.classList.contains('justify-end')) {
+  } else if (container?.dataset.alignment === 'right' || container?.classList.contains('justify-end')) {
     alignment = 'right'
   }
 
-  const captionElement = domNode.parentElement?.querySelector('.mt-2, figcaption')
+  const captionElement = container?.querySelector('figcaption, .editor-image-caption')
   const caption = captionElement?.textContent?.trim() || ''
   const showCaption = Boolean(caption)
+  const anchor = domNode.closest('a')
+  const linkUrl = anchor?.getAttribute('href') || ''
+  const linkTarget = anchor?.getAttribute('target') || '_self'
+  const mediaId = domNode.dataset.contexthubMediaId || ''
 
   return {
-    node: $createImageNode({ src, altText, width, height, alignment, caption, showCaption }),
+    node: $createImageNode({
+      src,
+      altText,
+      width,
+      height,
+      alignment,
+      caption,
+      showCaption,
+      linkUrl,
+      linkTarget,
+      mediaId,
+    }),
   }
 }
diff --git a/apps/admin/src/pages/contents/nodes/ImageNode.test.jsx b/apps/admin/src/pages/contents/nodes/ImageNode.test.jsx
index 8dcedef..77eabc3 100644
--- a/apps/admin/src/pages/contents/nodes/ImageNode.test.jsx
+++ b/apps/admin/src/pages/contents/nodes/ImageNode.test.jsx
@@ -1,6 +1,11 @@
 import { $getRoot, createEditor } from 'lexical'
 import { describe, expect, it } from 'vitest'
 import { $createImageNode, ImageNode } from './ImageNode.jsx'
+import {
+  clampImageDimension,
+  getDisplayDimensions,
+  normalizeImageLink,
+} from './imageSettings.js'
 
 function readImageNode(payload) {
   const editor = createEditor({
@@ -18,6 +23,8 @@ function readImageNode(payload) {
       altText: node.getAltText(),
       caption: node.getCaption(),
       showCaption: node.getShowCaption(),
+      width: node.getWidth(),
+      height: node.getHeight(),
     }
   }, { discrete: true })
 
@@ -30,6 +37,8 @@ describe('ImageNode caption defaults', () => {
       altText: 'Erişilebilir görsel açıklaması',
       caption: '',
       showCaption: true,
+      width: undefined,
+      height: undefined,
     })
   })
 
@@ -41,3 +50,90 @@ describe('ImageNode caption defaults', () => {
     }).caption).toBe('Editoryal caption')
   })
 })
+
+describe('ImageNode editable attributes', () => {
+  it('preserves dimensions in JSON and emits semantic, escaped HTML', () => {
+    const editor = createEditor({ nodes: [ImageNode], onError: (error) => { throw error } })
+    let json
+    let html
+
+    editor.update(() => {
+      const node = $createImageNode({
+        src: '/image.jpg',
+        altText: 'Ekip fotoğrafı',
+        width: 720,
+        height: 480,
+        alignment: 'right',
+        caption: '<script>alert(1)</script>',
+        linkUrl: '/hakkimizda',
+        linkTarget: '_self',
+      })
+      $getRoot().append(node)
+      json = node.exportJSON()
+      html = node.exportDOM().element.outerHTML
+    }, { discrete: true })
+
+    expect(json).toMatchObject({
+      width: 720,
+      height: 480,
+      alignment: 'right',
+      linkUrl: '/hakkimizda',
+    })
+    expect(html).toContain('<figure')
+    expect(html).toContain('<figcaption')
+    expect(html).toContain('width="720"')
+    expect(html).toContain('height="480"')
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;')
+    expect(html).not.toContain('<script>')
+  })
+
+  it('can return dimensions to automatic sizing', () => {
+    const editor = createEditor({ nodes: [ImageNode], onError: (error) => { throw error } })
+    let dimensions
+
+    editor.update(() => {
+      const node = $createImageNode({ src: '/image.jpg', width: 640, height: 360 })
+      $getRoot().append(node)
+      node.setDimensions({ width: undefined, height: undefined })
+      dimensions = [node.getWidth(), node.getHeight()]
+    }, { discrete: true })
+
+    expect(dimensions).toEqual([undefined, undefined])
+  })
+
+  it('normalizes unsupported alignment and executable links at the node boundary', () => {
+    const editor = createEditor({ nodes: [ImageNode], onError: (error) => { throw error } })
+    let attributes
+
+    editor.update(() => {
+      const node = $createImageNode({
+        src: '/image.jpg',
+        alignment: 'floating',
+        linkUrl: 'javascript:alert(1)',
+        linkTarget: 'popup',
+      })
+      $getRoot().append(node)
+      attributes = [node.getAlignment(), node.getLinkUrl(), node.getLinkTarget()]
+    }, { discrete: true })
+
+    expect(attributes).toEqual(['center', '', '_blank'])
+  })
+
+})
+
+describe('image setting boundaries', () => {
+  it('clamps dimensions to the supported HTML and JSON range', () => {
+    expect(clampImageDimension(10)).toBe(40)
+    expect(clampImageDimension(900)).toBe(900)
+    expect(clampImageDimension(9000)).toBe(1600)
+    expect(clampImageDimension('auto')).toBeUndefined()
+    expect(getDisplayDimensions(4000, 3000)).toEqual({ width: 1600, height: 1200 })
+  })
+
+  it('accepts safe links and rejects executable protocols', () => {
+    expect(normalizeImageLink('/icerik')).toBe('/icerik')
+    expect(normalizeImageLink('https://ctxhub.net')).toBe('https://ctxhub.net')
+    expect(normalizeImageLink('javascript:alert(1)')).toBeNull()
+    expect(normalizeImageLink('data:text/html,hello')).toBeNull()
+  })
+})
diff --git a/apps/admin/src/pages/contents/nodes/imageSettings.js b/apps/admin/src/pages/contents/nodes/imageSettings.js
new file mode 100644
index 0000000..7352d68
--- /dev/null
+++ b/apps/admin/src/pages/contents/nodes/imageSettings.js
@@ -0,0 +1,45 @@
+const MIN_IMAGE_DIMENSION = 40
+const MAX_IMAGE_DIMENSION = 1600
+const DEFAULT_IMAGE_DIMENSION = 640
+
+function clampImageDimension(value) {
+  const parsed = Number.parseInt(value, 10)
+  if (!Number.isFinite(parsed)) return undefined
+  return Math.min(Math.max(parsed, MIN_IMAGE_DIMENSION), MAX_IMAGE_DIMENSION)
+}
+
+function getDisplayDimensions(width, height) {
+  const numericWidth = Number(width) > 0 ? Number(width) : undefined
+  const numericHeight = Number(height) > 0 ? Number(height) : undefined
+  if (!numericWidth && !numericHeight) return { width: undefined, height: undefined }
+  if (!numericWidth) return { width: undefined, height: Math.min(numericHeight, MAX_IMAGE_DIMENSION) }
+  if (!numericHeight) return { width: Math.min(numericWidth, MAX_IMAGE_DIMENSION), height: undefined }
+
+  const scale = Math.min(1, MAX_IMAGE_DIMENSION / Math.max(numericWidth, numericHeight))
+  return {
+    width: Math.round(numericWidth * scale),
+    height: Math.round(numericHeight * scale),
+  }
+}
+
+function normalizeImageLink(value) {
+  const link = value.trim()
+  if (!link) return ''
+  if (/^(\/|#|\.\/|\.\.\/)/.test(link)) return link
+
+  try {
+    const url = new URL(link)
+    return ['http:', 'https:', 'mailto:', 'tel:'].includes(url.protocol) ? link : null
+  } catch {
+    return null
+  }
+}
+
+export {
+  DEFAULT_IMAGE_DIMENSION,
+  MAX_IMAGE_DIMENSION,
+  MIN_IMAGE_DIMENSION,
+  clampImageDimension,
+  getDisplayDimensions,
+  normalizeImageLink,
+}
diff --git a/apps/admin/src/pages/contents/plugins/FloatingTextFormatToolbarPlugin.jsx b/apps/admin/src/pages/contents/plugins/FloatingTextFormatToolbarPlugin.jsx
index 897e390..135aff1 100644
--- a/apps/admin/src/pages/contents/plugins/FloatingTextFormatToolbarPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/FloatingTextFormatToolbarPlugin.jsx
@@ -15,6 +15,7 @@ import {
 } from 'lexical'
 
 import './FloatingTextFormatToolbarPlugin.css'
+import { EDITOR_INTERACTION_CHANGE_EVENT } from '../utils/editorInteractionEvents.js'
 
 const HIDDEN_TRANSFORM = 'translate3d(-10000px, -10000px, 0)'
 
@@ -48,6 +49,7 @@ function hideToolbar(toolbarElem) {
 export default function FloatingTextFormatToolbarPlugin({ anchorElem: anchorElemProp, onOpenLinkModal } = {}) {
   const [editor] = useLexicalComposerContext()
   const toolbarRef = useRef(null)
+  const interactionBlockedRef = useRef(false)
   const [isBold, setIsBold] = useState(false)
   const [isItalic, setIsItalic] = useState(false)
   const [isUnderline, setIsUnderline] = useState(false)
@@ -63,6 +65,11 @@ export default function FloatingTextFormatToolbarPlugin({ anchorElem: anchorElem
   }, [anchorElemProp])
 
   const updateToolbar = useCallback(() => {
+    if (interactionBlockedRef.current) {
+      hideToolbar(toolbarRef.current)
+      return
+    }
+
     editor.getEditorState().read(() => {
       const selection = $getSelection()
       const toolbarElem = toolbarRef.current
@@ -169,6 +176,22 @@ export default function FloatingTextFormatToolbarPlugin({ anchorElem: anchorElem
     )
   }, [editor, updateToolbar])
 
+  useEffect(() => {
+    const handleInteractionChange = (event) => {
+      interactionBlockedRef.current = event?.detail?.active === true
+      if (interactionBlockedRef.current) {
+        hideToolbar(toolbarRef.current)
+        return
+      }
+      updateToolbar()
+    }
+
+    window.addEventListener(EDITOR_INTERACTION_CHANGE_EVENT, handleInteractionChange)
+    return () => {
+      window.removeEventListener(EDITOR_INTERACTION_CHANGE_EVENT, handleInteractionChange)
+    }
+  }, [updateToolbar])
+
   useEffect(() => {
     const handler = () => {
       updateToolbar()
diff --git a/apps/admin/src/pages/contents/plugins/ImageHandlersPlugin.jsx b/apps/admin/src/pages/contents/plugins/ImageHandlersPlugin.jsx
index 8879b4f..b65bcd7 100644
--- a/apps/admin/src/pages/contents/plugins/ImageHandlersPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/ImageHandlersPlugin.jsx
@@ -39,7 +39,7 @@ export default function ImageHandlersPlugin({ openMediaPicker }) {
     })
   }, [editor, openMediaPicker])
 
-  const handleReplaceImage = useCallback((nodeKey, currentCaption) => {
+  const handleReplaceImage = useCallback((nodeKey) => {
     if (typeof openMediaPicker !== 'function') {
       return
     }
@@ -92,7 +92,7 @@ export default function ImageHandlersPlugin({ openMediaPicker }) {
         editor._editorCallbacks.openMediaPicker = null
       }
     }
-  }, [editor, handleInsertImage, handleReplaceImage])
+  }, [editor, handleInsertImage, handleReplaceImage, openMediaPicker])
 
   return null
 }
diff --git a/apps/admin/src/pages/contents/plugins/TableActionMenuPlugin.jsx b/apps/admin/src/pages/contents/plugins/TableActionMenuPlugin.jsx
index 251820d..2e892e9 100644
--- a/apps/admin/src/pages/contents/plugins/TableActionMenuPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/TableActionMenuPlugin.jsx
@@ -21,6 +21,7 @@ import {
   $mergeCells,
   $unmergeCells
 } from '../nodes/TableNode.jsx'
+import { EDITOR_INTERACTION_CHANGE_EVENT } from '../utils/editorInteractionEvents.js'
 
 const SPACE = 6
 const BUTTON_SIZE = 20
@@ -36,6 +37,7 @@ function TableActionMenuPlugin({ anchorElem: _anchorElem = document.body }) {
   const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 })
   const [menuSource, setMenuSource] = useState('cell')
   const menuSourceRef = useRef(menuSource)
+  const interactionBlockedRef = useRef(false)
   const [menuAlignment, setMenuAlignment] = useState({
     openLeft: false,
     openUp: false,
@@ -197,6 +199,12 @@ function TableActionMenuPlugin({ anchorElem: _anchorElem = document.body }) {
   const updateMenu = useCallback(() => {
     const activeSource = menuSourceRef.current
 
+    if (interactionBlockedRef.current) {
+      setTableCellNode(null)
+      setShowMenu(false)
+      return
+    }
+
     if (document.querySelector('.editor-table.table-selected')) {
       setTableCellNode(null)
       setShowMenu(false)
@@ -431,12 +439,34 @@ function TableActionMenuPlugin({ anchorElem: _anchorElem = document.body }) {
     resetSubmenus()
   }, [resetSubmenus])
 
+  useEffect(() => {
+    const handleInteractionChange = (event) => {
+      interactionBlockedRef.current = event?.detail?.active === true
+
+      if (interactionBlockedRef.current) {
+        setTableCellNode(null)
+        setSelectionAnchorRect(null)
+        closeMenu()
+        return
+      }
+
+      updateMenu()
+    }
+
+    window.addEventListener(EDITOR_INTERACTION_CHANGE_EVENT, handleInteractionChange)
+    return () => {
+      window.removeEventListener(EDITOR_INTERACTION_CHANGE_EVENT, handleInteractionChange)
+    }
+  }, [closeMenu, updateMenu])
+
   useEffect(() => {
     menuSourceRef.current = menuSource
   }, [menuSource])
 
   useEffect(() => {
     const handleMenuToggle = (event) => {
+      if (interactionBlockedRef.current) return
+
       const detail = event?.detail || {}
       const source = detail.source || 'selection'
       const shouldToggle = detail.toggle === true
@@ -801,6 +831,8 @@ function TableActionMenuPlugin({ anchorElem: _anchorElem = document.body }) {
         className="table-cell-action-button chevron-down"
         onClick={handleMenuClick}
         onMouseDown={(e) => e.preventDefault()}
+        aria-label="Hücre işlemlerini aç"
+        title="Hücre işlemleri · Çoklu seçim: ⌘/Ctrl/Alt + sürükle"
       >
         <ChevronDownIcon className="w-4 h-4" />
       </button>
diff --git a/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.jsx b/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.jsx
index 7a83e0c..3769a2f 100644
--- a/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.jsx
@@ -1,30 +1,36 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
-import { $getSelection, $isRangeSelection } from 'lexical'
-import { $isTableCellNode, $isTableRowNode, $isTableNode } from '../nodes/TableNode.jsx'
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  KEY_TAB_COMMAND,
+} from 'lexical'
+import { $isTableCellNode } from '../nodes/TableNode.jsx'
+import { $getAdjacentTableCell } from './tableNavigation.js'
 
 /**
  * TableCellFocusPlugin: Google Docs tarzı tablo hücre navigasyonu
  * - Tab/Shift+Tab ile sonraki/önceki hücreye git
- * - Arrow keys ile hücre içinde navigasyon
- * - Double-click ile hücre içeriğini düzenleme moduna al
+ * - Son hücrede Tab ile yeni satır ekle
+ * - Tek tıklamada Lexical'ın doğal hücre düzenleme davranışını koru
  */
 function TableCellFocusPlugin() {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
-    // Tab ve Shift+Tab tuşu işleme
-    const handleKeyDown = (event) => {
-      const { keyCode, shiftKey } = event
-      
-      // Tab: 9, Shift+Tab: 9 + shiftKey
-      if (keyCode === 9) {
+    return editor.registerCommand(
+      KEY_TAB_COMMAND,
+      (event) => {
+        const { shiftKey } = event
+        let handled = false
+
         editor.update(() => {
           const selection = $getSelection()
           
           if (!$isRangeSelection(selection)) return
           
-          const currentNode = selection.getNodes()[0]
+          const currentNode = selection.anchor.getNode()
           if (!currentNode) return
           
           let tableCellNode = null
@@ -41,87 +47,19 @@ function TableCellFocusPlugin() {
           
           if (!tableCellNode) return
           
-          const tableRowNode = tableCellNode.getParent()
-          if (!$isTableRowNode(tableRowNode)) return
-          
-          const tableNode = tableRowNode.getParent()
-          if (!$isTableNode(tableNode)) return
-          
-          // Hücrenin satır içindeki indeksini bul
-          const cellIndex = tableRowNode.getChildren().indexOf(tableCellNode)
-          const rows = tableNode.getChildren()
-          const rowIndex = rows.indexOf(tableRowNode)
-          
-          if (cellIndex === -1 || rowIndex === -1) return
-          
-          let nextCell = null
-          
-          if (shiftKey) {
-            // Shift+Tab: Önceki hücreye git
-            if (cellIndex > 0) {
-              nextCell = tableRowNode.getChildren()[cellIndex - 1]
-            } else if (rowIndex > 0) {
-              const prevRow = rows[rowIndex - 1]
-              const prevRowCells = prevRow.getChildren()
-              nextCell = prevRowCells[prevRowCells.length - 1]
-            }
-          } else {
-            // Tab: Sonraki hücreye git
-            if (cellIndex < tableRowNode.getChildren().length - 1) {
-              nextCell = tableRowNode.getChildren()[cellIndex + 1]
-            } else if (rowIndex < rows.length - 1) {
-              const nextRow = rows[rowIndex + 1]
-              nextCell = nextRow.getChildren()[0]
-            }
-          }
+          const nextCell = $getAdjacentTableCell(tableCellNode, shiftKey)
           
           if (nextCell && $isTableCellNode(nextCell)) {
-            const cellChildren = nextCell.getChildren()
-            if (cellChildren.length > 0) {
-              // Hücre içindeki ilk paragrafın sonuna imleç koy
-              const firstChild = cellChildren[0]
-              const endOffset = firstChild.getTextContent().length
-              selection.setTextNodeRange(firstChild, endOffset, firstChild, endOffset)
-            }
-            
+            nextCell.selectStart()
             event.preventDefault()
+            handled = true
           }
         })
-      }
-    }
-
-    // Double-click: Hücre içeriğini düzenle - editor state'e focus koy
-    const handleDoubleClick = (event) => {
-      const cellElement = event.target.closest('.editor-table-cell')
-      if (!cellElement) return
-
-      event.preventDefault()
-      event.stopPropagation()
-
-      // Seçili class'ını kaldır
-      const tableElement = cellElement.closest('.editor-table')
-      if (tableElement) {
-        tableElement.querySelectorAll('.editor-table-cell.cell-selected').forEach(cell => {
-          cell.classList.remove('cell-selected')
-        })
-      }
-      cellElement.classList.remove('cell-selected')
-
-      // Hücrenin contenteditable'ını bul
-      const contentEditableDiv = cellElement.querySelector('[contenteditable="true"]')
-      if (contentEditableDiv) {
-        contentEditableDiv.focus()
-      }
-    }
-
-    // Global event listeners
-    document.addEventListener('keydown', handleKeyDown)
-    document.addEventListener('dblclick', handleDoubleClick, true)
 
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('dblclick', handleDoubleClick, true)
-    }
+        return handled
+      },
+      COMMAND_PRIORITY_EDITOR,
+    )
   }, [editor])
 
   return null
diff --git a/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.test.jsx b/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.test.jsx
new file mode 100644
index 0000000..835fbd1
--- /dev/null
+++ b/apps/admin/src/pages/contents/plugins/TableCellFocusPlugin.test.jsx
@@ -0,0 +1,63 @@
+import { $getRoot, createEditor } from 'lexical'
+import { describe, expect, it } from 'vitest'
+import {
+  $createTableWithDimensions,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+} from '../nodes/TableNode.jsx'
+import { $getAdjacentTableCell } from './tableNavigation.js'
+
+function createTableEditor() {
+  return createEditor({
+    nodes: [TableNode, TableRowNode, TableCellNode],
+    onError(error) {
+      throw error
+    },
+  })
+}
+
+describe('$getAdjacentTableCell', () => {
+  it('moves between existing cells in both directions', () => {
+    const editor = createTableEditor()
+    let result
+
+    editor.update(() => {
+      const table = $createTableWithDimensions(1, 2)
+      $getRoot().append(table)
+      const [firstCell, secondCell] = table.getFirstChild().getChildren()
+
+      result = {
+        forwards: $getAdjacentTableCell(firstCell) === secondCell,
+        backwards: $getAdjacentTableCell(secondCell, true) === firstCell,
+      }
+    }, { discrete: true })
+
+    expect(result).toEqual({ forwards: true, backwards: true })
+  })
+
+  it('adds a matching row when Tab is pressed in the final cell', () => {
+    const editor = createTableEditor()
+    let result
+
+    editor.update(() => {
+      const table = $createTableWithDimensions(1, 3)
+      $getRoot().append(table)
+      const finalCell = table.getLastChild().getLastChild()
+      const nextCell = $getAdjacentTableCell(finalCell)
+      const rows = table.getChildren()
+
+      result = {
+        rowCount: rows.length,
+        newColumnCount: rows[1].getChildrenSize(),
+        selectedFirstNewCell: nextCell === rows[1].getFirstChild(),
+      }
+    }, { discrete: true })
+
+    expect(result).toEqual({
+      rowCount: 2,
+      newColumnCount: 3,
+      selectedFirstNewCell: true,
+    })
+  })
+})
diff --git a/apps/admin/src/pages/contents/plugins/TableCellResizerPlugin.jsx b/apps/admin/src/pages/contents/plugins/TableCellResizerPlugin.jsx
index 1c19db0..dc8fafe 100644
--- a/apps/admin/src/pages/contents/plugins/TableCellResizerPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/TableCellResizerPlugin.jsx
@@ -67,8 +67,8 @@ function TableCellResizerPlugin({ anchorElem = document.body }) {
     const anchorRect = anchorElem.getBoundingClientRect()
 
     // Position resizer at right edge of cell
-    const left = tableCellRect.right - anchorRect.left - 4
-    const top = tableCellRect.top - anchorRect.top
+    const left = tableCellRect.right - anchorRect.left + anchorElem.scrollLeft - 4
+    const top = tableCellRect.top - anchorRect.top + anchorElem.scrollTop
     const height = tableCellRect.height
 
     setResizerPosition({
@@ -198,4 +198,4 @@ function $findMatchingParent(startingNode, targetFunc) {
   return null
 }
 
-export default TableCellResizerPlugin
\ No newline at end of file
+export default TableCellResizerPlugin
diff --git a/apps/admin/src/pages/contents/plugins/TableHoverActionsPlugin.jsx b/apps/admin/src/pages/contents/plugins/TableHoverActionsPlugin.jsx
index e9c9172..23a6d8d 100644
--- a/apps/admin/src/pages/contents/plugins/TableHoverActionsPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/TableHoverActionsPlugin.jsx
@@ -1,10 +1,9 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { $createParagraphNode } from 'lexical'
-import { useEffect, useRef, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import {
-  $isTableCellNode,
   $isTableRowNode,
   $isTableNode,
   $createTableRowNode,
@@ -34,12 +33,12 @@ function TableHoverActionsPlugin({ anchorElem = document.body }) {
     const anchorRect = anchorElem.getBoundingClientRect()
 
     // Position row button (bottom center of table, closer)
-    const rowButtonTop = tableRect.bottom - anchorRect.top - 12
-    const rowButtonLeft = tableRect.left - anchorRect.left + (tableRect.width / 2) - 12
+    const rowButtonTop = tableRect.bottom - anchorRect.top + anchorElem.scrollTop - 12
+    const rowButtonLeft = tableRect.left - anchorRect.left + anchorElem.scrollLeft + (tableRect.width / 2) - 12
 
     // Position column button (right center of table, closer)
-    const columnButtonTop = tableRect.top - anchorRect.top + (tableRect.height / 2) - 12
-    const columnButtonLeft = tableRect.right - anchorRect.left - 12
+    const columnButtonTop = tableRect.top - anchorRect.top + anchorElem.scrollTop + (tableRect.height / 2) - 12
+    const columnButtonLeft = tableRect.right - anchorRect.left + anchorElem.scrollLeft - 12
 
     setButtonPositions({
       row: { top: rowButtonTop, left: rowButtonLeft },
@@ -222,4 +221,4 @@ function TableHoverActionsPlugin({ anchorElem = document.body }) {
   )
 }
 
-export default TableHoverActionsPlugin
\ No newline at end of file
+export default TableHoverActionsPlugin
diff --git a/apps/admin/src/pages/contents/plugins/TableSelectionPlugin.jsx b/apps/admin/src/pages/contents/plugins/TableSelectionPlugin.jsx
index d7c8123..a1a3261 100644
--- a/apps/admin/src/pages/contents/plugins/TableSelectionPlugin.jsx
+++ b/apps/admin/src/pages/contents/plugins/TableSelectionPlugin.jsx
@@ -17,21 +17,21 @@ import {
 } from '@heroicons/react/20/solid'
 import {
   $isTableCellNode,
-  $isTableRowNode,
   $isTableNode,
-  $mergeCells,
-  $getCellPosition
+  $mergeCells
 } from '../nodes/TableNode.jsx'
+import {
+  EDITOR_INTERACTION_CHANGE_EVENT,
+  TABLE_SELECTION_CLEAR_EVENT,
+} from '../utils/editorInteractionEvents.js'
+import { isCellSelectionGesture } from './tableSelectionGesture.js'
 
 function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
   const [editor] = useLexicalComposerContext()
   const [selectedCells, setSelectedCells] = useState(new Set())
   const [isSelecting, setIsSelecting] = useState(false)
   const [selectionStart, setSelectionStart] = useState(null)
-  const [dragCurrent, setDragCurrent] = useState(null)
   const [currentTable, setCurrentTable] = useState(null)
-  const [lastClickTime, setLastClickTime] = useState(0)
-  const [lastClickedCell, setLastClickedCell] = useState(null)
   const [selectionRect, setSelectionRect] = useState(null)
   const [selectionToolbarPosition, setSelectionToolbarPosition] = useState(null)
   const [selectedTableKey, setSelectedTableKey] = useState(null)
@@ -57,7 +57,6 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
     setSelectionToolbarPosition(null)
     setIsSelecting(false)
     setSelectionStart(null)
-    setDragCurrent(null)
     setCurrentTable(null)
     notifySelectionChange()
   }, [currentTable, notifySelectionChange])
@@ -196,7 +195,7 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
     const cellsInRange = getCellsInRange(startCoords, endCoords, tableElement)
     const cellKeys = new Set()
 
-    cellsInRange.forEach((cellElement, index) => {
+    cellsInRange.forEach((cellElement) => {
       cellElement.classList.add('selected-cell')
 
       // Add position classes
@@ -232,6 +231,8 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
 
   // Mouse event handlers
   const handleMouseDown = useCallback((event) => {
+    if (event.button !== 0) return
+
     const cellElement = event.target.closest('.editor-table-cell')
     const tableElement = event.target.closest('.editor-table')
 
@@ -249,15 +250,9 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
 
     clearTableSelection()
 
-    // Double-click detection
-    const now = Date.now()
-    const isDoubleClick = lastClickedCell === cellElement && (now - lastClickTime) < 300
-    
-    setLastClickTime(now)
-    setLastClickedCell(cellElement)
-
-    // Eğer double-click ise, seçimi temizle ve edit moduna geç
-    if (isDoubleClick) {
+    // A regular click must remain available to Lexical so the caret can be
+    // placed immediately. Cell range selection is an explicit modifier gesture.
+    if (!isCellSelectionGesture(event)) {
       clearCellSelection()
       return
     }
@@ -268,13 +263,12 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
     setCurrentTable(tableElement)
     setIsSelecting(true)
     setSelectionStart(coords)
-    setDragCurrent(coords)
 
     // Start with single cell selection
     updateSelection(coords, coords, tableElement)
 
     event.preventDefault()
-  }, [getCellCoordinates, updateSelection, clearCellSelection, clearTableSelection, clearAllSelections, selectTable, lastClickTime, lastClickedCell])
+  }, [getCellCoordinates, updateSelection, clearCellSelection, clearTableSelection, clearAllSelections, selectTable])
 
   const handleMouseEnter = useCallback((event) => {
     if (!isSelecting || !selectionStart || !currentTable) return
@@ -289,7 +283,6 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
     const coords = getCellCoordinates(cellElement)
     if (!coords) return
 
-    setDragCurrent(coords)
     updateSelection(selectionStart, coords, currentTable)
   }, [isSelecting, selectionStart, getCellCoordinates, updateSelection, currentTable])
 
@@ -329,6 +322,22 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
     }
   }, [editor, handleMouseDown, handleMouseEnter, handleMouseUp, clearAllSelections])
 
+  useEffect(() => {
+    const handleInteractionChange = (event) => {
+      if (event?.detail?.active) {
+        clearAllSelections()
+      }
+    }
+
+    window.addEventListener(EDITOR_INTERACTION_CHANGE_EVENT, handleInteractionChange)
+    window.addEventListener(TABLE_SELECTION_CLEAR_EVENT, clearAllSelections)
+
+    return () => {
+      window.removeEventListener(EDITOR_INTERACTION_CHANGE_EVENT, handleInteractionChange)
+      window.removeEventListener(TABLE_SELECTION_CLEAR_EVENT, clearAllSelections)
+    }
+  }, [clearAllSelections])
+
   useEffect(() => {
     if (!selectedTableKey) return
 
@@ -526,7 +535,10 @@ function TableSelectionPlugin({ anchorElem: _anchorElem = document.body }) {
             visibility: selectionToolbarPosition ? 'visible' : 'hidden',
           }}
         >
-          <div className="selection-count">
+          <div
+            className="selection-count"
+            title="Çoklu hücre seçimi için ⌘/Ctrl/Alt tuşuyla sürükleyin"
+          >
             {selectedCells.size} hücre seçili
           </div>
           <div className="selection-actions">
diff --git a/apps/admin/src/pages/contents/plugins/tableNavigation.js b/apps/admin/src/pages/contents/plugins/tableNavigation.js
new file mode 100644
index 0000000..e7b6511
--- /dev/null
+++ b/apps/admin/src/pages/contents/plugins/tableNavigation.js
@@ -0,0 +1,49 @@
+import { $createParagraphNode } from 'lexical'
+import {
+  $createTableCellNode,
+  $createTableRowNode,
+  $isTableCellNode,
+  $isTableRowNode,
+  $isTableNode,
+} from '../nodes/TableNode.jsx'
+
+export function $getAdjacentTableCell(tableCellNode, backwards = false) {
+  if (!$isTableCellNode(tableCellNode)) return null
+
+  const tableRowNode = tableCellNode.getParent()
+  if (!$isTableRowNode(tableRowNode)) return null
+
+  const tableNode = tableRowNode.getParent()
+  if (!$isTableNode(tableNode)) return null
+
+  const rowCells = tableRowNode.getChildren()
+  const rows = tableNode.getChildren()
+  const cellIndex = rowCells.indexOf(tableCellNode)
+  const rowIndex = rows.indexOf(tableRowNode)
+
+  if (cellIndex === -1 || rowIndex === -1) return null
+
+  if (backwards) {
+    if (cellIndex > 0) return rowCells[cellIndex - 1]
+    if (rowIndex === 0) return null
+
+    const previousRow = rows[rowIndex - 1]
+    const previousRowCells = previousRow.getChildren()
+    return previousRowCells[previousRowCells.length - 1] || null
+  }
+
+  if (cellIndex < rowCells.length - 1) return rowCells[cellIndex + 1]
+  if (rowIndex < rows.length - 1) return rows[rowIndex + 1].getFirstChild()
+
+  // Google Docs davranışı: son hücrede Tab yeni bir satır açar.
+  const newRow = $createTableRowNode()
+
+  for (let index = 0; index < rowCells.length; index += 1) {
+    const cell = $createTableCellNode()
+    cell.append($createParagraphNode())
+    newRow.append(cell)
+  }
+
+  tableNode.append(newRow)
+  return newRow.getFirstChild()
+}
diff --git a/apps/admin/src/pages/contents/plugins/tableSelectionGesture.js b/apps/admin/src/pages/contents/plugins/tableSelectionGesture.js
new file mode 100644
index 0000000..d963999
--- /dev/null
+++ b/apps/admin/src/pages/contents/plugins/tableSelectionGesture.js
@@ -0,0 +1,4 @@
+export function isCellSelectionGesture(event) {
+  if (!event || event.button !== 0) return false
+  return Boolean(event.metaKey || event.ctrlKey || event.altKey)
+}
diff --git a/apps/admin/src/pages/contents/plugins/tableSelectionGesture.test.js b/apps/admin/src/pages/contents/plugins/tableSelectionGesture.test.js
new file mode 100644
index 0000000..83659aa
--- /dev/null
+++ b/apps/admin/src/pages/contents/plugins/tableSelectionGesture.test.js
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { isCellSelectionGesture } from './tableSelectionGesture.js'
+
+describe('isCellSelectionGesture', () => {
+  it('keeps a regular primary click available for caret placement', () => {
+    expect(isCellSelectionGesture({ button: 0 })).toBe(false)
+    expect(isCellSelectionGesture({ button: 0, shiftKey: true })).toBe(false)
+  })
+
+  it.each(['metaKey', 'ctrlKey', 'altKey'])('starts cell selection with %s', (modifier) => {
+    expect(isCellSelectionGesture({ button: 0, [modifier]: true })).toBe(true)
+  })
+
+  it('does not intercept secondary clicks', () => {
+    expect(isCellSelectionGesture({ button: 2, ctrlKey: true })).toBe(false)
+  })
+})
diff --git a/apps/admin/src/pages/contents/utils/editorInteractionEvents.js b/apps/admin/src/pages/contents/utils/editorInteractionEvents.js
new file mode 100644
index 0000000..6841cbd
--- /dev/null
+++ b/apps/admin/src/pages/contents/utils/editorInteractionEvents.js
@@ -0,0 +1,15 @@
+export const EDITOR_INTERACTION_CHANGE_EVENT = 'content-editor-interaction-change'
+export const TABLE_SELECTION_CLEAR_EVENT = 'content-editor-table-selection-clear'
+
+export function dispatchEditorInteractionChange(mode, active) {
+  if (typeof window === 'undefined') return
+
+  window.dispatchEvent(new CustomEvent(EDITOR_INTERACTION_CHANGE_EVENT, {
+    detail: { mode, active },
+  }))
+}
+
+export function requestTableSelectionClear() {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent(TABLE_SELECTION_CLEAR_EVENT))
+}
diff --git a/apps/api/package.json b/apps/api/package.json
index 2b8b89d..33eb8ff 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contexthub/api",
-  "version": "0.1.15",
+  "version": "0.1.19",
   "private": true,
   "description": "Fastify back‑end service for contextHub",
   "main": "src/server.js",
diff --git a/apps/api/src/lib/localRedis.js b/apps/api/src/lib/localRedis.js
index 863a8ed..e8616f9 100644
--- a/apps/api/src/lib/localRedis.js
+++ b/apps/api/src/lib/localRedis.js
@@ -4,6 +4,7 @@ const Redis = require('redis');
 
 const DEFAULT_USAGE_KEY_TTL_SECONDS = 45 * 24 * 60 * 60;
 const DEFAULT_LIMIT_KEY_TTL_SECONDS = 40 * 24 * 60 * 60;
+const API_TOKEN_USAGE_KEY = 'usage:api-tokens:last-used';
 
 function getCurrentMonthKey(date = new Date()) {
   return date.toISOString().slice(0, 7);
@@ -103,6 +104,10 @@ class LocalRedisClient extends EventEmitter {
     return `usage:requests:${tenantId}:${periodKey}`;
   }
 
+  getApiTokenUsageKey() {
+    return API_TOKEN_USAGE_KEY;
+  }
+
   async cacheTenantLimits(tenantId, limits, ttl = 86400) {
     if (!this.isEnabled()) {
       return false;
@@ -304,7 +309,7 @@ class LocalRedisClient extends EventEmitter {
     }
   }
 
-  async incrementUsageCounter(tenantId, periodKey, ttl = DEFAULT_USAGE_KEY_TTL_SECONDS) {
+  async incrementUsageCounter(tenantId, periodKey, ttl = DEFAULT_USAGE_KEY_TTL_SECONDS, tokenId = null) {
     if (!this.isEnabled()) {
       return null;
     }
@@ -312,14 +317,17 @@ class LocalRedisClient extends EventEmitter {
     try {
       const key = this.getUsageCounterKey(tenantId, periodKey);
       const now = String(Date.now());
-      const replies = await this.client.multi()
+      const transaction = this.client.multi()
         .hIncrBy(key, 'count', 1)
         .hSet(key, {
           periodKey,
           updatedAt: now,
         })
-        .expire(key, ttl)
-        .exec();
+        .expire(key, ttl);
+      if (tokenId) {
+        transaction.zAdd(API_TOKEN_USAGE_KEY, { score: Number(now), value: String(tokenId) }, { comparison: 'GT' });
+      }
+      const replies = await transaction.exec();
 
       return parseInteger(Array.isArray(replies) ? replies[0] : 0);
     } catch (error) {
diff --git a/apps/api/src/middleware/apiLogger.js b/apps/api/src/middleware/apiLogger.js
index 98cc697..a775c00 100644
--- a/apps/api/src/middleware/apiLogger.js
+++ b/apps/api/src/middleware/apiLogger.js
@@ -1,5 +1,25 @@
 const localRedisClient = require('../lib/localRedis');
 const { getFourHourPeriod, USAGE_KEY_TTL_SECONDS } = require('../services/apiUsageService');
+const { ApiToken } = require('@contexthub/common');
+
+const fallbackLastUsed = new Map();
+const FALLBACK_INTERVAL_MS = 5 * 60 * 1000;
+
+function recordWithoutRedis(tokenId, now) {
+  if (!tokenId) return;
+  const lastAttempt = fallbackLastUsed.get(tokenId) || 0;
+  if (now.getTime() - lastAttempt < FALLBACK_INTERVAL_MS) return;
+  fallbackLastUsed.set(tokenId, now.getTime());
+  if (fallbackLastUsed.size > 10000) {
+    for (const [id, timestamp] of fallbackLastUsed) {
+      if (now.getTime() - timestamp >= FALLBACK_INTERVAL_MS) fallbackLastUsed.delete(id);
+    }
+  }
+  ApiToken.updateOne({ _id: tokenId }, { $max: { lastUsedAt: now } }).catch((error) => {
+    fallbackLastUsed.delete(tokenId);
+    console.error('[ApiLogger] Failed to record token use without Redis:', error.message);
+  });
+}
 
 async function apiLogger(request) {
   const skipPaths = ['/health', '/favicon.ico', '/robots.txt'];
@@ -11,21 +31,26 @@ async function apiLogger(request) {
     return;
   }
 
-  if (!localRedisClient.isEnabled()) {
-    return;
-  }
-
   try {
     const tenantId = request.tenantId || request.user?.tenantId || null;
     if (!tenantId) {
       return;
     }
 
-    const { periodKey } = getFourHourPeriod(new Date());
+    const now = new Date();
+    const { periodKey } = getFourHourPeriod(now);
+    const tokenId = request.apiTokenUsageAuthorized ? request.apiToken?._id?.toString?.() : null;
 
     setImmediate(() => {
-      localRedisClient.incrementUsageCounter(tenantId, periodKey, USAGE_KEY_TTL_SECONDS).catch((error) => {
+      if (!localRedisClient.isEnabled()) {
+        recordWithoutRedis(tokenId, now);
+        return;
+      }
+      localRedisClient.incrementUsageCounter(tenantId, periodKey, USAGE_KEY_TTL_SECONDS, tokenId).then((count) => {
+        if (count === null) recordWithoutRedis(tokenId, now);
+      }).catch((error) => {
         console.error('[ApiLogger] Failed to increment usage counter:', error.message);
+        recordWithoutRedis(tokenId, now);
       });
     });
   } catch (error) {
diff --git a/apps/api/src/middleware/apiTokenUsage.test.mjs b/apps/api/src/middleware/apiTokenUsage.test.mjs
new file mode 100644
index 0000000..3c7e136
--- /dev/null
+++ b/apps/api/src/middleware/apiTokenUsage.test.mjs
@@ -0,0 +1,129 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const { ApiToken, Tenant } = require('@contexthub/common');
+const localRedisClient = require('../lib/localRedis');
+const roleService = require('../services/roleService');
+const { authenticate } = require('./auth');
+const apiLogger = require('./apiLogger');
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('API token request usage', () => {
+  it('adds token time to the existing tenant counter transaction', async () => {
+    const previousClient = localRedisClient.client;
+    const transaction = {
+      hIncrBy: vi.fn().mockReturnThis(),
+      hSet: vi.fn().mockReturnThis(),
+      expire: vi.fn().mockReturnThis(),
+      zAdd: vi.fn().mockReturnThis(),
+      exec: vi.fn().mockResolvedValue([1, 'OK', 1, 1]),
+    };
+    localRedisClient.client = { multi: vi.fn().mockReturnValue(transaction) };
+    vi.spyOn(localRedisClient, 'isEnabled').mockReturnValue(true);
+    try {
+      await expect(localRedisClient.incrementUsageCounter('tenant-1', 'period-1', 60, 'token-1')).resolves.toBe(1);
+      expect(localRedisClient.client.multi).toHaveBeenCalledOnce();
+      expect(transaction.zAdd).toHaveBeenCalledWith(
+        localRedisClient.getApiTokenUsageKey(),
+        { score: expect.any(Number), value: 'token-1' },
+        { comparison: 'GT' }
+      );
+    } finally {
+      localRedisClient.client = previousClient;
+    }
+  });
+
+  it('authenticates a GET without saving its token and records use after the response', async () => {
+    const save = vi.fn();
+    const token = {
+      _id: { toString: () => 'token-1' },
+      tenantId: { toString: () => 'tenant-1' },
+      name: 'reader',
+      scopes: ['read'],
+      role: 'viewer',
+      lastAuditAt: new Date(),
+      save,
+    };
+    vi.spyOn(ApiToken, 'findOne').mockResolvedValue(token);
+    vi.spyOn(Tenant, 'findById').mockReturnValue({
+      select: () => ({ lean: () => Promise.resolve({ status: 'active' }) }),
+    });
+    vi.spyOn(roleService, 'resolveRole').mockResolvedValue(null);
+    vi.spyOn(localRedisClient, 'isEnabled').mockReturnValue(true);
+    vi.spyOn(localRedisClient, 'getRequestLimitFlag').mockResolvedValue(null);
+    const increment = vi.spyOn(localRedisClient, 'incrementUsageCounter').mockResolvedValue(1);
+    const reply = { code: vi.fn().mockReturnThis(), send: vi.fn().mockReturnThis() };
+    const request = {
+      headers: { authorization: 'Bearer ctx_test' },
+      url: '/api/contents',
+      method: 'GET',
+      query: {},
+    };
+
+    await authenticate(request, reply);
+    expect(save).not.toHaveBeenCalled();
+    expect(request.apiTokenUsageAuthorized).toBe(true);
+    expect(increment).not.toHaveBeenCalled();
+
+    await apiLogger(request);
+    await new Promise((resolve) => setImmediate(resolve));
+    expect(increment).toHaveBeenCalledWith('tenant-1', expect.any(String), expect.any(Number), 'token-1');
+  });
+
+  it('uses a throttled background MongoDB update when Redis is unavailable', async () => {
+    vi.spyOn(localRedisClient, 'isEnabled').mockReturnValue(false);
+    const update = vi.spyOn(ApiToken, 'updateOne').mockResolvedValue({ modifiedCount: 1 });
+    const request = {
+      url: '/api/contents',
+      tenantId: 'tenant-1',
+      apiTokenUsageAuthorized: true,
+      apiToken: { _id: { toString: () => 'token-2' } },
+    };
+
+    await apiLogger(request);
+    expect(update).not.toHaveBeenCalled();
+    await new Promise((resolve) => setImmediate(resolve));
+    await apiLogger(request);
+    await new Promise((resolve) => setImmediate(resolve));
+
+    expect(update).toHaveBeenCalledOnce();
+    expect(update).toHaveBeenCalledWith({ _id: 'token-2' }, {
+      $max: { lastUsedAt: expect.any(Date) },
+    });
+  });
+
+  it('claims an audit interval with a conditional background update', async () => {
+    vi.spyOn(ApiToken, 'findOne').mockResolvedValue({
+      _id: 'token-3',
+      tenantId: { toString: () => 'tenant-1' },
+      name: 'reader',
+      scopes: ['read'],
+      role: 'viewer',
+      lastAuditAt: new Date(Date.now() - 16 * 60 * 1000),
+    });
+    vi.spyOn(Tenant, 'findById').mockReturnValue({
+      select: () => ({ lean: () => Promise.resolve({ status: 'active' }) }),
+    });
+    vi.spyOn(roleService, 'resolveRole').mockResolvedValue(null);
+    vi.spyOn(localRedisClient, 'isEnabled').mockReturnValue(false);
+    const update = vi.spyOn(ApiToken, 'updateOne').mockResolvedValue({ modifiedCount: 0 });
+    const reply = { code: vi.fn().mockReturnThis(), send: vi.fn().mockReturnThis() };
+
+    await authenticate({
+      headers: { authorization: 'Bearer ctx_test' },
+      url: '/api/contents',
+      method: 'GET',
+      query: {},
+    }, reply);
+    expect(update).not.toHaveBeenCalled();
+    await new Promise((resolve) => setImmediate(resolve));
+
+    expect(update).toHaveBeenCalledWith(expect.objectContaining({
+      _id: 'token-3',
+      revokedAt: null,
+      $or: expect.any(Array),
+    }), { $set: { lastAuditAt: expect.any(Date) } });
+  });
+});
diff --git a/apps/api/src/middleware/auth.js b/apps/api/src/middleware/auth.js
index 9522ac0..7032d39 100644
--- a/apps/api/src/middleware/auth.js
+++ b/apps/api/src/middleware/auth.js
@@ -177,16 +177,12 @@ async function authenticateApiToken(request, reply) {
       });
     }
 
-    // Last used at'i güncelle. Audit kaydını yüksek trafikte şişirmemek için aynı
-    // tokenın kullanımını en fazla 15 dakikada bir güvenlik günlüğüne yaz.
+    // Usage timestamps are recorded after the response and flushed from Redis
+    // in batches. Claim audit intervals independently so concurrent requests
+    // cannot all create the same security event.
     const now = new Date();
     const shouldAuditUsage = !apiToken.lastAuditAt
       || now.getTime() - new Date(apiToken.lastAuditAt).getTime() >= 15 * 60 * 1000;
-    apiToken.lastUsedAt = now;
-    if (shouldAuditUsage) {
-      apiToken.lastAuditAt = now;
-    }
-    await apiToken.save();
 
     // Request'e tenant ve token bilgilerini ekle
     request.tenantId = apiToken.tenantId.toString();
@@ -253,21 +249,36 @@ async function authenticateApiToken(request, reply) {
 
     if (!await enforceBillingWriteAccess(request, reply)) return;
 
+    request.apiTokenUsageAuthorized = true;
     if (shouldAuditUsage) {
-      await logSecurityEvent({
-        action: 'api_token.used',
-        description: `API token kullanıldı: ${apiToken.name}`,
-        userId: apiToken.createdBy || null,
-        tenantId: apiToken.tenantId,
-        metadata: {
-          tokenId: apiToken._id.toString(),
-          name: apiToken.name,
-          scopes: effectiveScopes,
-          role: tokenRole,
-          method: request.method,
-          path: request.url,
-        },
-        request,
+      setImmediate(() => {
+        ApiToken.updateOne({
+          _id: apiToken._id,
+          revokedAt: null,
+          $or: [
+            { lastAuditAt: null },
+            { lastAuditAt: { $lte: new Date(now.getTime() - 15 * 60 * 1000) } },
+          ],
+        }, { $set: { lastAuditAt: now } }).then((result) => {
+          if (!result.modifiedCount) return;
+          return logSecurityEvent({
+            action: 'api_token.used',
+            description: `API token kullanıldı: ${apiToken.name}`,
+            userId: apiToken.createdBy || null,
+            tenantId: apiToken.tenantId,
+            metadata: {
+              tokenId: apiToken._id.toString(),
+              name: apiToken.name,
+              scopes: effectiveScopes,
+              role: tokenRole,
+              method: request.method,
+              path: request.url,
+            },
+            request,
+          });
+        }).catch((error) => {
+          request.log?.error?.({ err: error }, 'Failed to audit API token use');
+        });
       });
     }
 
diff --git a/apps/api/src/routes/billing.js b/apps/api/src/routes/billing.js
index a5d2311..f0c4303 100644
--- a/apps/api/src/routes/billing.js
+++ b/apps/api/src/routes/billing.js
@@ -4,7 +4,7 @@ const billingService = require('../services/billing/billingService');
 
 function errorStatus(error) {
   if (error.code === 'AccountMigrationRequired') return 409;
-  if (['CheckoutNotConfigured', 'BillingDisabled', 'BillingProviderUnavailable', 'BillingPiiNotConfigured'].includes(error.code)) return 503;
+  if (['CheckoutNotConfigured', 'BillingDisabled', 'BillingProviderUnavailable', 'BillingProviderNetworkUnavailable', 'BillingPiiNotConfigured'].includes(error.code)) return 503;
   if (['PortalRequired', 'PortalUnavailable', 'BillingJurisdictionLocked'].includes(error.code)) return 409;
   if (['BillingProfileIncomplete', 'CommercialAgreementRequired', 'InvalidBillingProfile', 'PlanPriceUnavailable'].includes(error.code)) return 422;
   return error.statusCode || 400;
@@ -19,6 +19,9 @@ async function billingRoutes(fastify) {
     try {
       return reply.send(await billingService.getOverview(request.tenantId, {
         actorEmail: request.user.email,
+        previewCountry: request.query?.previewCountry === 'TR' ? 'TR' : request.query?.previewCountry === 'US' ? 'US' : '',
+        previewPlanSlug: ['pro', 'promax'].includes(request.query?.previewPlanSlug) ? request.query.previewPlanSlug : '',
+        previewInterval: request.query?.previewInterval === 'year' ? 'year' : 'month',
       }));
     } catch (error) {
       request.log.error({ err: error }, 'Billing overview failed');
diff --git a/apps/api/src/routes/publicForms.js b/apps/api/src/routes/publicForms.js
index 9049355..f7ef9d0 100644
--- a/apps/api/src/routes/publicForms.js
+++ b/apps/api/src/routes/publicForms.js
@@ -354,7 +354,7 @@ async function validateApiKey(request, reply) {
 
   // Find API token in database
   const { ApiToken } = require('@contexthub/common');
-  const apiToken = await ApiToken.findOne({ hash });
+  const apiToken = await ApiToken.findOne({ hash, revokedAt: null });
 
   if (!apiToken) {
     return reply.code(401).send({
@@ -383,10 +383,6 @@ async function validateApiKey(request, reply) {
     });
   }
 
-  // Update last used timestamp
-  apiToken.lastUsedAt = new Date();
-  await apiToken.save();
-
   // Set tenant ID from API token
   request.tenantId = apiToken.tenantId.toString();
   request.apiToken = apiToken;
@@ -394,6 +390,7 @@ async function validateApiKey(request, reply) {
   if (await checkRequestLimit(request, reply)) {
     return;
   }
+  request.apiTokenUsageAuthorized = true;
 }
 
 /**
diff --git a/apps/api/src/server.js b/apps/api/src/server.js
index a22ace9..36ab9d0 100644
--- a/apps/api/src/server.js
+++ b/apps/api/src/server.js
@@ -427,6 +427,16 @@ async function start() {
 
   await localRedisClient.initialize();
 
+  // Keep token inventory timestamps close to current without adding a MongoDB
+  // write to API-token requests. Redis/Mongo failures leave observations queued.
+  const { syncApiTokenUsage } = require('./services/apiTokenUsageSyncService');
+  const tokenUsageTimer = setInterval(() => {
+    syncApiTokenUsage().catch((error) => {
+      console.error('[Server] API token usage sync failed:', error.message);
+    });
+  }, 5 * 60 * 1000);
+  tokenUsageTimer.unref();
+
   if (require('./lib/billingConfig').isAccountBillingEnabled()) {
     const billingLifecycleService = require('./services/billing/billingLifecycleService');
     const billingWebhookService = require('./services/billing/billingWebhookService');
diff --git a/apps/api/src/services/apiTokenUsageSyncService.js b/apps/api/src/services/apiTokenUsageSyncService.js
new file mode 100644
index 0000000..239dd32
--- /dev/null
+++ b/apps/api/src/services/apiTokenUsageSyncService.js
@@ -0,0 +1,56 @@
+const { ApiToken } = require('@contexthub/common');
+const localRedisClient = require('../lib/localRedis');
+
+const LOCK_KEY = 'usage:api-tokens:sync-lock';
+const BATCH_SIZE = 500;
+const MAX_BATCHES = 20;
+
+// A newer observation must survive a sync that was already reading the old score.
+const REMOVE_FLUSHED_SCRIPT = `
+for index = 1, #ARGV, 2 do
+  local tokenId = ARGV[index]
+  local observedScore = ARGV[index + 1]
+  if redis.call('ZSCORE', KEYS[1], tokenId) == observedScore then
+    redis.call('ZREM', KEYS[1], tokenId)
+  end
+end
+return 1
+`;
+
+async function syncApiTokenUsage(now = new Date()) {
+  if (!localRedisClient.isEnabled()) return { skipped: 'redis_unavailable', flushed: 0 };
+
+  const lockToken = await localRedisClient.acquireLock(LOCK_KEY, 15 * 60);
+  if (!lockToken) return { skipped: 'sync_in_progress', flushed: 0 };
+
+  let flushed = 0;
+  try {
+    const client = localRedisClient.getClient();
+    const usageKey = localRedisClient.getApiTokenUsageKey();
+    for (let batch = 0; batch < MAX_BATCHES; batch++) {
+      const entries = await client.zRangeByScoreWithScores(usageKey, '-inf', now.getTime(), {
+        LIMIT: { offset: 0, count: BATCH_SIZE },
+      });
+      if (!entries.length) break;
+
+      await ApiToken.bulkWrite(entries.map(({ value, score }) => ({
+        updateOne: {
+          filter: { _id: value },
+          update: { $max: { lastUsedAt: new Date(score) } },
+        },
+      })), { ordered: false });
+
+      await client.eval(REMOVE_FLUSHED_SCRIPT, {
+        keys: [usageKey],
+        arguments: entries.flatMap(({ value, score }) => [value, String(score)]),
+      });
+      flushed += entries.length;
+      if (entries.length < BATCH_SIZE) break;
+    }
+    return { flushed };
+  } finally {
+    await localRedisClient.releaseLock(LOCK_KEY, lockToken);
+  }
+}
+
+module.exports = { syncApiTokenUsage };
diff --git a/apps/api/src/services/apiTokenUsageSyncService.test.mjs b/apps/api/src/services/apiTokenUsageSyncService.test.mjs
new file mode 100644
index 0000000..b6718a3
--- /dev/null
+++ b/apps/api/src/services/apiTokenUsageSyncService.test.mjs
@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const { ApiToken } = require('@contexthub/common');
+const localRedisClient = require('../lib/localRedis');
+const service = require('./apiTokenUsageSyncService');
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('API token usage sync', () => {
+  function mockRedis(entries) {
+    const client = {
+      zRangeByScoreWithScores: vi.fn().mockResolvedValue(entries),
+      eval: vi.fn().mockResolvedValue(1),
+    };
+    vi.spyOn(localRedisClient, 'isEnabled').mockReturnValue(true);
+    vi.spyOn(localRedisClient, 'acquireLock').mockResolvedValue('lock-token');
+    vi.spyOn(localRedisClient, 'releaseLock').mockResolvedValue(true);
+    vi.spyOn(localRedisClient, 'getClient').mockReturnValue(client);
+    return client;
+  }
+
+  it('writes the maximum observed time and removes only matching Redis scores', async () => {
+    const score = Date.parse('2026-09-15T10:00:00.000Z');
+    const client = mockRedis([{ value: 'token-1', score }]);
+    const write = vi.spyOn(ApiToken, 'bulkWrite').mockResolvedValue({});
+
+    await expect(service.syncApiTokenUsage(new Date(score + 1))).resolves.toEqual({ flushed: 1 });
+
+    expect(write).toHaveBeenCalledWith([{
+      updateOne: {
+        filter: { _id: 'token-1' },
+        update: { $max: { lastUsedAt: new Date(score) } },
+      },
+    }], { ordered: false });
+    expect(client.eval).toHaveBeenCalledWith(expect.stringContaining("redis.call('ZSCORE'"), {
+      keys: ['usage:api-tokens:last-used'],
+      arguments: ['token-1', String(score)],
+    });
+    expect(localRedisClient.releaseLock).toHaveBeenCalledWith('usage:api-tokens:sync-lock', 'lock-token');
+  });
+
+  it('keeps the Redis observation when MongoDB fails', async () => {
+    const client = mockRedis([{ value: 'token-1', score: Date.now() }]);
+    vi.spyOn(ApiToken, 'bulkWrite').mockRejectedValue(new Error('database unavailable'));
+
+    await expect(service.syncApiTokenUsage()).rejects.toThrow('database unavailable');
+
+    expect(client.eval).not.toHaveBeenCalled();
+    expect(localRedisClient.releaseLock).toHaveBeenCalled();
+  });
+});
diff --git a/apps/api/src/services/billing/billingCostSummary.test.mjs b/apps/api/src/services/billing/billingCostSummary.test.mjs
index 286162f..6e0a8f1 100644
--- a/apps/api/src/services/billing/billingCostSummary.test.mjs
+++ b/apps/api/src/services/billing/billingCostSummary.test.mjs
@@ -152,6 +152,28 @@ describe('owner-visible billing cost summary', () => {
     expect(result.prices[0]).toMatchObject({ id: 'iyzico-id', currency: 'TRY', checkoutReady: true, catalogOnly: false });
   });
 
+  it('previews a Türkiye catalogue price after TR is selected in the unsaved form', () => {
+    const plan = { _id: 'plan-id', slug: 'pro', name: 'Pro', price: 12 };
+    const result = serializeCatalogPlan(plan, [
+      { _id: 'paddle-id', provider: 'paddle', interval: 'month', currency: 'USD', amountMinor: 1200, planId: plan },
+      { _id: 'iyzico-id', provider: 'iyzico', interval: 'month', currency: 'TRY', amountMinor: 49900, planId: plan },
+    ], { displayProvider: 'iyzico' });
+
+    expect(result.prices[0]).toMatchObject({ id: null, currency: 'TRY', amountMinor: 49900, checkoutReady: false, catalogOnly: true });
+    expect(buildChargeSummary({ plan, estimatedPrice: result.prices[0] }).subscription)
+      .toMatchObject({ amountMinor: 49900, currency: 'TRY', interval: 'month', isEstimated: true });
+  });
+
+  it('keeps an existing subscription amount when a catalogue preview is present', () => {
+    const summary = buildChargeSummary({
+      plan: { slug: 'pro', price: 12 },
+      subscription: { amountMinor: 1200, currency: 'USD', interval: 'year' },
+      estimatedPrice: { amountMinor: 49900, currency: 'TRY', interval: 'month' },
+    });
+
+    expect(summary.subscription).toMatchObject({ amountMinor: 1200, currency: 'USD', interval: 'year', isEstimated: false });
+  });
+
   it('omits provider and internal identifiers from owner-visible account and subscription data', () => {
     const billingAccount = serializeBillingAccount({
       provider: 'manual',
diff --git a/apps/api/src/services/billing/billingService.js b/apps/api/src/services/billing/billingService.js
index 13b4130..b696bfc 100644
--- a/apps/api/src/services/billing/billingService.js
+++ b/apps/api/src/services/billing/billingService.js
@@ -158,14 +158,14 @@ function serializeSubscription(subscription) {
   };
 }
 
-function buildChargeSummary({ plan, subscription, invoices = [], storageBytes = 0, requestCount = 0 }) {
+function buildChargeSummary({ plan, subscription, estimatedPrice = null, invoices = [], storageBytes = 0, requestCount = 0 }) {
   const latestInvoice = invoices[0] ? serializeInvoice(invoices[0]) : null;
 
   return {
     subscription: {
-      amountMinor: subscription ? subscription.amountMinor : toMinorUnits(plan?.price),
-      currency: subscription?.currency || CATALOG_CURRENCY,
-      interval: subscription?.interval || 'month',
+      amountMinor: subscription ? subscription.amountMinor : (estimatedPrice?.amountMinor ?? toMinorUnits(plan?.price)),
+      currency: subscription?.currency || estimatedPrice?.currency || CATALOG_CURRENCY,
+      interval: subscription?.interval || estimatedPrice?.interval || 'month',
       isEstimated: !subscription,
       currentPeriodStart: subscription?.currentPeriodStart || null,
       currentPeriodEnd: subscription?.currentPeriodEnd || null,
@@ -244,6 +244,7 @@ function serializePrice(price) {
 
 function serializeCatalogPlan(plan, prices = [], {
   selectedProvider = null,
+  displayProvider = selectedProvider,
   providerEnabled = false,
   reviewCheckoutFallback = false,
 } = {}) {
@@ -254,21 +255,24 @@ function serializeCatalogPlan(plan, prices = [], {
     const checkoutPrice = selectedProvider
       ? intervalPrices.find((price) => price.provider === selectedProvider)
       : null;
-    const displayPrice = checkoutPrice
+    const displayPrice = checkoutPrice && selectedProvider === displayProvider ? checkoutPrice : null;
+    const visiblePrice = displayPrice
+      || intervalPrices.find((price) => price.provider === displayProvider)
       || intervalPrices.find((price) => price.provider === 'paddle')
       || intervalPrices[0];
-    if (!displayPrice) return null;
+    if (!visiblePrice) return null;
     return {
       id: checkoutPrice ? String(checkoutPrice._id) : null,
       interval,
-      currency: displayPrice.currency,
-      amountMinor: displayPrice.amountMinor,
+      currency: visiblePrice.currency,
+      amountMinor: visiblePrice.amountMinor,
       checkoutReady: Boolean(
         providerEnabled
         && checkoutPrice
+        && visiblePrice === checkoutPrice
         && (checkoutPrice.externalPriceId || (selectedProvider === 'iyzico' && reviewCheckoutFallback))
       ),
-      catalogOnly: !checkoutPrice || !providerEnabled,
+      catalogOnly: !checkoutPrice || !providerEnabled || visiblePrice !== checkoutPrice,
     };
   }).filter(Boolean);
 
@@ -286,12 +290,13 @@ function serializeCatalogPlan(plan, prices = [], {
   };
 }
 
-async function getOverview(tenantId, { actorEmail = '' } = {}) {
+async function getOverview(tenantId, { actorEmail = '', previewCountry = '', previewPlanSlug = '', previewInterval = 'month' } = {}) {
   const { tenant, account } = await getAccountForTenant(tenantId);
   const effectivePlan = await tenantSubscriptionService.getEffectivePlan(tenant);
   const billingAccount = await BillingAccount.findOne({ accountId: account._id }).select('+taxId').lean();
   const profileValidation = validateBillingProfile(billingAccount || {});
   const selectedProvider = billingAccount?.country ? resolveBillingProvider(billingAccount.country) : null;
+  const displayProvider = previewCountry ? resolveBillingProvider(previewCountry) : selectedProvider;
   const providerEnabled = selectedProvider
     ? isBillingProviderEnabled(selectedProvider) && isBillingCheckoutEnabledForTenant(tenant._id)
     : false;
@@ -334,6 +339,15 @@ async function getOverview(tenantId, { actorEmail = '' } = {}) {
   };
 
   const agreementAccepted = hasCurrentServiceAgreement(billingAccount);
+  const plans = catalogPlans.map((plan) => serializeCatalogPlan(plan, catalogPrices, {
+    selectedProvider,
+    displayProvider,
+    providerEnabled,
+    reviewCheckoutFallback,
+  }));
+  const estimatedPlanSlug = tenant.status === 'pending_payment' ? tenant.requestedPlanSlug : previewPlanSlug;
+  const estimatedPrice = plans.find((plan) => plan.slug === estimatedPlanSlug)?.prices
+    ?.find((price) => price.interval === previewInterval) || null;
   return {
     tenant: {
       id: String(tenant._id),
@@ -365,11 +379,7 @@ async function getOverview(tenantId, { actorEmail = '' } = {}) {
       jurisdictionLocked: Boolean(subscription && ['trialing', 'active', 'past_due', 'paused'].includes(subscription.status)),
     },
     subscription: serializeSubscription(subscription),
-    plans: catalogPlans.map((plan) => serializeCatalogPlan(plan, catalogPrices, {
-      selectedProvider,
-      providerEnabled,
-      reviewCheckoutFallback,
-    })),
+    plans,
     prices: catalogPrices
       .filter((price) => selectedProvider && price.provider === selectedProvider)
       .map(serializePrice),
@@ -388,6 +398,7 @@ async function getOverview(tenantId, { actorEmail = '' } = {}) {
     charges: buildChargeSummary({
       plan: effectivePlan,
       subscription,
+      estimatedPrice,
       invoices,
       storageBytes,
       requestCount: monthlyRequests,
diff --git a/apps/api/src/services/billing/iyzicoNetwork.test.mjs b/apps/api/src/services/billing/iyzicoNetwork.test.mjs
new file mode 100644
index 0000000..9393293
--- /dev/null
+++ b/apps/api/src/services/billing/iyzicoNetwork.test.mjs
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const iyzicoProvider = await import("./iyzicoProvider.js");
+const originalApiKey = process.env.IYZICO_API_KEY;
+const originalSecretKey = process.env.IYZICO_SECRET_KEY;
+const originalEnvironment = process.env.IYZICO_ENV;
+
+afterEach(() => {
+  if (originalApiKey === undefined) delete process.env.IYZICO_API_KEY;
+  else process.env.IYZICO_API_KEY = originalApiKey;
+  if (originalSecretKey === undefined) delete process.env.IYZICO_SECRET_KEY;
+  else process.env.IYZICO_SECRET_KEY = originalSecretKey;
+  if (originalEnvironment === undefined) delete process.env.IYZICO_ENV;
+  else process.env.IYZICO_ENV = originalEnvironment;
+});
+
+describe("iyzico checkout transport error", () => {
+  it("returns a provider network error without retrying an ambiguous initialize request", async () => {
+    process.env.IYZICO_API_KEY = "test-api-key";
+    process.env.IYZICO_SECRET_KEY = "test-secret-key";
+    process.env.IYZICO_ENV = "live";
+    const cause = Object.assign(new Error("socket hang up"), {
+      code: "ECONNRESET",
+    });
+    const fetchImpl = vi.fn(async () => {
+      throw new TypeError("fetch failed", { cause });
+    });
+
+    await expect(
+      iyzicoProvider.default.iyzicoRequest(
+        "/v2/subscription/checkoutform/initialize",
+        {
+          method: "POST",
+          body: {},
+          fetchImpl,
+        },
+      ),
+    ).rejects.toMatchObject({
+      code: "BillingProviderNetworkUnavailable",
+      statusCode: 503,
+      cause: { cause: { code: "ECONNRESET" } },
+    });
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/api/src/services/billing/iyzicoProvider.js b/apps/api/src/services/billing/iyzicoProvider.js
index 4093719..36bef30 100644
--- a/apps/api/src/services/billing/iyzicoProvider.js
+++ b/apps/api/src/services/billing/iyzicoProvider.js
@@ -20,21 +20,29 @@ function generateAuthorizationHeader(pathname, body, options = {}) {
   return { authorization: `IYZWSv2 ${encoded}`, randomKey };
 }
 
-async function iyzicoRequest(pathname, { method = 'GET', body } = {}) {
+async function iyzicoRequest(pathname, { method = 'GET', body, fetchImpl = fetch } = {}) {
   // iyzico's V2 signature payload uses the URI path without its query string.
   // The query remains on the actual request URL.
   const signaturePath = String(pathname).split('?')[0];
   const { authorization, randomKey } = generateAuthorizationHeader(signaturePath, body);
-  const response = await fetch(`${getBaseUrl()}${pathname}`, {
-    method,
-    headers: {
-      Authorization: authorization,
-      'Content-Type': 'application/json',
-      'x-iyzi-rnd': randomKey,
-      'x-iyzi-client-version': 'contexthub-1',
-    },
-    body: method === 'GET' || body === undefined ? undefined : JSON.stringify(body),
-  });
+  let response;
+  try {
+    response = await fetchImpl(`${getBaseUrl()}${pathname}`, {
+      method,
+      headers: {
+        Authorization: authorization,
+        'Content-Type': 'application/json',
+        'x-iyzi-rnd': randomKey,
+        'x-iyzi-client-version': 'contexthub-1',
+      },
+      body: method === 'GET' || body === undefined ? undefined : JSON.stringify(body),
+    });
+  } catch (cause) {
+    const networkError = new Error('Ödeme sağlayıcısıyla bağlantı kurulamadı. Lütfen daha sonra tekrar deneyin.', { cause });
+    networkError.code = 'BillingProviderNetworkUnavailable';
+    networkError.statusCode = 503;
+    throw networkError;
+  }
   const result = await response.json().catch(() => ({}));
   if (!response.ok || String(result.status || '').toLowerCase() !== 'success') {
     const providerError = new Error(result?.errorMessage || `iyzico request failed (${response.status})`);
diff --git a/apps/api/src/services/quotaAlertService.js b/apps/api/src/services/quotaAlertService.js
index 5e431fc..377e632 100644
--- a/apps/api/src/services/quotaAlertService.js
+++ b/apps/api/src/services/quotaAlertService.js
@@ -1,6 +1,26 @@
-const { Membership, QuotaAlert, User } = require('@contexthub/common');
+const { Membership, QuotaAlert, Tenant, User } = require('@contexthub/common');
 const { sendNotificationEmail } = require('../utils/mailUtils');
 
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function normalizeTenantText(value) {
+  return String(value ?? '')
+    .replace(/[\r\n]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function normalizeSubjectText(value) {
+  return normalizeTenantText(value).replace(/[<>]/g, '');
+}
+
 const COPY = {
   tr: {
     labels: {
@@ -9,7 +29,8 @@ const COPY = {
       storage: 'depolama',
       requests: 'aylık API isteği',
     },
-    subject: (threshold) => `ContextHub kota uyarısı: %${threshold}`,
+    subject: ({ tenantLabel, threshold }) => `ContextHub kota uyarısı: ${tenantLabel} · %${threshold}`,
+    tenant: ({ name, slug }) => `<p><strong>Tenant:</strong> ${name}<br><strong>Slug:</strong> ${slug}</p>`,
     message: ({ label, usage, limit }) => `<p><strong>${label}</strong> kullanımınız ${usage}/${limit} seviyesine ulaştı.</p><p>Kesinti yaşamamak için faturalandırma ekranından paket ve limitlerinizi inceleyin.</p>`,
   },
   en: {
@@ -19,7 +40,8 @@ const COPY = {
       storage: 'storage',
       requests: 'monthly API request',
     },
-    subject: (threshold) => `ContextHub quota alert: ${threshold}%`,
+    subject: ({ tenantLabel, threshold }) => `ContextHub quota alert: ${tenantLabel} · ${threshold}%`,
+    tenant: ({ name, slug }) => `<p><strong>Tenant:</strong> ${name}<br><strong>Slug:</strong> ${slug}</p>`,
     message: ({ label, usage, limit }) => `<p>Your <strong>${label}</strong> usage has reached ${usage}/${limit}.</p><p>Review your plan and limits on the billing page to avoid an interruption.</p>`,
   },
 };
@@ -28,12 +50,17 @@ function normalizeLocale(value) {
   return String(value || '').toLowerCase().startsWith('en') ? 'en' : 'tr';
 }
 
-function buildQuotaEmail(alert, locale = 'tr') {
+function buildQuotaEmail(alert, locale = 'tr', tenant) {
   const copy = COPY[normalizeLocale(locale)];
   const label = copy.labels[alert.metric] || alert.metric;
+  const tenantName = normalizeTenantText(tenant?.name);
+  const tenantSlug = normalizeTenantText(tenant?.slug);
+  if (!tenantName || !tenantSlug) throw new Error('Tenant name and slug are required for quota notifications');
+  const tenantLabel = `${normalizeSubjectText(tenantName)} (${normalizeSubjectText(tenantSlug)})`;
   return {
-    subject: copy.subject(alert.threshold),
-    message: copy.message({ label, usage: alert.usage, limit: alert.limit }),
+    subject: copy.subject({ tenantLabel, threshold: alert.threshold }),
+    message: copy.tenant({ name: escapeHtml(tenantName), slug: escapeHtml(tenantSlug) })
+      + copy.message({ label, usage: alert.usage, limit: alert.limit }),
   };
 }
 
@@ -59,13 +86,17 @@ function currentMonthKey(date = new Date()) {
 }
 
 async function notifyOwners(tenantId, alert) {
-  const memberships = await Membership.find({ tenantId, role: 'owner', status: 'active' }).select('userId').lean();
+  const [tenant, memberships] = await Promise.all([
+    Tenant.findById(tenantId).select('name slug').lean(),
+    Membership.find({ tenantId, role: 'owner', status: 'active' }).select('userId').lean(),
+  ]);
+  if (!tenant) throw new Error(`Tenant not found for quota notification: ${tenantId}`);
   const recipients = await User.find({ _id: { $in: memberships.map((item) => item.userId) } })
     .select('email language')
     .lean();
   const deliverable = recipients.filter((item) => item.email);
   const results = await Promise.allSettled(deliverable.map((item) => {
-    const { subject, message } = buildQuotaEmail(alert, item.language);
+    const { subject, message } = buildQuotaEmail(alert, item.language, tenant);
     return sendNotificationEmail(item.email, subject, message, tenantId);
   }));
   return summarizeNotificationResults(results);
diff --git a/apps/api/src/services/quotaAlertService.test.mjs b/apps/api/src/services/quotaAlertService.test.mjs
index 0593a38..d8420f8 100644
--- a/apps/api/src/services/quotaAlertService.test.mjs
+++ b/apps/api/src/services/quotaAlertService.test.mjs
@@ -5,22 +5,35 @@ const require = createRequire(import.meta.url);
 const { buildQuotaEmail, summarizeNotificationResults } = require('./quotaAlertService');
 
 const alert = { metric: 'requests', threshold: 90, usage: 900, limit: 1000 };
+const tenant = { name: 'ContextHub Demo', slug: 'contexthub-demo' };
 
 describe('quota alert localization', () => {
   it('builds Turkish quota messages by default', () => {
-    const message = buildQuotaEmail(alert);
-    expect(message.subject).toBe('ContextHub kota uyarısı: %90');
+    const message = buildQuotaEmail(alert, 'tr', tenant);
+    expect(message.subject).toBe('ContextHub kota uyarısı: ContextHub Demo (contexthub-demo) · %90');
+    expect(message.message).toContain('<strong>Tenant:</strong> ContextHub Demo');
+    expect(message.message).toContain('<strong>Slug:</strong> contexthub-demo');
     expect(message.message).toContain('aylık API isteği');
     expect(message.message).toContain('900/1000');
   });
 
   it('builds English quota messages for English profiles', () => {
-    const message = buildQuotaEmail(alert, 'en-US');
-    expect(message.subject).toBe('ContextHub quota alert: 90%');
+    const message = buildQuotaEmail(alert, 'en-US', tenant);
+    expect(message.subject).toBe('ContextHub quota alert: ContextHub Demo (contexthub-demo) · 90%');
     expect(message.message).toContain('monthly API request');
     expect(message.message).toContain('900/1000');
   });
 
+  it('escapes tenant details in HTML and strips line breaks from the subject', () => {
+    const message = buildQuotaEmail(alert, 'tr', {
+      name: 'Demo <Tenant>\nInjected',
+      slug: 'demo&tenant',
+    });
+    expect(message.subject).toBe('ContextHub kota uyarısı: Demo Tenant Injected (demo&tenant) · %90');
+    expect(message.message).toContain('Demo &lt;Tenant&gt; Injected');
+    expect(message.message).toContain('demo&amp;tenant');
+  });
+
   it('does not classify partial or failed delivery as sent', () => {
     expect(summarizeNotificationResults([
       { status: 'fulfilled', value: {} },
diff --git a/docs/saas/en/api-token-lifecycle.md b/docs/saas/en/api-token-lifecycle.md
index a42c0e9..2f76aba 100644
--- a/docs/saas/en/api-token-lifecycle.md
+++ b/docs/saas/en/api-token-lifecycle.md
@@ -25,6 +25,8 @@ Store the returned token in a secret manager immediately. ContextHub stores a SH
 
 `GET /api/api-tokens` returns token metadata including name, role, scopes, `expiresAt`, `lastUsedAt`, creation time, and creator—never the secret or its hash. Give every workload its own token so usage and revocation remain attributable.
 
+`lastUsedAt` is recorded in Redis and flushed to the database about every five minutes, so the inventory timestamp can lag by a few minutes. Revocation does not depend on this field.
+
 `expiresInDays: 0` creates a non-expiring token. Prefer a finite expiry and alert before it. A token's name and scopes can be updated with `PUT /api/api-tokens/:tokenId`; role and expiry are fixed at creation.
 
 ## Rotate without downtime
diff --git a/docs/saas/tr/api-token-lifecycle.md b/docs/saas/tr/api-token-lifecycle.md
index 10a5081..2e410b8 100644
--- a/docs/saas/tr/api-token-lifecycle.md
+++ b/docs/saas/tr/api-token-lifecycle.md
@@ -25,6 +25,8 @@ Dönen token'ı hemen secret manager'a kaydedin. ContextHub SHA-256 hash saklar
 
 `GET /api/api-tokens`; ad, rol, scope, `expiresAt`, `lastUsedAt`, oluşturma zamanı ve oluşturan kullanıcı bilgisini döndürür; secret veya hash dönmez. Kullanım ve revoke işlemi izlenebilir olsun diye her workload'a ayrı token verin.
 
+`lastUsedAt` kullanım sırasında Redis'te tutulur ve yaklaşık 5 dakikada bir veritabanına aktarılır. Bu nedenle envanterdeki zaman birkaç dakika geriden gelebilir; token iptalinin uygulanması bu alana bağlı değildir.
+
 `expiresInDays: 0` süresiz token oluşturur. Sonlu süre kullanıp sona ermeden alarm üretmeyi tercih edin. Token adı ve scope'ları `PUT /api/api-tokens/:tokenId` ile güncellenebilir; rol ve expiry oluşturma anında sabittir.
 
 ## Kesintisiz rotation
diff --git a/package.json b/package.json
index a4313bd..0c79198 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "contexthub",
-  "version": "0.1.15",
+  "version": "0.1.19",
   "private": true,
   "packageManager": "pnpm@10.13.1",
   "description": "Multi‑tenant headless CMS and content services platform.",
@@ -19,6 +19,8 @@
     "deploy": "pnpm build:admin:hosted && pnpm hosted:entitlements:verify && node scripts/deploy-admin.mjs",
     "deploy:admin": "pnpm hosted:entitlements:verify && node scripts/deploy-admin.mjs",
     "rollback:admin": "node scripts/rollback-admin.mjs",
+    "api:pm2:env:check": "node scripts/reload-api-pm2-with-env.cjs --check",
+    "api:pm2:reload": "node scripts/reload-api-pm2-with-env.cjs --reload",
     "test": "turbo test",
     "test:watch": "turbo test:watch",
     "lint": "turbo lint",
diff --git a/packages/common/package.json b/packages/common/package.json
index 89b9605..af306c1 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contexthub/common",
-  "version": "0.1.15",
+  "version": "0.1.19",
   "private": true,
   "description": "Shared models, types and utilities for contextHub",
   "main": "src/index.js",
diff --git a/scripts/reload-api-pm2-with-env.cjs b/scripts/reload-api-pm2-with-env.cjs
new file mode 100644
index 0000000..a3f8549
--- /dev/null
+++ b/scripts/reload-api-pm2-with-env.cjs
@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+// Check the running API env, or reload it from .env without exposing secret values.
+const fs = require("node:fs");
+const os = require("node:os");
+const path = require("node:path");
+const { spawnSync } = require("node:child_process");
+const dotenv = require("dotenv");
+
+const apiRoot = path.resolve(__dirname, "..");
+const processName = "contexthub-api";
+const mode = process.argv[2] || "--check";
+
+function requireSuccess(result, action) {
+  if (result.status !== 0) throw new Error(`${action} failed`);
+}
+
+function runPm2(args, env = process.env) {
+  return spawnSync("pm2", args, {
+    cwd: apiRoot,
+    env,
+    encoding: "utf8",
+    timeout: 120000,
+    maxBuffer: 16 * 1024 * 1024,
+  });
+}
+
+function listApiProcesses() {
+  const result = runPm2(["jlist"]);
+  requireSuccess(result, "PM2 list");
+  const processes = JSON.parse(result.stdout).filter(
+    (item) => item.name === processName,
+  );
+  if (!processes.length) throw new Error("API process missing");
+  return processes;
+}
+
+function compare(processes, expected) {
+  const driftKeys = [
+    ...new Set(
+      processes.flatMap(({ pm2_env: actual = {} }) =>
+        Object.keys(expected).filter(
+          (key) => String(actual[key] ?? "") !== expected[key],
+        ),
+      ),
+    ),
+  ].sort();
+  const online = processes.filter(
+    ({ pm2_env }) => pm2_env?.status === "online",
+  ).length;
+  return { processes: processes.length, online, driftKeys };
+}
+
+function restrictDumpFiles() {
+  const pm2Home = process.env.PM2_HOME || path.join(os.homedir(), ".pm2");
+  for (const name of ["dump.pm2", "dump.pm2.bak"]) {
+    const filename = path.join(pm2Home, name);
+    if (fs.existsSync(filename)) fs.chmodSync(filename, 0o600);
+  }
+}
+
+function main() {
+  if (!["--check", "--reload"].includes(mode) || process.argv.length > 3) {
+    throw new Error("Usage: reload-api-pm2-with-env.cjs [--check|--reload]");
+  }
+  const expected = dotenv.parse(fs.readFileSync(path.join(apiRoot, ".env")));
+  if (!expected.MONGODB_URI) throw new Error("MONGODB_URI missing from .env");
+
+  if (mode === "--reload") {
+    // Reloading by ecosystem file preserved inherited PM2 env on this host.
+    // The process-name path with --update-env uses these explicit values.
+    const result = runPm2(["reload", processName, "--update-env"], {
+      ...process.env,
+      ...expected,
+    });
+    requireSuccess(result, "PM2 reload");
+  }
+
+  const state = compare(listApiProcesses(), expected);
+  console.log(JSON.stringify({ action: mode.slice(2), ...state }));
+  if (state.driftKeys.length || state.online !== state.processes) {
+    process.exitCode = 1;
+    return;
+  }
+  if (mode === "--reload") {
+    requireSuccess(runPm2(["save"]), "PM2 save");
+    restrictDumpFiles();
+    console.log(JSON.stringify({ action: "save", status: "ok" }));
+  }
+}
+
+try {
+  main();
+} catch (error) {
+  // PM2 and driver errors may contain an env value; never print the message.
+  console.error(
+    JSON.stringify({ action: mode.slice(2), errorType: error.name || "Error" }),
+  );
+  process.exitCode = 1;
+}