diff --git a/api/src/Sozsoft.Platform.Application/Public/PublicAppService.cs b/api/src/Sozsoft.Platform.Application/Public/PublicAppService.cs
index b72979aa..57e33cc5 100644
--- a/api/src/Sozsoft.Platform.Application/Public/PublicAppService.cs
+++ b/api/src/Sozsoft.Platform.Application/Public/PublicAppService.cs
@@ -17,9 +17,16 @@ using System.Text.Json;
 using Volo.Abp.Identity;
 using Sozsoft.Languages;
 using Sozsoft.Languages.Entities;
+using Microsoft.AspNetCore.Authorization;
+using static Sozsoft.Platform.Data.Seeds.SeedConsts;
 
 namespace Sozsoft.Platform.Public;
 
+/// <summary>
+/// Public site uc noktalari. Okuma metotlari anonim erisime aciktir; sayfa tasarimini
+/// degistiren <c>Save*PageAsync</c> metotlari <see cref="AppCodes.WebSiteDesign"/>
+/// yetkileriyle korunur (yetkiler PermissionsData.json icinde tanimli, seeder ile yonetilir).
+/// </summary>
 public class PublicAppService : PlatformAppService
 {
     private readonly IRepository<Service, Guid> _serviceRepository;
@@ -96,6 +103,7 @@ public class PublicAppService : PlatformAppService
         return ObjectMapper.Map<List<Service>, List<ServiceDto>>(entity);
     }
 
+    [Authorize(AppCodes.WebSiteDesign.About)]
     public async Task SaveAboutPageAsync(SaveAboutPageInput input)
     {
         var entity = await _aboutRepository.FirstOrDefaultAsync() ?? throw new EntityNotFoundException(typeof(About));
@@ -148,6 +156,7 @@ public class PublicAppService : PlatformAppService
         await _languageTextAppService.ClearRedisCacheAsync();
     }
 
+    [Authorize(AppCodes.WebSiteDesign.Services)]
     public async Task SaveServicesPageAsync(SaveServicesPageInput input)
     {
         var existingEntities = await _serviceRepository.GetListAsync();
@@ -207,6 +216,7 @@ public class PublicAppService : PlatformAppService
         return ObjectMapper.Map<Home, HomeDto>(entity);
     }
 
+    [Authorize(AppCodes.WebSiteDesign.Home)]
     public async Task SaveHomePageAsync(SaveHomePageInput input)
     {
         var entity = await _homeRepository.FirstOrDefaultAsync() ?? throw new EntityNotFoundException(typeof(Home));
@@ -956,6 +966,7 @@ public class PublicAppService : PlatformAppService
             .ToList();
     }
 
+    [Authorize(AppCodes.WebSiteDesign.Contact)]
     public async Task SaveContactPageAsync(SaveContactPageInput input)
     {
         var entity = await _contactRepository.FirstOrDefaultAsync() ?? throw new EntityNotFoundException(typeof(Contact));
diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/PermissionsData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/PermissionsData.json
index 3d62bc45..5459dd7e 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/PermissionsData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/PermissionsData.json
@@ -1603,6 +1603,15 @@
             "MultiTenancySide": 2,
             "MenuGroup": "Erp|Kurs"
         },
+        {
+            "GroupName": "App.Saas",
+            "Name": "App.Home.Design",
+            "ParentName": "App.Home",
+            "DisplayName": "Design",
+            "IsEnabled": true,
+            "MultiTenancySide": 2,
+            "MenuGroup": "Erp|Kurs"
+        },
         {
             "GroupName": "App.Saas",
             "Name": "App.About",
@@ -1612,6 +1621,15 @@
             "MultiTenancySide": 2,
             "MenuGroup": "Erp|Kurs"
         },
+        {
+            "GroupName": "App.Saas",
+            "Name": "App.About.Design",
+            "ParentName": "App.About",
+            "DisplayName": "Design",
+            "IsEnabled": true,
+            "MultiTenancySide": 2,
+            "MenuGroup": "Erp|Kurs"
+        },
         {
             "GroupName": "App.Saas",
             "Name": "App.Services",
@@ -1621,6 +1639,15 @@
             "MultiTenancySide": 2,
             "MenuGroup": "Erp|Kurs"
         },
+        {
+            "GroupName": "App.Saas",
+            "Name": "App.Services.Design",
+            "ParentName": "App.Services",
+            "DisplayName": "Design",
+            "IsEnabled": true,
+            "MultiTenancySide": 2,
+            "MenuGroup": "Erp|Kurs"
+        },
         {
             "GroupName": "App.Saas",
             "Name": "App.Orders.Products",
@@ -2080,6 +2107,15 @@
             "MultiTenancySide": 2,
             "MenuGroup": "Erp|Kurs"
         },
+        {
+            "GroupName": "App.Saas",
+            "Name": "App.Contact.Design",
+            "ParentName": "App.Contact",
+            "DisplayName": "Design",
+            "IsEnabled": true,
+            "MultiTenancySide": 2,
+            "MenuGroup": "Erp|Kurs"
+        },
         {
             "GroupName": "App.Saas",
             "Name": "App.Menus.Routes",
diff --git a/api/src/Sozsoft.Platform.Domain.Shared/PlatformConsts.cs b/api/src/Sozsoft.Platform.Domain.Shared/PlatformConsts.cs
index 2628b3f2..b5aeb378 100644
--- a/api/src/Sozsoft.Platform.Domain.Shared/PlatformConsts.cs
+++ b/api/src/Sozsoft.Platform.Domain.Shared/PlatformConsts.cs
@@ -526,6 +526,18 @@ public static class PlatformConsts
         public const string Demos = Prefix.App + ".Demos";
         public const string Contact = Prefix.App + ".Contact";
 
+        /// <summary>
+        /// Public sitedeki sayfa tasarim modu (`?design=1`) yetkileri.
+        /// Yetkiler <c>Seeds/PermissionsData.json</c> icinde tanimlanir ve seeder ile yonetilir.
+        /// </summary>
+        public static class WebSiteDesign
+        {
+            public const string Home = AppCodes.Home + ".Design";
+            public const string About = AppCodes.About + ".Design";
+            public const string Services = AppCodes.Services + ".Design";
+            public const string Contact = AppCodes.Contact + ".Design";
+        }
+
         //Administration
         public const string Administration = Prefix.App + ".Administration";
 
diff --git a/api/src/Sozsoft.Platform.Domain/Data/SeedConsts.cs b/api/src/Sozsoft.Platform.Domain/Data/SeedConsts.cs
index de05f9e5..9207220e 100644
--- a/api/src/Sozsoft.Platform.Domain/Data/SeedConsts.cs
+++ b/api/src/Sozsoft.Platform.Domain/Data/SeedConsts.cs
@@ -443,6 +443,18 @@ public static class SeedConsts
         public const string Demos = Prefix.App + ".Demos";
         public const string Contact = Prefix.App + ".Contact";
 
+        /// <summary>
+        /// Public sitedeki sayfa tasarim modu (`?design=1`) yetkileri.
+        /// Yetkiler <c>Seeds/PermissionsData.json</c> icinde tanimlanir ve seeder ile yonetilir.
+        /// </summary>
+        public static class WebSiteDesign
+        {
+            public const string Home = AppCodes.Home + ".Design";
+            public const string About = AppCodes.About + ".Design";
+            public const string Services = AppCodes.Services + ".Design";
+            public const string Contact = AppCodes.Contact + ".Design";
+        }
+
         public static class Menus
         {
             public const string Default = Prefix.App + ".Menus";
diff --git a/ui/src/components/orders/BillingControls.tsx b/ui/src/components/orders/BillingControls.tsx
index 2e5552a1..00b19f16 100644
--- a/ui/src/components/orders/BillingControls.tsx
+++ b/ui/src/components/orders/BillingControls.tsx
@@ -33,7 +33,7 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
   return (
     <div
       className={`sticky z-20 bg-white border-b border-gray-200 shadow-sm mb-6 transition-all duration-300 dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-950/40 ${
-        isScrolled ? 'top-[5.5rem]' : 'top-[6.5rem]'
+        isScrolled ? 'top-[6rem]' : 'top-[6.5rem]'
       }`}
     >
       <div className="p-2">
diff --git a/ui/src/constants/permission.constant.ts b/ui/src/constants/permission.constant.ts
index ce676a96..a5acc93c 100644
--- a/ui/src/constants/permission.constant.ts
+++ b/ui/src/constants/permission.constant.ts
@@ -3,3 +3,15 @@ export const AI_ASSISTANT = 'App.Definitions.AiBot.Asistant'
 
 /** Veritabanı migration + seed tetikleme yetkisi (host tarafı). */
 export const DB_MIGRATE = 'App.Setup.Migrate'
+
+/**
+ * Public site sayfalarının tasarım modu yetkileri.
+ * Sunucuda `PermissionsData.json` içinde tanımlıdır ve seeder ile yönetilir;
+ * asıl kontrol `PublicAppService.Save*PageAsync` üzerindedir.
+ */
+export const PUBLIC_PAGE_DESIGN = {
+  HOME: 'App.Home.Design',
+  ABOUT: 'App.About.Design',
+  SERVICES: 'App.Services.Design',
+  CONTACT: 'App.Contact.Design',
+} as const
diff --git a/ui/src/views/public/About.tsx b/ui/src/views/public/About.tsx
index 0dbec22d..e716e0f8 100644
--- a/ui/src/views/public/About.tsx
+++ b/ui/src/views/public/About.tsx
@@ -1,18 +1,30 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import type { FC } from 'react'
 import { Helmet } from 'react-helmet'
-import navigationIcon from '@/proxy/menus/navigation-icon.config'
 import { AboutDto } from '@/proxy/about/models'
 import { getAbout, saveAboutPage } from '@/services/about'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import Loading from '@/components/shared/Loading'
 import { APP_NAME } from '@/constants/app.constant'
-import { Button, Notification, toast } from '@/components/ui'
-import { useStoreState, useStoreActions } from '@/store'
-import DesignerDrawer from './designer/DesignerDrawer'
-import SelectableBlock from './designer/SelectableBlock'
-import { DesignerSelection } from './designer/types'
-import { useDesignerState } from './designer/useDesignerState'
+import { PUBLIC_PAGE_DESIGN } from '@/constants/permission.constant'
+import {
+  DesignerLayer,
+  DesignerSelection,
+  SelectableBlock,
+  TranslateFn,
+  iconField,
+  imageField,
+  isLikelyLocalizationKey,
+  numberField,
+  booleanField,
+  resolveLocalizedValue,
+  styleField,
+  textAreaField,
+  textField,
+  translateLabel,
+  usePageDesigner,
+} from './designer'
+import { designerPageClass, getIconColor } from './pageStyles'
+import { PageIcon, PublicPageLoader } from './shared'
 
 interface AboutStatContent {
   icon: string
@@ -25,10 +37,10 @@ interface AboutStatContent {
   valueStyleClass: string
   labelStyleClassKey: string
   labelStyleClass: string
-  useCounter?: boolean
-  counterEnd?: string
-  counterSuffix?: string
-  counterDuration?: number
+  useCounter: boolean
+  counterEnd: string
+  counterSuffix: string
+  counterDuration: number
 }
 
 interface AboutDescriptionContent {
@@ -81,30 +93,20 @@ const ABOUT_HERO_TITLE_STYLE_KEY = 'Public.about.hero.titleStyleClass'
 const ABOUT_HERO_SUBTITLE_STYLE_KEY = 'Public.about.hero.subtitleStyleClass'
 const ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY = 'Public.about.descriptions.containerStyleClass'
 
-function isLikelyLocalizationKey(value?: string) {
-  return Boolean(value && /^[A-Za-z0-9_.-]+$/.test(value) && value.includes('.'))
-}
+const HERO_SECTION_STYLE_DEFAULT = 'relative bg-blue-900 text-white py-12'
+const HERO_TITLE_STYLE_DEFAULT = 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'
+const HERO_SUBTITLE_STYLE_DEFAULT = 'text-xl max-w-3xl ml-4'
+const DESCRIPTIONS_CONTAINER_STYLE_DEFAULT =
+  'p-5 mx-auto text-gray-800 dark:text-gray-200 text-lg leading-relaxed shadow-md bg-white dark:bg-gray-900 border-l-4 border-blue-600'
+const STAT_STYLE_DEFAULT = 'text-center rounded-xl px-4 py-6'
+const STAT_VALUE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2'
+const STAT_LABEL_STYLE_DEFAULT = 'text-gray-600 dark:text-gray-300'
+const SECTION_CARD_STYLE_DEFAULT = 'bg-white dark:bg-gray-900 p-8 rounded-xl shadow-lg dark:shadow-gray-950/40'
+const SECTION_TITLE_STYLE_DEFAULT = 'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4'
+const SECTION_DESCRIPTION_STYLE_DEFAULT = 'text-gray-700 dark:text-gray-300'
 
-function resolveLocalizedValue(
-  translate: (key: string) => string,
-  keyOrValue: string | undefined,
-  fallback = '',
-) {
-  if (!keyOrValue) {
-    return fallback
-  }
-
-  if (!isLikelyLocalizationKey(keyOrValue)) {
-    return keyOrValue
-  }
-
-  const translatedValue = translate('::' + keyOrValue)
-  return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
-}
-
-function getCounterParts(value?: string, suffix?: string) {
-  const sourceValue = value || '0'
-  const numericMatch = sourceValue.replace(',', '.').match(/\d+(?:\.\d+)?/)
+function getCounterParts(value: string, suffix: string) {
+  const numericMatch = (value || '0').replace(',', '.').match(/\d+(?:\.\d+)?/)
 
   if (!numericMatch) {
     return null
@@ -116,43 +118,66 @@ function getCounterParts(value?: string, suffix?: string) {
     return null
   }
 
-  const prefix = sourceValue.slice(0, numericMatch.index)
-  const detectedSuffix = sourceValue.slice((numericMatch.index || 0) + numericMatch[0].length)
+  const matchIndex = numericMatch.index ?? 0
 
   return {
     endValue,
-    prefix,
-    suffix: suffix ?? detectedSuffix,
+    prefix: value.slice(0, matchIndex),
+    suffix: suffix || value.slice(matchIndex + numericMatch[0].length),
     hasDecimals: numericMatch[0].includes('.'),
   }
 }
 
+/**
+ * Sayac animasyonu yalnizca deger ekrana girdiginde bir kez calisir;
+ * boylece sayfanin altindaki istatistikler kullanici oraya gelmeden bitmis olmaz.
+ */
 const AnimatedStatValue: FC<{ stat: AboutStatContent }> = ({ stat }) => {
   const counterParts = useMemo(
     () => getCounterParts(stat.counterEnd || stat.value, stat.counterSuffix),
     [stat.counterEnd, stat.counterSuffix, stat.value],
   )
   const [currentValue, setCurrentValue] = useState(0)
+  const [isVisible, setIsVisible] = useState(false)
+  const containerRef = useRef<HTMLSpanElement>(null)
 
   useEffect(() => {
-    if (!stat.useCounter || !counterParts) {
+    const element = containerRef.current
+
+    if (!stat.useCounter || !element || typeof IntersectionObserver === 'undefined') {
+      setIsVisible(true)
       return
     }
 
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.3 },
+    )
+
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [stat.useCounter])
+
+  useEffect(() => {
+    if (!stat.useCounter || !counterParts || !isVisible) {
+      return
+    }
+
+    const duration = Math.max(stat.counterDuration || 2000, 0)
     let animationFrameId = 0
     let startTime: number | null = null
-    const duration = Math.max(stat.counterDuration || 2000, 0)
 
     const animate = (timestamp: number) => {
-      if (startTime === null) {
-        startTime = timestamp
-      }
+      startTime ??= timestamp
 
-      const elapsed = timestamp - startTime
-      const progress = duration === 0 ? 1 : Math.min(elapsed / duration, 1)
-      const easedProgress = 1 - Math.pow(1 - progress, 3)
-
-      setCurrentValue(counterParts.endValue * easedProgress)
+      const progress = duration === 0 ? 1 : Math.min((timestamp - startTime) / duration, 1)
+      setCurrentValue(counterParts.endValue * (1 - Math.pow(1 - progress, 3)))
 
       if (progress < 1) {
         animationFrameId = requestAnimationFrame(animate)
@@ -162,32 +187,23 @@ const AnimatedStatValue: FC<{ stat: AboutStatContent }> = ({ stat }) => {
     setCurrentValue(0)
     animationFrameId = requestAnimationFrame(animate)
 
-    return () => {
-      cancelAnimationFrame(animationFrameId)
-    }
-  }, [counterParts, stat.counterDuration, stat.useCounter])
+    return () => cancelAnimationFrame(animationFrameId)
+  }, [counterParts, isVisible, stat.counterDuration, stat.useCounter])
 
   if (!stat.useCounter || !counterParts) {
     return <>{stat.value}</>
   }
 
-  const formattedValue = counterParts.hasDecimals
-    ? currentValue.toFixed(1)
-    : Math.floor(currentValue).toString()
-
   return (
-    <>
+    <span ref={containerRef}>
       {counterParts.prefix}
-      {formattedValue}
+      {counterParts.hasDecimals ? currentValue.toFixed(1) : Math.floor(currentValue)}
       {counterParts.suffix}
-    </>
+    </span>
   )
 }
 
-function buildAboutContent(
-  about: AboutDto | undefined,
-  translate: (key: string) => string,
-): AboutContent {
+function buildAboutContent(about: AboutDto | undefined, translate: TranslateFn): AboutContent {
   return {
     heroTitle: resolveLocalizedValue(translate, ABOUT_HERO_TITLE_KEY, 'About'),
     heroTitleKey: ABOUT_HERO_TITLE_KEY,
@@ -195,7 +211,7 @@ function buildAboutContent(
     heroTitleStyleClass: resolveLocalizedValue(
       translate,
       ABOUT_HERO_TITLE_STYLE_KEY,
-      'text-5xl font-bold ml-4 mt-3 mb-2 text-white',
+      HERO_TITLE_STYLE_DEFAULT,
     ),
     heroSubtitle: resolveLocalizedValue(translate, ABOUT_HERO_SUBTITLE_KEY),
     heroSubtitleKey: ABOUT_HERO_SUBTITLE_KEY,
@@ -203,7 +219,7 @@ function buildAboutContent(
     heroSubtitleStyleClass: resolveLocalizedValue(
       translate,
       ABOUT_HERO_SUBTITLE_STYLE_KEY,
-      'text-xl max-w-3xl ml-4',
+      HERO_SUBTITLE_STYLE_DEFAULT,
     ),
     heroImage: resolveLocalizedValue(translate, ABOUT_HERO_IMAGE_KEY, ABOUT_HERO_IMAGE),
     heroImageKey: ABOUT_HERO_IMAGE_KEY,
@@ -211,250 +227,182 @@ function buildAboutContent(
     heroSectionStyleClass: resolveLocalizedValue(
       translate,
       ABOUT_HERO_SECTION_STYLE_KEY,
-      'relative bg-blue-900 text-white py-12',
+      HERO_SECTION_STYLE_DEFAULT,
     ),
     descriptionsContainerStyleClassKey: ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY,
     descriptionsContainerStyleClass: resolveLocalizedValue(
       translate,
       ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY,
-      'p-5 mx-auto text-gray-800 dark:text-gray-200 text-lg leading-relaxed shadow-md bg-white dark:bg-gray-900 border-l-4 border-blue-600',
+      DESCRIPTIONS_CONTAINER_STYLE_DEFAULT,
     ),
-    stats:
-      about?.statsDto.map((stat, index) => ({
-        styleClassKey: `Public.about.dynamic.stat.${index + 1}.styleClass`,
-        styleClass: resolveLocalizedValue(
-          translate,
-          `Public.about.dynamic.stat.${index + 1}.styleClass`,
-          'text-center rounded-xl px-4 py-6',
-        ),
-        valueStyleClassKey: `Public.about.dynamic.stat.${index + 1}.valueStyleClass`,
-        valueStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.about.dynamic.stat.${index + 1}.valueStyleClass`,
-          'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2',
-        ),
-        labelStyleClassKey: `Public.about.dynamic.stat.${index + 1}.labelStyleClass`,
-        labelStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.about.dynamic.stat.${index + 1}.labelStyleClass`,
-          'text-gray-600 dark:text-gray-300',
-        ),
+    stats: (about?.statsDto ?? []).map((stat, index) => {
+      const prefix = `Public.about.dynamic.stat.${index + 1}`
+
+      return {
         icon: stat.icon || '',
         value: stat.value,
         label: resolveLocalizedValue(translate, stat.labelKey, stat.labelKey),
-        labelKey:
-          (isLikelyLocalizationKey(stat.labelKey) ? stat.labelKey : undefined) ||
-          `Public.about.dynamic.stat.${index + 1}.label`,
-        useCounter: stat.useCounter,
-        counterEnd: stat.counterEnd,
-        counterSuffix: stat.counterSuffix,
-        counterDuration: stat.counterDuration,
-      })) ?? [],
-    descriptions:
-      about?.descriptionsDto.map((item, index) => ({
-        key:
-          (isLikelyLocalizationKey(item) ? item : undefined) ||
-          `Public.about.dynamic.description.${index + 1}`,
+        labelKey: (isLikelyLocalizationKey(stat.labelKey) ? stat.labelKey : '') || `${prefix}.label`,
+        styleClassKey: `${prefix}.styleClass`,
+        styleClass: resolveLocalizedValue(translate, `${prefix}.styleClass`, STAT_STYLE_DEFAULT),
+        valueStyleClassKey: `${prefix}.valueStyleClass`,
+        valueStyleClass: resolveLocalizedValue(
+          translate,
+          `${prefix}.valueStyleClass`,
+          STAT_VALUE_STYLE_DEFAULT,
+        ),
+        labelStyleClassKey: `${prefix}.labelStyleClass`,
+        labelStyleClass: resolveLocalizedValue(
+          translate,
+          `${prefix}.labelStyleClass`,
+          STAT_LABEL_STYLE_DEFAULT,
+        ),
+        useCounter: stat.useCounter ?? false,
+        counterEnd: stat.counterEnd ?? '',
+        counterSuffix: stat.counterSuffix ?? '',
+        counterDuration: stat.counterDuration ?? 2000,
+      }
+    }),
+    descriptions: (about?.descriptionsDto ?? []).map((item, index) => {
+      const prefix = `Public.about.dynamic.description.${index + 1}`
+
+      return {
+        key: (isLikelyLocalizationKey(item) ? item : '') || prefix,
         text: resolveLocalizedValue(translate, item, item),
-        styleClassKey: `Public.about.dynamic.description.${index + 1}.styleClass`,
+        styleClassKey: `${prefix}.styleClass`,
         styleClass: resolveLocalizedValue(
           translate,
-          `Public.about.dynamic.description.${index + 1}.styleClass`,
+          `${prefix}.styleClass`,
           index % 2 === 0 ? '' : 'text-center p-5 text-blue-800 dark:text-white',
         ),
-      })) ?? [],
-    sections:
-      about?.sectionsDto.map((section) => ({
+      }
+    }),
+    sections: (about?.sectionsDto ?? []).map((section) => {
+      const prefix = `Public.about.dynamic.section.${section.key}`
+
+      return {
         title: resolveLocalizedValue(translate, section.key, section.key),
         description: resolveLocalizedValue(translate, section.descKey, section.descKey),
-        titleKey:
-          (isLikelyLocalizationKey(section.key) ? section.key : undefined) ||
-          `Public.about.dynamic.section.${section.key}.title`,
+        titleKey: (isLikelyLocalizationKey(section.key) ? section.key : '') || `${prefix}.title`,
         descriptionKey:
-          (isLikelyLocalizationKey(section.descKey) ? section.descKey : undefined) ||
-          `Public.about.dynamic.section.${section.key}.description`,
-        cardStyleClassKey: `Public.about.dynamic.section.${section.key}.cardStyleClass`,
+          (isLikelyLocalizationKey(section.descKey) ? section.descKey : '') || `${prefix}.description`,
+        cardStyleClassKey: `${prefix}.cardStyleClass`,
         cardStyleClass: resolveLocalizedValue(
           translate,
-          `Public.about.dynamic.section.${section.key}.cardStyleClass`,
-          'bg-white dark:bg-gray-900 p-8 rounded-xl shadow-lg dark:shadow-gray-950/40',
+          `${prefix}.cardStyleClass`,
+          SECTION_CARD_STYLE_DEFAULT,
         ),
-        titleStyleClassKey: `Public.about.dynamic.section.${section.key}.titleStyleClass`,
+        titleStyleClassKey: `${prefix}.titleStyleClass`,
         titleStyleClass: resolveLocalizedValue(
           translate,
-          `Public.about.dynamic.section.${section.key}.titleStyleClass`,
-          'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
+          `${prefix}.titleStyleClass`,
+          SECTION_TITLE_STYLE_DEFAULT,
         ),
-        descriptionStyleClassKey: `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
+        descriptionStyleClassKey: `${prefix}.descriptionStyleClass`,
         descriptionStyleClass: resolveLocalizedValue(
           translate,
-          `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
-          'text-gray-700 dark:text-gray-300',
+          `${prefix}.descriptionStyleClass`,
+          SECTION_DESCRIPTION_STYLE_DEFAULT,
         ),
-      })) ?? [],
+      }
+    }),
+  }
+}
+
+function toSaveInput(content: AboutContent, cultureName: string) {
+  return {
+    cultureName,
+    heroTitleKey: content.heroTitleKey,
+    heroTitleValue: content.heroTitle,
+    heroSubtitleKey: content.heroSubtitleKey,
+    heroSubtitleValue: content.heroSubtitle,
+    heroImageKey: content.heroImageKey,
+    heroImageValue: content.heroImage,
+    stats: content.stats.map((stat, index) => ({
+      icon: stat.icon,
+      value: stat.value,
+      labelKey: stat.labelKey || `Public.about.dynamic.stat.${index + 1}.label`,
+      labelValue: stat.label,
+      useCounter: stat.useCounter,
+      counterEnd: stat.counterEnd,
+      counterSuffix: stat.counterSuffix,
+      counterDuration: stat.counterDuration,
+    })),
+    descriptions: content.descriptions.map((item, index) => ({
+      key: item.key || `Public.about.dynamic.description.${index + 1}`,
+      value: item.text,
+    })),
+    sections: content.sections.map((section, index) => ({
+      titleKey: section.titleKey || `Public.about.dynamic.section.${index + 1}.title`,
+      titleValue: section.title,
+      descriptionKey:
+        section.descriptionKey || `Public.about.dynamic.section.${index + 1}.description`,
+      descriptionValue: section.description,
+    })),
+    styleTexts: [
+      { key: content.heroSectionStyleClassKey, value: content.heroSectionStyleClass },
+      { key: content.heroTitleStyleClassKey, value: content.heroTitleStyleClass },
+      { key: content.heroSubtitleStyleClassKey, value: content.heroSubtitleStyleClass },
+      {
+        key: content.descriptionsContainerStyleClassKey,
+        value: content.descriptionsContainerStyleClass,
+      },
+      ...content.stats.flatMap((stat) => [
+        { key: stat.styleClassKey, value: stat.styleClass },
+        { key: stat.valueStyleClassKey, value: stat.valueStyleClass },
+        { key: stat.labelStyleClassKey, value: stat.labelStyleClass },
+      ]),
+      ...content.descriptions.map((item) => ({
+        key: item.styleClassKey,
+        value: item.styleClass,
+      })),
+      ...content.sections.flatMap((section) => [
+        { key: section.cardStyleClassKey, value: section.cardStyleClass },
+        { key: section.titleStyleClassKey, value: section.titleStyleClass },
+        { key: section.descriptionStyleClassKey, value: section.descriptionStyleClass },
+      ]),
+    ],
   }
 }
 
 const About: FC = () => {
   const { translate } = useLocalization()
-  const { setLang } = useStoreActions((actions) => actions.locale)
-  const { getConfig } = useStoreActions((actions) => actions.abpConfig)
-  const configCultureName = useStoreState(
-    (state) => state.abpConfig.config?.localization.currentCulture.cultureName,
-  )
-  const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
-  const currentLanguage = configCultureName || localeCurrentLang || 'tr'
-  const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages) || []
-  const languageOptions = abpLanguages
-    .filter((language) => Boolean(language.cultureName))
-    .map((language) => {
-      const cultureName = language.cultureName || 'tr'
-      return {
-        key: cultureName.toLowerCase().split('-')[0],
-        cultureName,
-        displayName: language.displayName || cultureName,
-      }
-    })
-  const languagesFromConfig = languageOptions.map((language) => language.key)
-  const editorLanguages = Array.from(
-    new Set((languagesFromConfig.length > 0 ? languagesFromConfig : [currentLanguage]).filter(Boolean)),
-  )
   const [loading, setLoading] = useState(true)
-  const [isSaving, setIsSaving] = useState(false)
-  const [isPanelVisible, setIsPanelVisible] = useState(true)
   const [about, setAbout] = useState<AboutDto>()
 
-  const iconColors = [
-    'text-blue-600',
-    'text-red-600',
-    'text-green-600',
-    'text-purple-600',
-    'text-yellow-600',
-    'text-indigo-600',
-  ]
-
-  function getIconColor(index: number) {
-    return iconColors[index % iconColors.length]
-  }
-
-  const initialContent = !loading ? buildAboutContent(about, translate) : null
-  const {
-    content,
-    isDesignMode,
-    selectedBlockId,
-    selectedLanguage,
-    supportedLanguages,
-    setContent,
-    setSelectedBlockId,
-    resetContent,
-  } = useDesignerState<AboutContent>('about', initialContent, {
-    currentLanguage,
-    supportedLanguages: editorLanguages,
-  })
-
   useEffect(() => {
-    setLoading(true)
-    const fetchServices = async () => {
+    const fetchAbout = async () => {
+      setLoading(true)
+
       try {
         const result = await getAbout()
         setAbout(result.data)
       } catch (error) {
-        console.error('About alınırken hata oluştu:', error)
+        console.error('About alinirken hata olustu:', error)
       } finally {
         setLoading(false)
       }
     }
-    fetchServices()
+
+    fetchAbout()
   }, [])
 
-  const updateContent = (updater: (current: AboutContent) => AboutContent) => {
-    setContent((current) => {
-      if (!current) {
-        return current
-      }
+  // Referansi kararli tutmak icin memoize edilir; aksi halde tasarim state'i her render'da yeniden tohumlanir.
+  const initialContent = useMemo(
+    () => (loading ? null : buildAboutContent(about, translate)),
+    [about, loading, translate],
+  )
 
-      return updater(current)
-    })
-  }
+  const designer = usePageDesigner<AboutContent>({
+    pageKey: 'About',
+    permission: PUBLIC_PAGE_DESIGN.ABOUT,
+    initialContent,
+    onSave: (content, cultureName) => saveAboutPage(toSaveInput(content, cultureName)),
+  })
 
-  const handleFieldChange = (fieldKey: string, value: string | string[]) => {
-    updateContent((current) => {
-      if (
-        fieldKey === 'heroTitle' ||
-        fieldKey === 'heroSubtitle' ||
-        fieldKey === 'heroImage' ||
-        fieldKey === 'heroSectionStyleClass' ||
-        fieldKey === 'heroTitleStyleClass' ||
-        fieldKey === 'heroSubtitleStyleClass' ||
-        fieldKey === 'descriptionsContainerStyleClass'
-      ) {
-        return {
-          ...current,
-          [fieldKey]: value as string,
-        }
-      }
+  const { content, isDesignMode, isPanelVisible, selectedBlockId, selectBlock } = designer
 
-      if (fieldKey.startsWith('description-')) {
-        const index = Number(fieldKey.replace('description-', ''))
-        const descriptions = [...current.descriptions]
-        descriptions[index] = {
-          ...descriptions[index],
-          text: value as string,
-        }
-
-        return {
-          ...current,
-          descriptions,
-        }
-      }
-
-      if (fieldKey.startsWith('descriptionStyle-')) {
-        const index = Number(fieldKey.replace('descriptionStyle-', ''))
-        const descriptions = [...current.descriptions]
-        descriptions[index] = {
-          ...descriptions[index],
-          styleClass: value as string,
-        }
-
-        return {
-          ...current,
-          descriptions,
-        }
-      }
-
-      if (selectedBlockId?.startsWith('stat-')) {
-        const index = Number(selectedBlockId.replace('stat-', ''))
-        const stats = [...current.stats]
-        stats[index] = {
-          ...stats[index],
-          [fieldKey]: value as string,
-        }
-
-        return {
-          ...current,
-          stats,
-        }
-      }
-
-      if (selectedBlockId?.startsWith('section-')) {
-        const index = Number(selectedBlockId.replace('section-', ''))
-        const sections = [...current.sections]
-        sections[index] = {
-          ...sections[index],
-          [fieldKey]: value as string,
-        }
-
-        return {
-          ...current,
-          sections,
-        }
-      }
-
-      return current
-    })
-  }
-
-  const selectedSelection: DesignerSelection | null = useMemo(() => {
+  const selection: DesignerSelection | null = useMemo(() => {
     if (!content || !selectedBlockId) {
       return null
     }
@@ -463,44 +411,26 @@ const About: FC = () => {
       return {
         id: 'hero',
         title: content.heroTitleKey,
-        description: 'Baslik, alt baslik ve arka plan gorselini guncelleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.desc4',
+          'Baslik, alt baslik ve arka plan gorselini guncelleyin.',
+        ),
         fields: [
-          {
-            key: 'heroTitle',
-            label: content.heroTitleKey,
-            type: 'text',
-            value: content.heroTitle,
-          },
-          {
-            key: 'heroTitleStyleClass',
-            label: content.heroTitleStyleClassKey,
-            type: 'text',
-            value: content.heroTitleStyleClass,
-          },
-          {
-            key: 'heroSubtitle',
-            label: content.heroSubtitleKey,
-            type: 'textarea',
-            value: content.heroSubtitle,
-          },
-          {
-            key: 'heroSubtitleStyleClass',
-            label: content.heroSubtitleStyleClassKey,
-            type: 'text',
-            value: content.heroSubtitleStyleClass,
-          },
-          {
-            key: 'heroImage',
-            label: content.heroImageKey,
-            type: 'image',
-            value: content.heroImage,
-          },
-          {
-            key: 'heroSectionStyleClass',
-            label: content.heroSectionStyleClassKey,
-            type: 'text',
-            value: content.heroSectionStyleClass,
-          },
+          textField('heroTitle', content.heroTitleKey, content.heroTitle),
+          textAreaField('heroSubtitle', content.heroSubtitleKey, content.heroSubtitle),
+          imageField('heroImage', content.heroImageKey, content.heroImage, { group: 'media' }),
+          styleField('heroTitleStyleClass', content.heroTitleStyleClassKey, content.heroTitleStyleClass),
+          styleField(
+            'heroSubtitleStyleClass',
+            content.heroSubtitleStyleClassKey,
+            content.heroSubtitleStyleClass,
+          ),
+          styleField(
+            'heroSectionStyleClass',
+            content.heroSectionStyleClassKey,
+            content.heroSectionStyleClass,
+          ),
         ],
       }
     }
@@ -509,29 +439,25 @@ const About: FC = () => {
       return {
         id: 'descriptions',
         title: 'Public.about.description.*',
-        description: 'Orta bolumdeki aciklama metinlerini duzenleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.descriptionsHint',
+          'Orta bolumdeki aciklama metinlerini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'descriptionsContainerStyleClass',
-            label: content.descriptionsContainerStyleClassKey,
-            type: 'text',
-            value: content.descriptionsContainerStyleClass,
-          },
-          ...content.descriptions.flatMap((item, index) => [
-            {
-              key: `description-${index}`,
-              label: item.key || `Public.about.dynamic.description.${index + 1}`,
-              type: 'textarea' as const,
-              value: item.text,
+          ...content.descriptions.map((item, index) =>
+            textAreaField(`descriptions.${index}.text`, item.key, item.text, {
               rows: index % 2 === 0 ? 4 : 3,
-            },
-            {
-              key: `descriptionStyle-${index}`,
-              label: item.styleClassKey,
-              type: 'text' as const,
-              value: item.styleClass,
-            },
-          ]),
+            }),
+          ),
+          styleField(
+            'descriptionsContainerStyleClass',
+            content.descriptionsContainerStyleClassKey,
+            content.descriptionsContainerStyleClass,
+          ),
+          ...content.descriptions.map((item, index) =>
+            styleField(`descriptions.${index}.styleClass`, item.styleClassKey, item.styleClass),
+          ),
         ],
       }
     }
@@ -547,45 +473,45 @@ const About: FC = () => {
       return {
         id: selectedBlockId,
         title: stat.labelKey,
-        description: translate('::Public.designer.desc1'),
+        description: translateLabel(translate, 'Public.designer.desc1', 'Kart icerigini duzenleyin.'),
         fields: [
-          {
-            key: 'icon',
-            label: translate('::Public.designer.ikonAnahtari'),
-            type: 'icon',
-            value: stat.icon,
-            placeholder: 'Ornek: FaUsers',
-          },
-          { 
-            key: 'value', 
-            label: translate('::App.Listform.ListformField.Value'), 
-            type: 'text', 
-            value: stat.value 
-          },
-          {
-            key: 'label',
-            label: translate('::' + stat.labelKey),
-            type: 'text',
-            value: stat.label,
-          },
-          {
-            key: 'styleClass',
-            label: stat.styleClassKey,
-            type: 'text',
-            value: stat.styleClass,
-          },
-          {
-            key: 'valueStyleClass',
-            label: stat.valueStyleClassKey,
-            type: 'text',
-            value: stat.valueStyleClass,
-          },
-          {
-            key: 'labelStyleClass',
-            label: stat.labelStyleClassKey,
-            type: 'text',
-            value: stat.labelStyleClass,
-          },
+          iconField(
+            `stats.${index}.icon`,
+            translateLabel(translate, 'Public.designer.ikonAnahtari', 'Ikon anahtari'),
+            stat.icon,
+            { placeholder: 'Ornek: FaUsers' },
+          ),
+          textField(
+            `stats.${index}.value`,
+            translate('::App.Listform.ListformField.Value'),
+            stat.value,
+          ),
+          textField(`stats.${index}.label`, stat.labelKey, stat.label),
+          booleanField(`stats.${index}.useCounter`, 'useCounter', stat.useCounter, {
+            group: 'advanced',
+            placeholder: translateLabel(
+              translate,
+              'Public.designer.useCounter',
+              'Sayac animasyonu kullan',
+            ),
+          }),
+          textField(`stats.${index}.counterEnd`, 'counterEnd', stat.counterEnd, {
+            group: 'advanced',
+            helpText: translateLabel(
+              translate,
+              'Public.designer.counterEndHint',
+              'Bos birakilirsa deger alanindaki sayi kullanilir.',
+            ),
+          }),
+          textField(`stats.${index}.counterSuffix`, 'counterSuffix', stat.counterSuffix, {
+            group: 'advanced',
+          }),
+          numberField(`stats.${index}.counterDuration`, 'counterDuration (ms)', stat.counterDuration, {
+            group: 'advanced',
+          }),
+          styleField(`stats.${index}.styleClass`, stat.styleClassKey, stat.styleClass),
+          styleField(`stats.${index}.valueStyleClass`, stat.valueStyleClassKey, stat.valueStyleClass),
+          styleField(`stats.${index}.labelStyleClass`, stat.labelStyleClassKey, stat.labelStyleClass),
         ],
       }
     }
@@ -601,174 +527,34 @@ const About: FC = () => {
       return {
         id: selectedBlockId,
         title: section.titleKey,
-        description: 'Kart basligi ve aciklama metnini duzenleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.sectionHint',
+          'Kart basligi ve aciklama metnini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'title',
-            label: section.titleKey,
-            type: 'text',
-            value: section.title,
-          },
-          {
-            key: 'description',
-            label: section.descriptionKey,
-            type: 'textarea',
-            value: section.description,
-          },
-          {
-            key: 'cardStyleClass',
-            label: section.cardStyleClassKey,
-            type: 'text',
-            value: section.cardStyleClass,
-          },
-          {
-            key: 'titleStyleClass',
-            label: section.titleStyleClassKey,
-            type: 'text',
-            value: section.titleStyleClass,
-          },
-          {
-            key: 'descriptionStyleClass',
-            label: section.descriptionStyleClassKey,
-            type: 'text',
-            value: section.descriptionStyleClass,
-          },
+          textField(`sections.${index}.title`, section.titleKey, section.title),
+          textAreaField(`sections.${index}.description`, section.descriptionKey, section.description),
+          styleField(`sections.${index}.cardStyleClass`, section.cardStyleClassKey, section.cardStyleClass),
+          styleField(
+            `sections.${index}.titleStyleClass`,
+            section.titleStyleClassKey,
+            section.titleStyleClass,
+          ),
+          styleField(
+            `sections.${index}.descriptionStyleClass`,
+            section.descriptionStyleClassKey,
+            section.descriptionStyleClass,
+          ),
         ],
       }
     }
 
     return null
-  }, [content, selectedBlockId])
-
-  const handleSaveAndExit = async () => {
-    if (!content || isSaving) {
-      return
-    }
-
-    setIsSaving(true)
-
-    try {
-      await saveAboutPage({
-        cultureName: selectedLanguage,
-        heroTitleKey: content.heroTitleKey,
-        heroTitleValue: content.heroTitle,
-        heroSubtitleKey: content.heroSubtitleKey,
-        heroSubtitleValue: content.heroSubtitle,
-        heroImageKey: content.heroImageKey,
-        heroImageValue: content.heroImage,
-        stats: content.stats.map((stat, index) => ({
-          icon: stat.icon,
-          value: stat.value,
-          labelKey: stat.labelKey || `Public.about.dynamic.stat.${index + 1}.label`,
-          labelValue: stat.label,
-          useCounter: stat.useCounter,
-          counterEnd: stat.counterEnd,
-          counterSuffix: stat.counterSuffix,
-          counterDuration: stat.counterDuration,
-        })),
-        descriptions: content.descriptions.map((item, index) => ({
-          key: item.key || `Public.about.dynamic.description.${index + 1}`,
-          value: item.text,
-        })),
-        sections: content.sections.map((section, index) => ({
-          titleKey: section.titleKey || `Public.about.dynamic.section.${index + 1}.title`,
-          titleValue: section.title,
-          descriptionKey:
-            section.descriptionKey || `Public.about.dynamic.section.${index + 1}.description`,
-          descriptionValue: section.description,
-        })),
-        styleTexts: [
-          {
-            key: content.heroSectionStyleClassKey,
-            value: content.heroSectionStyleClass,
-          },
-          {
-            key: content.heroTitleStyleClassKey,
-            value: content.heroTitleStyleClass,
-          },
-          {
-            key: content.heroSubtitleStyleClassKey,
-            value: content.heroSubtitleStyleClass,
-          },
-          {
-            key: content.descriptionsContainerStyleClassKey,
-            value: content.descriptionsContainerStyleClass,
-          },
-          ...content.stats.flatMap((stat) => [
-            {
-              key: stat.styleClassKey,
-              value: stat.styleClass,
-            },
-            {
-              key: stat.valueStyleClassKey,
-              value: stat.valueStyleClass,
-            },
-            {
-              key: stat.labelStyleClassKey,
-              value: stat.labelStyleClass,
-            },
-          ]),
-          ...content.descriptions.map((item) => ({
-            key: item.styleClassKey,
-            value: item.styleClass,
-          })),
-          ...content.sections.flatMap((section) => [
-            {
-              key: section.cardStyleClassKey,
-              value: section.cardStyleClass,
-            },
-            {
-              key: section.titleStyleClassKey,
-              value: section.titleStyleClass,
-            },
-            {
-              key: section.descriptionStyleClassKey,
-              value: section.descriptionStyleClass,
-            },
-          ]),
-        ],
-      })
-
-      await getConfig(false)
-      setSelectedBlockId(null)
-      
-      toast.push(
-        <Notification type="success" duration={2000}>
-          {translate('::ListForms.FormBilgileriKaydedildi')}
-        </Notification>,
-        {
-          placement: 'bottom-end',
-        },
-      )
-      
-    } catch (error) {
-      console.error('About tasarimi kaydedilemedi:', error)
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleLanguageChange = (language: string) => {
-    // Global locale changes asynchronously fetch fresh localization texts.
-    // Keep designer language synced from store after that refresh.
-    setLang(language)
-  }
-
-  const handleSelectBlock = (blockId: string) => {
-    setSelectedBlockId(blockId)
-    if (!isPanelVisible) {
-      setIsPanelVisible(true)
-    }
-  }
+  }, [content, selectedBlockId, translate])
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={loading} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
@@ -777,110 +563,64 @@ const About: FC = () => {
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::App.About')}
         defaultTitle={APP_NAME}
-      ></Helmet>
+      />
 
-      <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
-        {isDesignMode && !isPanelVisible && (
-          <Button
-            type="button"
-            onClick={() => setIsPanelVisible(true)}
-            className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
-          >
-            {translate('::Public.designer.showPanel')}
-          </Button>
-        )}
-
-        {/* Hero Section */}
+      <div className={designerPageClass(isDesignMode, isPanelVisible)}>
+        {/* Hero */}
         <SelectableBlock
           id="hero"
+          label="Hero"
           isActive={selectedBlockId === 'hero'}
           isDesignMode={isDesignMode}
-          onSelect={handleSelectBlock}
+          onSelect={selectBlock}
         >
-          <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
+          <div
+            className={`${content?.heroSectionStyleClass || HERO_SECTION_STYLE_DEFAULT} dark:bg-gray-950`}
+          >
             <div
               className="absolute inset-0 opacity-20 dark:opacity-35"
               style={{
-                backgroundImage: `url("${content?.heroImage ?? ABOUT_HERO_IMAGE}")`,
+                backgroundImage: `url("${content?.heroImage || ABOUT_HERO_IMAGE}")`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
               }}
-            ></div>
-            <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
-            <div className="container mx-auto pt-20 relative">
-              <h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>
+            />
+            <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45" />
+            <div className="container relative mx-auto pt-20">
+              <h1 className={content?.heroTitleStyleClass || HERO_TITLE_STYLE_DEFAULT}>
                 {content?.heroTitle}
               </h1>
-              <p className={content?.heroSubtitleStyleClass || 'text-xl max-w-3xl ml-4'}>{content?.heroSubtitle}</p>
+              <p className={content?.heroSubtitleStyleClass || HERO_SUBTITLE_STYLE_DEFAULT}>
+                {content?.heroSubtitle}
+              </p>
             </div>
           </div>
         </SelectableBlock>
 
-        {/* Stats Section */}
-        <div className="py-10 bg-white dark:bg-gray-900">
+        {/* Stats */}
+        <div className="bg-white py-10 dark:bg-gray-900">
           <div className="container mx-auto px-4">
-            <div className="grid grid-cols-1 md:grid-cols-5 gap-8">
-              {content?.stats.map((stat, index) => {
-                const IconComponent = navigationIcon[stat.icon || '']
-
-                return (
-                  <SelectableBlock
-                    key={index}
-                    id={`stat-${index}`}
-                    isActive={selectedBlockId === `stat-${index}`}
-                    isDesignMode={isDesignMode}
-                    onSelect={handleSelectBlock}
-                  >
-                    <div className={stat.styleClass || 'text-center rounded-xl px-4 py-6'}>
-                      {IconComponent && (
-                        <IconComponent
-                          className={`w-12 h-12 mx-auto mb-4 ${getIconColor(index)}`}
-                        />
-                      )}
-                      <div className={`${stat.valueStyleClass || 'text-4xl font-bold text-gray-900 mb-2'} dark:text-gray-100`}>
-                        <AnimatedStatValue stat={stat} />
-                      </div>
-                      <div className={`${stat.labelStyleClass || 'text-gray-600'} dark:text-gray-300`}>{stat.label}</div>
-                    </div>
-                  </SelectableBlock>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-
-        {/* Main Content */}
-        <div className="py-6">
-          <div className="container mx-auto px-4">
-            <div className="mb-6">
-              <SelectableBlock
-                id="descriptions"
-                isActive={selectedBlockId === 'descriptions'}
-                isDesignMode={isDesignMode}
-                onSelect={handleSelectBlock}
-              >
-                <div className={`${content?.descriptionsContainerStyleClass || 'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600'} dark:bg-gray-900 dark:text-gray-200`}>
-                  {content?.descriptions.map((item, index) => (
-                    <p key={item.key || `description-${index}`} className={item.styleClass || ''}>
-                      {item.text}
-                    </p>
-                  ))}
-                </div>
-              </SelectableBlock>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-              {content?.sections.map((section, index) => (
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5">
+              {content?.stats.map((stat, index) => (
                 <SelectableBlock
-                  key={index}
-                  id={`section-${index}`}
-                  isActive={selectedBlockId === `section-${index}`}
+                  key={`${stat.labelKey}-${index}`}
+                  id={`stat-${index}`}
+                  label={`Stat ${index + 1}`}
+                  isActive={selectedBlockId === `stat-${index}`}
                   isDesignMode={isDesignMode}
-                  onSelect={handleSelectBlock}
+                  onSelect={selectBlock}
                 >
-                  <div className={`${section.cardStyleClass || 'bg-white p-8 rounded-xl shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
-                    <h3 className={`${section.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'} dark:text-gray-100`}>{section.title}</h3>
-                    <p className={`${section.descriptionStyleClass || 'text-gray-700'} dark:text-gray-300`}>{section.description}</p>
+                  <div className={stat.styleClass || STAT_STYLE_DEFAULT}>
+                    <PageIcon
+                      name={stat.icon}
+                      className={`mx-auto mb-4 h-12 w-12 ${getIconColor(index)}`}
+                    />
+                    <div className={stat.valueStyleClass || STAT_VALUE_STYLE_DEFAULT}>
+                      <AnimatedStatValue stat={stat} />
+                    </div>
+                    <div className={stat.labelStyleClass || STAT_LABEL_STYLE_DEFAULT}>
+                      {stat.label}
+                    </div>
                   </div>
                 </SelectableBlock>
               ))}
@@ -888,26 +628,56 @@ const About: FC = () => {
           </div>
         </div>
 
-        <DesignerDrawer
-          isOpen={isDesignMode && isPanelVisible}
-          selection={selectedSelection}
-          pageTitle="About"
-          selectedLanguage={selectedLanguage}
-          languages={
-            languageOptions.length > 0
-              ? languageOptions
-              : supportedLanguages.map((language) => ({
-                  key: language,
-                  cultureName: language,
-                  displayName: language.toUpperCase(),
-                }))
-          }
-          onClose={() => setIsPanelVisible(false)}
-          onSave={handleSaveAndExit}
-          onLanguageChange={handleLanguageChange}
-          onReset={resetContent}
-          onFieldChange={handleFieldChange}
-        />
+        {/* Descriptions + sections */}
+        <div className="py-6">
+          <div className="container mx-auto px-4">
+            <div className="mb-6">
+              <SelectableBlock
+                id="descriptions"
+                label={translateLabel(translate, 'Public.designer.group.content', 'Icerik')}
+                isActive={selectedBlockId === 'descriptions'}
+                isDesignMode={isDesignMode}
+                onSelect={selectBlock}
+              >
+                <div
+                  className={
+                    content?.descriptionsContainerStyleClass || DESCRIPTIONS_CONTAINER_STYLE_DEFAULT
+                  }
+                >
+                  {content?.descriptions.map((item, index) => (
+                    <p key={item.key || `description-${index}`} className={item.styleClass}>
+                      {item.text}
+                    </p>
+                  ))}
+                </div>
+              </SelectableBlock>
+            </div>
+
+            <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
+              {content?.sections.map((section, index) => (
+                <SelectableBlock
+                  key={`${section.titleKey}-${index}`}
+                  id={`section-${index}`}
+                  label={`Section ${index + 1}`}
+                  isActive={selectedBlockId === `section-${index}`}
+                  isDesignMode={isDesignMode}
+                  onSelect={selectBlock}
+                >
+                  <div className={section.cardStyleClass || SECTION_CARD_STYLE_DEFAULT}>
+                    <h3 className={section.titleStyleClass || SECTION_TITLE_STYLE_DEFAULT}>
+                      {section.title}
+                    </h3>
+                    <p className={section.descriptionStyleClass || SECTION_DESCRIPTION_STYLE_DEFAULT}>
+                      {section.description}
+                    </p>
+                  </div>
+                </SelectableBlock>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DesignerLayer pageTitle="About" selection={selection} designer={designer} />
       </div>
     </>
   )
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index fc22e73d..665f855a 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -1,63 +1,90 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FaCalendarAlt, FaUser, FaTag, FaSearch } from 'react-icons/fa'
+import { Helmet } from 'react-helmet'
 import { showDbDateAsIs } from '@/utils/dateUtils'
 import { BlogCategory, BlogPost } from '@/proxy/blog/blog'
 import { blogService } from '@/services/blog.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Helmet } from 'react-helmet'
-import { Loading } from '@/components/shared'
 import { APP_NAME } from '@/constants/app.constant'
 import { Button } from '@/components/ui'
+import { translateLabel } from './designer'
+import { PublicPageLoader } from './shared'
 
-const Blog = () => {
+const PAGE_SIZE = 10
+const PAGINATION_WINDOW = 2
+
+const BLOG_HERO_IMAGE =
+  'https://images.pexels.com/photos/3183164/pexels-photo-3183164.jpeg?auto=compress&cs=tinysrgb&w=1920'
+
+function buildPageNumbers(currentPage: number, totalPages: number) {
+  const pages: number[] = []
+
+  for (let page = 1; page <= totalPages; page += 1) {
+    if (
+      page === 1 ||
+      page === totalPages ||
+      Math.abs(page - currentPage) <= PAGINATION_WINDOW
+    ) {
+      pages.push(page)
+    }
+  }
+
+  return pages
+}
+
+const Blog: React.FC = () => {
   const { translate } = useLocalization()
 
   const [posts, setPosts] = useState<BlogPost[]>([])
   const [categories, setCategories] = useState<BlogCategory[]>([])
   const [loading, setLoading] = useState(true)
-  const [selectedCategory, setSelectedCategory] = useState<string>('')
+  const [selectedCategory, setSelectedCategory] = useState('')
   const [searchQuery, setSearchQuery] = useState('')
+  // Arama yalnizca form gonderildiginde uygulanir; her tusa basista istek atilmaz.
+  const [appliedSearch, setAppliedSearch] = useState('')
   const [currentPage, setCurrentPage] = useState(1)
-  const [totalPages, setTotalPages] = useState(1)
+  const [totalCount, setTotalCount] = useState(0)
 
-  useEffect(() => {
-    loadBlogData()
-  }, [currentPage, selectedCategory])
+  const loadBlogData = useCallback(async () => {
+    setLoading(true)
 
-  const loadBlogData = async () => {
     try {
-      setLoading(true)
-
-      const postsData = await blogService.getPosts({
+      const result = await blogService.getPosts({
         page: currentPage,
-        pageSize: 10,
+        pageSize: PAGE_SIZE,
         categoryId: selectedCategory,
-        search: searchQuery,
+        search: appliedSearch,
       })
 
-      if (
-        postsData.posts &&
-        postsData.posts.items &&
-        postsData.posts.totalCount &&
-        postsData.categories
-      ) {
-        setPosts(postsData.posts.items.filter((a) => a.isPublished))
-        setTotalPages(postsData.posts.totalCount / 10)
-        setCategories(postsData.categories.filter((a) => a.isActive))
-      }
+      // Sonuc bos donse de liste sifirlanmali; aksi halde onceki sayfanin yazilari ekranda kalir.
+      setPosts((result?.posts?.items ?? []).filter((post) => post.isPublished))
+      setTotalCount(result?.posts?.totalCount ?? 0)
+      setCategories((result?.categories ?? []).filter((category) => category.isActive))
     } catch (error) {
-      console.error('Blog verileri yüklenemedi:', error)
+      console.error('Blog verileri yuklenemedi:', error)
       setPosts([])
+      setTotalCount(0)
     } finally {
       setLoading(false)
     }
-  }
+  }, [appliedSearch, currentPage, selectedCategory])
 
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault()
-    setCurrentPage(1)
+  useEffect(() => {
     loadBlogData()
+  }, [loadBlogData])
+
+  // Kesirli sayfa sayisi `Array(totalPages)` cagrisini patlatiyordu; yukari yuvarlanir.
+  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE))
+  const pageNumbers = useMemo(
+    () => buildPageNumbers(currentPage, totalPages),
+    [currentPage, totalPages],
+  )
+
+  const handleSearch = (event: React.FormEvent) => {
+    event.preventDefault()
+    setCurrentPage(1)
+    setAppliedSearch(searchQuery.trim())
   }
 
   const handleCategoryChange = (categoryId: string) => {
@@ -65,147 +92,137 @@ const Blog = () => {
     setCurrentPage(1)
   }
 
+  const categoryButtonClass = (isActive: boolean) =>
+    `px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+      isActive
+        ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-900 dark:hover:bg-blue-800'
+        : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+    }`
+
   if (loading && posts.length === 0) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={loading} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
-        title={translate('::' + 'App.BlogManagement')}
+        title={translate('::App.BlogManagement')}
         defaultTitle={APP_NAME}
-      ></Helmet>
-      {/* Hero Section */}
-      <div className="relative bg-blue-900 text-white py-12 dark:bg-gray-950">
+      />
+
+      {/* Hero */}
+      <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950">
         <div
           className="absolute inset-0 opacity-20 dark:opacity-35"
           style={{
-            backgroundImage:
-              'url("https://images.pexels.com/photos/3183164/pexels-photo-3183164.jpeg?auto=compress&cs=tinysrgb&w=1920")',
+            backgroundImage: `url("${BLOG_HERO_IMAGE}")`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
           }}
-        ></div>
-        <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
-        <div className="container mx-auto pt-20 relative">
-          <h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">
+        />
+        <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45" />
+        <div className="container relative mx-auto pt-20">
+          <h1 className="mb-2 ml-4 mt-3 text-5xl font-bold text-white">
             {translate('::App.BlogManagement')}
           </h1>
-          <p className="text-xl max-w-3xl ml-4">{translate('::Public.blog.subtitle')}</p>
+          <p className="ml-4 max-w-3xl text-xl">{translate('::Public.blog.subtitle')}</p>
         </div>
       </div>
 
-      
-
-      {/* Blog Posts Grid */}
       <div className="container mx-auto px-4 py-6">
+        {/* Arama ve kategori filtresi */}
+        <div className="shadow-sm">
+          <div className="container mx-auto pb-4">
+            <div className="flex flex-col md:flex-row">
+              <form className="flex-1" onSubmit={handleSearch}>
+                <div className="relative">
+                  <input
+                    type="search"
+                    value={searchQuery}
+                    placeholder={translateLabel(
+                      translate,
+                      'Public.blog.searchPlaceholder',
+                      'Blog yazilarinda ara...',
+                    )}
+                    aria-label={translate('::App.Reports.Search')}
+                    className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+                    onChange={(event) => setSearchQuery(event.target.value)}
+                  />
+                  <FaSearch className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+                </div>
+              </form>
 
-      {/* Search and Filter Section */}
-      <div className="shadow-sm border-b border-gray-200 dark:border-gray-800">
-        <div className="container mx-auto pb-4">
-          <div className="flex flex-col md:flex-row gap-4">
-            {/* Search */}
-            <form onSubmit={handleSearch} className="flex-1">
-              <div className="relative">
-                <input
-                  type="text"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder="Blog yazılarında ara..."
-                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
-                />
-                <FaSearch className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+              <div className="flex flex-wrap gap-2">
+                {categories.map((category) => (
+                  <Button
+                    key={category.id}
+                    type="button"
+                    onClick={() => handleCategoryChange(category.id)}
+                  >
+                    {translate('::Public.' + category.name)} ({category.postCount})
+                  </Button>
+                ))}
               </div>
-            </form>
-
-            {/* Category Filter */}
-            <div className="flex gap-2 flex-wrap">
-              <Button
-                onClick={() => handleCategoryChange('')}
-                className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
-                  selectedCategory === ''
-                    ? 'bg-blue-600 text-black'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
-                }`}
-              >
-                {translate('::App.Reports.Search')}
-              </Button>
-              {categories.map((category) => (
-                <Button
-                  key={category.id}
-                  onClick={() => handleCategoryChange(category.id)}
-                  className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
-                    selectedCategory === category.id
-                      ? 'bg-blue-600 text-white'
-                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  {translate('::Public.' + category.name)} ({category.postCount})
-                </Button>
-              ))}
             </div>
           </div>
         </div>
-      </div>
 
-        {!Array.isArray(posts) || posts.length === 0 ? (
-          <div className="text-center py-12">
-            <p className="text-gray-600 text-lg dark:text-gray-300">Henüz blog yazısı bulunmuyor.</p>
+        {posts.length === 0 ? (
+          <div className="py-12 text-center">
+            <p className="text-lg text-gray-600 dark:text-gray-300">
+              {translateLabel(translate, 'Public.blog.empty', 'Henuz blog yazisi bulunmuyor.')}
+            </p>
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
             {posts.map((post) => (
-              <Link to={`/blog/${post.slug || post.id}`} key={post.id} className="block">
-                <article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow h-full flex flex-col dark:bg-gray-900 dark:shadow-gray-950/40">
-                  <div className="aspect-w-16 aspect-h-9 relative">
-                    <img
-                      src={post.coverImage}
-                      alt={post.title}
-                      className="object-cover w-full h-48"
-                    />
-                    <div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm dark:bg-blue-900">
+              <Link key={post.id} to={`/blog/${post.slug || post.id}`} className="block">
+                <article className="flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-lg transition-shadow hover:shadow-xl dark:bg-gray-900 dark:shadow-gray-950/40">
+                  <div className="relative">
+                    {post.coverImage && (
+                      <img
+                        src={post.coverImage}
+                        alt={post.title}
+                        loading="lazy"
+                        className="h-48 w-full object-cover"
+                      />
+                    )}
+                    <div className="absolute right-4 top-4 rounded-full bg-blue-600 px-3 py-1 text-sm text-white dark:bg-blue-900">
                       {translate('::Public.' + post.category.name)}
                     </div>
                   </div>
-                  <div className="p-6 flex-1 flex flex-col">
-                    <h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors dark:text-gray-100 dark:hover:text-blue-400">
+                  <div className="flex flex-1 flex-col p-6">
+                    <h2 className="mb-3 text-xl font-bold text-gray-900 transition-colors hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400">
                       {translate('::Public.' + post.title)}
                     </h2>
-                    <p className="text-gray-600 mb-4 flex-1 dark:text-gray-300">
+                    <p className="mb-4 flex-1 text-gray-600 dark:text-gray-300">
                       {translate('::Public.' + post.summary)}
                     </p>
 
-                    {/* Tags */}
                     {post.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-2 mb-4">
-                        {post.tags.slice(0, 3).map((tag, index) => (
+                      <div className="mb-4 flex flex-wrap gap-2">
+                        {post.tags.slice(0, 3).map((tag) => (
                           <span
-                            key={index}
-                            className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded dark:bg-gray-800 dark:text-gray-300"
+                            key={tag}
+                            className="inline-flex items-center rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-300"
                           >
-                            <FaTag className="w-3 h-3 mr-1" />
+                            <FaTag className="mr-1 h-3 w-3" />
                             {tag}
                           </span>
                         ))}
                       </div>
                     )}
 
-                    <div className="flex items-center text-sm text-gray-500 space-x-4 dark:text-gray-400">
-                      <div className="flex items-center">
+                    <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
+                      <span className="flex items-center">
                         <FaUser size={16} className="mr-1" />
                         {post.author}
-                      </div>
-                      <div className="flex items-center">
+                      </span>
+                      <span className="flex items-center">
                         <FaCalendarAlt size={16} className="mr-1" />
                         {showDbDateAsIs(post.publishedAt || post.creationTime)}
-                      </div>
+                      </span>
                     </div>
                   </div>
                 </article>
@@ -214,62 +231,65 @@ const Blog = () => {
           </div>
         )}
 
-        {/* Pagination */}
         {totalPages > 1 && (
-          <div className="mt-12 flex justify-center">
-            <nav className="flex gap-2">
-              <Button
-                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                disabled={currentPage === 1}
-                className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
-              >
-                Önceki
-              </Button>
+          <nav className="mt-12 flex justify-center gap-2">
+            <Button
+              type="button"
+              disabled={currentPage === 1}
+              className="rounded-lg border border-gray-300 px-4 py-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
+              onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
+            >
+              {translateLabel(translate, 'Public.common.previous', 'Onceki')}
+            </Button>
 
-              {[...Array(totalPages)].map((_, i) => (
+            {pageNumbers.map((page, index) => (
+              <React.Fragment key={page}>
+                {index > 0 && page - pageNumbers[index - 1] > 1 && (
+                  <span className="px-2 py-2 text-gray-400">…</span>
+                )}
                 <Button
-                  key={i + 1}
-                  onClick={() => setCurrentPage(i + 1)}
-                  className={`px-4 py-2 rounded-lg ${
-                    currentPage === i + 1
+                  type="button"
+                  className={`rounded-lg px-4 py-2 ${
+                    currentPage === page
                       ? 'bg-blue-600 text-white'
                       : 'border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800'
                   }`}
+                  onClick={() => setCurrentPage(page)}
                 >
-                  {i + 1}
+                  {page}
                 </Button>
-              ))}
+              </React.Fragment>
+            ))}
 
-              <Button
-                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                disabled={currentPage === totalPages}
-                className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
-              >
-                Sonraki
-              </Button>
-            </nav>
-          </div>
+            <Button
+              type="button"
+              disabled={currentPage === totalPages}
+              className="rounded-lg border border-gray-300 px-4 py-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
+              onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
+            >
+              {translateLabel(translate, 'Public.common.next', 'Sonraki')}
+            </Button>
+          </nav>
         )}
       </div>
 
-      {/* Newsletter Section */}
+      {/* Newsletter */}
       <div className="bg-white py-16 dark:bg-gray-900">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4 dark:text-gray-100">
+          <h2 className="mb-4 text-3xl font-bold text-gray-900 dark:text-gray-100">
             {translate('::Public.blog.subscribe')}
           </h2>
-          <p className="text-gray-600 mb-8 max-w-2xl mx-auto dark:text-gray-300">
+          <p className="mx-auto mb-8 max-w-2xl text-gray-600 dark:text-gray-300">
             {translate('::Public.blog.subscribe.desc')}
           </p>
-          <div className="max-w-md mx-auto flex gap-4">
+          <div className="mx-auto flex max-w-md gap-4">
             <input
               type="email"
               placeholder={translate('::Abp.Account.EmailAddress')}
-              className="flex-1 px-2 py-1 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+              aria-label={translate('::Abp.Account.EmailAddress')}
+              className="flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
             />
-            <Button variant='solid'>
-              {translate('::Public.common.subscribe')}
-            </Button>
+            <Button variant="solid">{translate('::Public.common.subscribe')}</Button>
           </div>
         </div>
       </div>
diff --git a/ui/src/views/public/BlogDetail.tsx b/ui/src/views/public/BlogDetail.tsx
index d49e2835..222b92c5 100644
--- a/ui/src/views/public/BlogDetail.tsx
+++ b/ui/src/views/public/BlogDetail.tsx
@@ -1,19 +1,21 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
+import { Helmet } from 'react-helmet'
 import { showDbDateAsIs } from '@/utils/dateUtils'
 import { BlogPost } from '@/proxy/blog/blog'
 import { blogService } from '@/services/blog.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { ROUTES_ENUM } from '@/routes/route.constant'
-import { Helmet } from 'react-helmet'
-import { Loading } from '@/components/shared'
 import { APP_NAME } from '@/constants/app.constant'
+import { translateLabel } from './designer'
+import { PublicPageLoader } from './shared'
 
-interface PostData {
-  image?: string
-  author?: string
-}
+const CenteredMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
+    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{children}</h1>
+  </div>
+)
 
 const BlogDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>()
@@ -21,7 +23,6 @@ const BlogDetail: React.FC = () => {
   const { currentLang } = useStoreState((state) => state.locale)
 
   const [blogPost, setBlogPost] = useState<BlogPost | null>(null)
-  const [postData, setPostData] = useState<PostData | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -29,94 +30,88 @@ const BlogDetail: React.FC = () => {
     const fetchBlogPost = async () => {
       setLoading(true)
       setError(null)
+
+      if (!id) {
+        setError(translateLabel(translate, 'Public.blog.notFound', 'Blog yazisi bulunamadi.'))
+        setLoading(false)
+        return
+      }
+
       try {
-        if (id) {
-          const response = await blogService.getPostBySlug(id)
-          setBlogPost(response)
-          setPostData({
-            image: response.coverImage,
-            author: response.author,
-          })
-        } else {
-          setError('Blog post ID is missing.')
-        }
-      } catch (error: any) {
-        setError(error.message || 'Failed to fetch blog post.')
+        setBlogPost(await blogService.getPostBySlug(id))
+      } catch (fetchError) {
+        console.error('Blog yazisi alinamadi:', fetchError)
+        setError(translateLabel(translate, 'Public.blog.notFound', 'Blog yazisi bulunamadi.'))
       } finally {
         setLoading(false)
       }
     }
 
     fetchBlogPost()
+    // `translate` yalnizca hata metni icin kullanilir; dil degisiminde yeniden istek atilmaz.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id])
 
+  const title = blogPost ? translate('::Public.' + blogPost.title) : ''
+
+  // Icerik anahtari yoksa `'::' + undefined` cevirisi "undefined" basiyordu.
+  const content = useMemo(() => {
+    if (!blogPost) {
+      return ''
+    }
+
+    const contentKey = currentLang === 'tr' ? blogPost.contentTr : blogPost.contentEn
+
+    return contentKey ? translate('::' + contentKey) : ''
+  }, [blogPost, currentLang, translate])
+
   if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={loading} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   if (error) {
-    return (
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Error: {error}</h1>
-      </div>
-    )
+    return <CenteredMessage>{error}</CenteredMessage>
   }
 
-  if (!blogPost || !postData) {
-    return (
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{translate('::Public.blog.notFound')}</h1>
-      </div>
-    )
+  if (!blogPost) {
+    return <CenteredMessage>{translate('::Public.blog.notFound')}</CenteredMessage>
   }
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
-        title={translate('::' + 'App.BlogManagement')}
+        title={title || translate('::App.BlogManagement')}
         defaultTitle={APP_NAME}
-      ></Helmet>
-      <div className="relative bg-blue-900 text-white py-12"></div>
+      />
+      <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950" />
+
       <div className="container mx-auto px-4">
         <Link
           to={ROUTES_ENUM.public.blog}
-          className="text-blue-600 hover:underline mt-4 mb-4 inline-block dark:text-blue-400"
+          className="mb-4 mt-4 inline-block text-blue-600 hover:underline dark:text-blue-400"
         >
           &larr; {translate('::App.BlogManagement')}
         </Link>
-        {postData.image && (
+
+        {blogPost.coverImage && (
           <img
-            src={postData.image}
-            alt={translate('::Public.' + blogPost.title)}
-            className="w-full h-96 object-cover rounded-lg mb-8"
+            src={blogPost.coverImage}
+            alt={title}
+            className="mb-8 h-96 w-full rounded-lg object-cover"
           />
         )}
-        <h1 className="text-4xl font-bold text-gray-900 mb-6 dark:text-gray-100">
-          {translate('::Public.' + blogPost.title)}
-        </h1>
-        <div className="flex items-center text-sm text-gray-500 space-x-4 mb-8 dark:text-gray-400">
-          <div className="flex items-center">
-            <span>{postData.author}</span>
-          </div>
-          <div className="flex items-center">
-            {blogPost.publishedAt && showDbDateAsIs(blogPost.publishedAt)}
-          </div>
+
+        <h1 className="mb-6 text-4xl font-bold text-gray-900 dark:text-gray-100">{title}</h1>
+
+        <div className="mb-8 flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
+          <span>{blogPost.author}</span>
+          <span>{showDbDateAsIs(blogPost.publishedAt || blogPost.creationTime)}</span>
         </div>
+
         <div
-          className="prose max-w-none text-gray-800 dark:prose-invert dark:text-gray-200"
-          dangerouslySetInnerHTML={{
-            __html:
-              currentLang == 'tr'
-                ? translate('::' + blogPost.contentTr!)
-                : translate('::' + blogPost.contentEn!),
-          }}
+          className="prose max-w-none pb-12 text-gray-800 dark:prose-invert dark:text-gray-200"
+          dangerouslySetInnerHTML={{ __html: content }}
         />
       </div>
     </div>
diff --git a/ui/src/views/public/Checkout.tsx b/ui/src/views/public/Checkout.tsx
index c3bad70b..793934bc 100644
--- a/ui/src/views/public/Checkout.tsx
+++ b/ui/src/views/public/Checkout.tsx
@@ -64,15 +64,7 @@ const Checkout: React.FC = () => {
       ></Helmet>
 
       {/* Hero Section */}
-      <div className="relative bg-blue-900 text-white py-12">
-        <div
-          className="absolute inset-0 opacity-20"
-          style={{
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        ></div>
-      </div>
+      <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950" />
 
       <div className="container mx-auto px-4 pt-12">
         <TenantForm onSubmit={handleTenantSubmit} onBack={handleBackToCatalog} />
diff --git a/ui/src/views/public/Contact.tsx b/ui/src/views/public/Contact.tsx
index b6f36219..0a6ae0c1 100644
--- a/ui/src/views/public/Contact.tsx
+++ b/ui/src/views/public/Contact.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
   FaPhone,
   FaBuilding,
@@ -9,18 +9,28 @@ import {
   FaEnvelope,
   FaIdCard,
 } from 'react-icons/fa'
-import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
 import { ContactDto } from '@/proxy/contact/models'
-import Loading from '@/components/shared/Loading'
 import { getContact, saveContactPage } from '@/services/contact.service'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 import { APP_NAME } from '@/constants/app.constant'
-import { useStoreActions, useStoreState } from '@/store'
-import DesignerDrawer from './designer/DesignerDrawer'
-import SelectableBlock from './designer/SelectableBlock'
-import { DesignerSelection } from './designer/types'
-import { useDesignerState } from './designer/useDesignerState'
-import { Button, Notification, toast } from '@/components/ui'
+import { PUBLIC_PAGE_DESIGN } from '@/constants/permission.constant'
+import {
+  DesignerLayer,
+  DesignerSelection,
+  SelectableBlock,
+  TranslateFn,
+  booleanField,
+  imageField,
+  resolveLocalizedValue,
+  styleField,
+  textAreaField,
+  textField,
+  translateLabel,
+  usePageDesigner,
+} from './designer'
+import { designerPageClass } from './pageStyles'
+import { PublicPageLoader } from './shared'
 
 interface ContactContent {
   heroTitle: string
@@ -68,7 +78,7 @@ interface ContactContent {
   mapSrc: string
   mapWidth: string
   mapHeight: string
-  mapAllowFullScreen: string
+  mapAllowFullScreen: boolean
   mapLoading: string
   mapReferrerPolicy: string
   mapContainerStyleClass: string
@@ -89,44 +99,28 @@ const CONTACT_HERO_SUBTITLE_STYLE_KEY = 'Public.contact.hero.subtitleStyleClass'
 const CONTACT_INFO_CARD_STYLE_KEY = 'Public.contact.info.cardStyleClass'
 const CONTACT_INFO_TITLE_STYLE_KEY = 'Public.contact.info.titleStyleClass'
 
-function isLikelyLocalizationKey(value?: string) {
-  return Boolean(value && /^[A-Za-z0-9_.-]+$/.test(value) && value.includes('.'))
-}
+const HERO_SECTION_STYLE_DEFAULT = 'relative bg-blue-900 py-12 text-white dark:bg-gray-950'
+const HERO_TITLE_STYLE_DEFAULT = 'ml-4 mb-2 mt-3 text-5xl font-bold text-white'
+const HERO_SUBTITLE_STYLE_DEFAULT = 'ml-4 max-w-3xl text-xl'
+const CARD_STYLE_DEFAULT = 'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40'
+const INFO_TITLE_STYLE_DEFAULT = 'mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100'
+const MAP_FRAME_STYLE_DEFAULT =
+  'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800'
 
-function resolveLocalizedValue(
-  translate: (key: string) => string,
-  keyOrValue: string | undefined,
-  fallback = '',
-) {
-  if (!keyOrValue) {
-    return fallback
-  }
-
-  if (!isLikelyLocalizationKey(keyOrValue)) {
-    return keyOrValue
-  }
-
-  const translatedValue = translate('::' + keyOrValue)
-  return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
-}
-
-function buildContactContent(
-  contact: ContactDto | undefined,
-  translate: (key: string) => string,
-): ContactContent {
+function buildContactContent(contact: ContactDto | undefined, translate: TranslateFn): ContactContent {
   return {
     heroTitle: resolveLocalizedValue(translate, CONTACT_HERO_TITLE_KEY, 'Contact'),
     heroTitleKey: CONTACT_HERO_TITLE_KEY,
     heroSectionStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_HERO_SECTION_STYLE_KEY,
-      'relative bg-blue-900 py-12 text-white dark:bg-gray-950',
+      HERO_SECTION_STYLE_DEFAULT,
     ),
     heroSectionStyleClassKey: CONTACT_HERO_SECTION_STYLE_KEY,
     heroTitleStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_HERO_TITLE_STYLE_KEY,
-      'ml-4 mb-2 mt-3 text-5xl font-bold text-white',
+      HERO_TITLE_STYLE_DEFAULT,
     ),
     heroTitleStyleClassKey: CONTACT_HERO_TITLE_STYLE_KEY,
     heroSubtitle: resolveLocalizedValue(translate, CONTACT_HERO_SUBTITLE_KEY),
@@ -134,7 +128,7 @@ function buildContactContent(
     heroSubtitleStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_HERO_SUBTITLE_STYLE_KEY,
-      'ml-4 max-w-3xl text-xl',
+      HERO_SUBTITLE_STYLE_DEFAULT,
     ),
     heroSubtitleStyleClassKey: CONTACT_HERO_SUBTITLE_STYLE_KEY,
     heroImage: resolveLocalizedValue(translate, CONTACT_HERO_IMAGE_KEY, CONTACT_HERO_IMAGE_DEFAULT),
@@ -144,13 +138,13 @@ function buildContactContent(
     contactInfoCardStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_INFO_CARD_STYLE_KEY,
-      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
+      CARD_STYLE_DEFAULT,
     ),
     contactInfoCardStyleClassKey: CONTACT_INFO_CARD_STYLE_KEY,
     contactInfoTitleStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_INFO_TITLE_STYLE_KEY,
-      'mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100',
+      INFO_TITLE_STYLE_DEFAULT,
     ),
     contactInfoTitleStyleClassKey: CONTACT_INFO_TITLE_STYLE_KEY,
     address: resolveLocalizedValue(translate, contact?.address, ''),
@@ -165,9 +159,7 @@ function buildContactContent(
     bankBranch: contact?.bankDto?.branch || '',
     bankAccountNumber: contact?.bankDto?.accountNumber || '',
     bankIban: contact?.bankDto?.iban || '',
-    bankStyleClass:
-      contact?.bankDto?.styleClass ||
-      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
+    bankStyleClass: contact?.bankDto?.styleClass || CARD_STYLE_DEFAULT,
     workHoursTitle: resolveLocalizedValue(translate, CONTACT_WORK_HOURS_TITLE_KEY),
     workHoursTitleKey: CONTACT_WORK_HOURS_TITLE_KEY,
     workWeekday: resolveLocalizedValue(translate, contact?.workHoursDto?.weekday, ''),
@@ -176,74 +168,92 @@ function buildContactContent(
     workWeekendKey: contact?.workHoursDto?.weekend || '',
     workWhatsapp: resolveLocalizedValue(translate, contact?.workHoursDto?.whatsapp, ''),
     workWhatsappKey: contact?.workHoursDto?.whatsapp || '',
-    workHoursStyleClass:
-      contact?.workHoursDto?.styleClass ||
-      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
+    workHoursStyleClass: contact?.workHoursDto?.styleClass || CARD_STYLE_DEFAULT,
     mapTitle: resolveLocalizedValue(translate, contact?.mapDto?.title, ''),
     mapTitleKey: contact?.mapDto?.title || '',
     mapSrc: contact?.mapDto?.src || '',
     mapWidth: contact?.mapDto?.width || '100%',
     mapHeight: contact?.mapDto?.height || '700',
-    mapAllowFullScreen: String(contact?.mapDto?.allowFullScreen ?? true),
+    mapAllowFullScreen: contact?.mapDto?.allowFullScreen ?? true,
     mapLoading: contact?.mapDto?.loading || 'lazy',
     mapReferrerPolicy: contact?.mapDto?.referrerPolicy || 'no-referrer-when-downgrade',
-    mapContainerStyleClass:
-      contact?.mapDto?.containerStyleClass ||
-      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
-    mapFrameStyleClass:
-      contact?.mapDto?.frameStyleClass ||
-      'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800',
+    mapContainerStyleClass: contact?.mapDto?.containerStyleClass || CARD_STYLE_DEFAULT,
+    mapFrameStyleClass: contact?.mapDto?.frameStyleClass || MAP_FRAME_STYLE_DEFAULT,
   }
 }
 
+function toSaveInput(content: ContactContent, cultureName: string) {
+  return {
+    cultureName,
+    heroTitleKey: content.heroTitleKey,
+    heroTitleValue: content.heroTitle,
+    heroSubtitleKey: content.heroSubtitleKey,
+    heroSubtitleValue: content.heroSubtitle,
+    heroImageKey: content.heroImageKey,
+    heroImageValue: content.heroImage,
+    contactInfoTitleKey: content.contactInfoTitleKey,
+    contactInfoTitleValue: content.contactInfoTitle,
+    addressKey: content.addressKey,
+    addressValue: content.address,
+    phoneNumber: content.phoneNumber,
+    email: content.email,
+    location: content.location,
+    taxNumber: content.taxNumber,
+    bankTitleKey: content.bankTitleKey,
+    bankTitleValue: content.bankTitle,
+    bankAccountHolder: content.bankAccountHolder,
+    bankBranch: content.bankBranch,
+    bankAccountNumber: content.bankAccountNumber,
+    bankIban: content.bankIban,
+    bankStyleClass: content.bankStyleClass,
+    workHoursTitleKey: content.workHoursTitleKey,
+    workHoursTitleValue: content.workHoursTitle,
+    workWeekdayKey: content.workWeekdayKey,
+    workWeekdayValue: content.workWeekday,
+    workWeekendKey: content.workWeekendKey,
+    workWeekendValue: content.workWeekend,
+    workWhatsappKey: content.workWhatsappKey,
+    workWhatsappValue: content.workWhatsapp,
+    workHoursStyleClass: content.workHoursStyleClass,
+    mapTitleKey: content.mapTitleKey,
+    mapTitleValue: content.mapTitle,
+    mapSrc: content.mapSrc,
+    mapWidth: content.mapWidth,
+    mapHeight: content.mapHeight,
+    mapAllowFullScreen: content.mapAllowFullScreen,
+    mapLoading: content.mapLoading,
+    mapReferrerPolicy: content.mapReferrerPolicy,
+    mapContainerStyleClass: content.mapContainerStyleClass,
+    mapFrameStyleClass: content.mapFrameStyleClass,
+    styleTexts: [
+      { key: content.heroSectionStyleClassKey, value: content.heroSectionStyleClass },
+      { key: content.heroTitleStyleClassKey, value: content.heroTitleStyleClass },
+      { key: content.heroSubtitleStyleClassKey, value: content.heroSubtitleStyleClass },
+      { key: content.contactInfoCardStyleClassKey, value: content.contactInfoCardStyleClass },
+      { key: content.contactInfoTitleStyleClassKey, value: content.contactInfoTitleStyleClass },
+    ],
+  }
+}
+
+const InfoRow: React.FC<{ icon: React.ReactNode; children: React.ReactNode }> = ({
+  icon,
+  children,
+}) => (
+  <div className="flex items-start space-x-2">
+    <span className="mt-1 flex-shrink-0 text-blue-600 dark:text-blue-400">{icon}</span>
+    <p className="text-gray-600 dark:text-gray-300">{children}</p>
+  </div>
+)
+
 const Contact: React.FC = () => {
   const { translate } = useLocalization()
-  const { setLang } = useStoreActions((actions) => actions.locale)
-  const { getConfig } = useStoreActions((actions) => actions.abpConfig)
-  const configCultureName = useStoreState(
-    (state) => state.abpConfig.config?.localization.currentCulture.cultureName,
-  )
-  const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
-  const currentLanguage = configCultureName || localeCurrentLang || 'tr'
-  const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages) || []
-  const languageOptions = abpLanguages
-    .filter((language) => Boolean(language.cultureName))
-    .map((language) => {
-      const cultureName = language.cultureName || 'tr'
-      return {
-        key: cultureName.toLowerCase().split('-')[0],
-        cultureName,
-        displayName: language.displayName || cultureName,
-      }
-    })
-  const languagesFromConfig = languageOptions.map((language) => language.key)
-  const editorLanguages = Array.from(
-    new Set((languagesFromConfig.length > 0 ? languagesFromConfig : [currentLanguage]).filter(Boolean)),
-  )
-
   const [loading, setLoading] = useState(true)
-  const [isSaving, setIsSaving] = useState(false)
-  const [isPanelVisible, setIsPanelVisible] = useState(true)
   const [contact, setContact] = useState<ContactDto>()
 
-  const initialContent = !loading ? buildContactContent(contact, translate) : null
-  const {
-    content,
-    isDesignMode,
-    selectedBlockId,
-    selectedLanguage,
-    supportedLanguages,
-    setContent,
-    setSelectedBlockId,
-    resetContent,
-  } = useDesignerState<ContactContent>('contact', initialContent, {
-    currentLanguage,
-    supportedLanguages: editorLanguages,
-  })
-
   useEffect(() => {
-    setLoading(true)
     const fetchContact = async () => {
+      setLoading(true)
+
       try {
         const result = await getContact()
         setContact(result.data)
@@ -257,24 +267,21 @@ const Contact: React.FC = () => {
     fetchContact()
   }, [])
 
-  const updateContent = (updater: (current: ContactContent) => ContactContent) => {
-    setContent((current) => {
-      if (!current) {
-        return current
-      }
+  const initialContent = useMemo(
+    () => (loading ? null : buildContactContent(contact, translate)),
+    [contact, loading, translate],
+  )
 
-      return updater(current)
-    })
-  }
+  const designer = usePageDesigner<ContactContent>({
+    pageKey: 'Contact',
+    permission: PUBLIC_PAGE_DESIGN.CONTACT,
+    initialContent,
+    onSave: (content, cultureName) => saveContactPage(toSaveInput(content, cultureName)),
+  })
 
-  const handleFieldChange = (fieldKey: string, value: string | string[]) => {
-    updateContent((current) => ({
-      ...current,
-      [fieldKey]: value as string,
-    }))
-  }
+  const { content, isDesignMode, isPanelVisible, selectedBlockId, selectBlock } = designer
 
-  const selectedSelection: DesignerSelection | null = React.useMemo(() => {
+  const selection: DesignerSelection | null = useMemo(() => {
     if (!content || !selectedBlockId) {
       return null
     }
@@ -283,44 +290,26 @@ const Contact: React.FC = () => {
       return {
         id: 'hero',
         title: 'Public.contact.hero.*',
-        description: translate('::Public.designer.desc4'),
+        description: translateLabel(
+          translate,
+          'Public.designer.desc4',
+          'Baslik, alt baslik ve arka plan gorselini guncelleyin.',
+        ),
         fields: [
-          {
-            key: 'heroTitle',
-            label: content.heroTitleKey,
-            type: 'text',
-            value: content.heroTitle,
-          },
-          {
-            key: 'heroTitleStyleClass',
-            label: content.heroTitleStyleClassKey,
-            type: 'text',
-            value: content.heroTitleStyleClass,
-          },
-          {
-            key: 'heroSubtitle',
-            label: content.heroSubtitleKey,
-            type: 'textarea',
-            value: content.heroSubtitle,
-          },
-          {
-            key: 'heroSubtitleStyleClass',
-            label: content.heroSubtitleStyleClassKey,
-            type: 'text',
-            value: content.heroSubtitleStyleClass,
-          },
-          {
-            key: 'heroImage',
-            label: content.heroImageKey,
-            type: 'image',
-            value: content.heroImage,
-          },
-          {
-            key: 'heroSectionStyleClass',
-            label: content.heroSectionStyleClassKey,
-            type: 'text',
-            value: content.heroSectionStyleClass,
-          },
+          textField('heroTitle', content.heroTitleKey, content.heroTitle),
+          textAreaField('heroSubtitle', content.heroSubtitleKey, content.heroSubtitle),
+          imageField('heroImage', content.heroImageKey, content.heroImage, { group: 'media' }),
+          styleField('heroTitleStyleClass', content.heroTitleStyleClassKey, content.heroTitleStyleClass),
+          styleField(
+            'heroSubtitleStyleClass',
+            content.heroSubtitleStyleClassKey,
+            content.heroSubtitleStyleClass,
+          ),
+          styleField(
+            'heroSectionStyleClass',
+            content.heroSectionStyleClassKey,
+            content.heroSectionStyleClass,
+          ),
         ],
       }
     }
@@ -329,56 +318,28 @@ const Contact: React.FC = () => {
       return {
         id: selectedBlockId,
         title: content.contactInfoTitleKey,
-        description: translate('::Public.designer.desc5'),
+        description: translateLabel(
+          translate,
+          'Public.designer.desc5',
+          'Iletisim bilgilerini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'contactInfoTitle',
-            label: content.contactInfoTitleKey,
-            type: 'text',
-            value: content.contactInfoTitle,
-          },
-          {
-            key: 'contactInfoTitleStyleClass',
-            label: content.contactInfoTitleStyleClassKey,
-            type: 'text',
-            value: content.contactInfoTitleStyleClass,
-          },
-          {
-            key: 'contactInfoCardStyleClass',
-            label: content.contactInfoCardStyleClassKey,
-            type: 'text',
-            value: content.contactInfoCardStyleClass,
-          },
-          {
-            key: 'address',
-            label: content.addressKey,
-            type: 'textarea',
-            value: content.address,
-          },
-          {
-            key: 'phoneNumber',
-            label: 'Public.contact.phone',
-            type: 'text',
-            value: content.phoneNumber,
-          },
-          {
-            key: 'email',
-            label: 'Public.contact.email',
-            type: 'text',
-            value: content.email,
-          },
-          {
-            key: 'location',
-            label: 'Public.contact.location.plain',
-            type: 'text',
-            value: content.location,
-          },
-          {
-            key: 'taxNumber',
-            label: 'Public.contact.taxNumber',
-            type: 'text',
-            value: content.taxNumber,
-          },
+          textField('contactInfoTitle', content.contactInfoTitleKey, content.contactInfoTitle),
+          textAreaField('address', content.addressKey || 'Public.contact.address', content.address),
+          textField('phoneNumber', 'Public.contact.phone', content.phoneNumber),
+          textField('email', 'Public.contact.email', content.email),
+          textField('location', 'Public.contact.location.plain', content.location),
+          textField('taxNumber', 'Public.contact.taxNumber', content.taxNumber),
+          styleField(
+            'contactInfoTitleStyleClass',
+            content.contactInfoTitleStyleClassKey,
+            content.contactInfoTitleStyleClass,
+          ),
+          styleField(
+            'contactInfoCardStyleClass',
+            content.contactInfoCardStyleClassKey,
+            content.contactInfoCardStyleClass,
+          ),
         ],
       }
     }
@@ -387,44 +348,14 @@ const Contact: React.FC = () => {
       return {
         id: selectedBlockId,
         title: content.bankTitleKey,
-        description: translate('::Public.designer.desc6'),
+        description: translateLabel(translate, 'Public.designer.desc6', 'Banka bilgilerini duzenleyin.'),
         fields: [
-          {
-            key: 'bankTitle',
-            label: content.bankTitleKey,
-            type: 'text',
-            value: content.bankTitle,
-          },
-          {
-            key: 'bankAccountHolder',
-            label: 'Public.contact.bank.accountHolder',
-            type: 'text',
-            value: content.bankAccountHolder,
-          },
-          {
-            key: 'bankBranch',
-            label: 'Public.contact.bank.branch',
-            type: 'text',
-            value: content.bankBranch,
-          },
-          {
-            key: 'bankAccountNumber',
-            label: 'Public.contact.bank.accountNumber',
-            type: 'text',
-            value: content.bankAccountNumber,
-          },
-          {
-            key: 'bankIban',
-            label: 'Public.contact.bank.iban',
-            type: 'text',
-            value: content.bankIban,
-          },
-          {
-            key: 'bankStyleClass',
-            label: 'Public.contact.bank.styleClass',
-            type: 'text',
-            value: content.bankStyleClass,
-          },
+          textField('bankTitle', content.bankTitleKey, content.bankTitle),
+          textField('bankAccountHolder', 'Public.contact.bank.accountHolder', content.bankAccountHolder),
+          textField('bankBranch', 'Public.contact.bank.branch', content.bankBranch),
+          textField('bankAccountNumber', 'Public.contact.bank.accountNumber', content.bankAccountNumber),
+          textField('bankIban', 'Public.contact.bank.iban', content.bankIban),
+          styleField('bankStyleClass', 'Public.contact.bank.styleClass', content.bankStyleClass),
         ],
       }
     }
@@ -433,38 +364,21 @@ const Contact: React.FC = () => {
       return {
         id: selectedBlockId,
         title: content.workHoursTitleKey,
-        description: translate('::Public.designer.desc7'),
+        description: translateLabel(
+          translate,
+          'Public.designer.desc7',
+          'Calisma saatlerini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'workHoursTitle',
-            label: content.workHoursTitleKey,
-            type: 'text',
-            value: content.workHoursTitle,
-          },
-          {
-            key: 'workWeekday',
-            label: content.workWeekdayKey,
-            type: 'text',
-            value: content.workWeekday,
-          },
-          {
-            key: 'workWeekend',
-            label: content.workWeekendKey,
-            type: 'text',
-            value: content.workWeekend,
-          },
-          {
-            key: 'workWhatsapp',
-            label: content.workWhatsappKey,
-            type: 'text',
-            value: content.workWhatsapp,
-          },
-          {
-            key: 'workHoursStyleClass',
-            label: 'Public.contact.workHours.styleClass',
-            type: 'text',
-            value: content.workHoursStyleClass,
-          },
+          textField('workHoursTitle', content.workHoursTitleKey, content.workHoursTitle),
+          textField('workWeekday', content.workWeekdayKey || 'weekday', content.workWeekday),
+          textField('workWeekend', content.workWeekendKey || 'weekend', content.workWeekend),
+          textField('workWhatsapp', content.workWhatsappKey || 'whatsapp', content.workWhatsapp),
+          styleField(
+            'workHoursStyleClass',
+            'Public.contact.workHours.styleClass',
+            content.workHoursStyleClass,
+          ),
         ],
       }
     }
@@ -472,216 +386,63 @@ const Contact: React.FC = () => {
     if (selectedBlockId === 'map') {
       return {
         id: selectedBlockId,
-        title: content.mapTitleKey,
-        description: translate('::Public.designer.desc8'),
+        title: content.mapTitleKey || 'Public.contact.map',
+        description: translateLabel(translate, 'Public.designer.desc8', 'Harita ayarlarini duzenleyin.'),
         fields: [
-          {
-            key: 'mapTitle',
-            label: content.mapTitleKey,
-            type: 'text',
-            value: content.mapTitle,
-          },
-          {
-            key: 'mapSrc',
-            label: 'Public.contact.map.src',
-            type: 'textarea',
-            value: content.mapSrc,
-          },
-          {
-            key: 'mapWidth',
-            label: 'Public.contact.map.width',
-            type: 'text',
-            value: content.mapWidth,
-          },
-          {
-            key: 'mapHeight',
-            label: 'Public.contact.map.height',
-            type: 'text',
-            value: content.mapHeight,
-          },
-          {
-            key: 'mapAllowFullScreen',
-            label: 'Public.contact.map.allowFullScreen',
-            type: 'text',
-            value: content.mapAllowFullScreen,
-            placeholder: 'true veya false',
-          },
-          {
-            key: 'mapLoading',
-            label: 'Public.contact.map.loading',
-            type: 'text',
-            value: content.mapLoading,
-          },
-          {
-            key: 'mapReferrerPolicy',
-            label: 'Public.contact.map.referrerPolicy',
-            type: 'text',
-            value: content.mapReferrerPolicy,
-          },
-          {
-            key: 'mapContainerStyleClass',
-            label: 'Public.contact.map.containerStyleClass',
-            type: 'text',
-            value: content.mapContainerStyleClass,
-          },
-          {
-            key: 'mapFrameStyleClass',
-            label: 'Public.contact.map.frameStyleClass',
-            type: 'text',
-            value: content.mapFrameStyleClass,
-          },
+          textField('mapTitle', content.mapTitleKey || 'Public.contact.map.title', content.mapTitle),
+          textAreaField('mapSrc', 'Public.contact.map.src', content.mapSrc, { group: 'media' }),
+          textField('mapWidth', 'Public.contact.map.width', content.mapWidth, { group: 'advanced' }),
+          textField('mapHeight', 'Public.contact.map.height', content.mapHeight, { group: 'advanced' }),
+          booleanField(
+            'mapAllowFullScreen',
+            'Public.contact.map.allowFullScreen',
+            content.mapAllowFullScreen,
+            { group: 'advanced' },
+          ),
+          textField('mapLoading', 'Public.contact.map.loading', content.mapLoading, {
+            group: 'advanced',
+            placeholder: 'lazy | eager',
+          }),
+          textField('mapReferrerPolicy', 'Public.contact.map.referrerPolicy', content.mapReferrerPolicy, {
+            group: 'advanced',
+          }),
+          styleField(
+            'mapContainerStyleClass',
+            'Public.contact.map.containerStyleClass',
+            content.mapContainerStyleClass,
+          ),
+          styleField(
+            'mapFrameStyleClass',
+            'Public.contact.map.frameStyleClass',
+            content.mapFrameStyleClass,
+          ),
         ],
       }
     }
 
     return null
-  }, [content, selectedBlockId])
-
-  const handleSaveAndExit = async () => {
-    if (!content || isSaving) {
-      return
-    }
-
-    setIsSaving(true)
-
-    try {
-      await saveContactPage({
-        cultureName: selectedLanguage,
-        heroTitleKey: content.heroTitleKey,
-        heroTitleValue: content.heroTitle,
-        heroSubtitleKey: content.heroSubtitleKey,
-        heroSubtitleValue: content.heroSubtitle,
-        heroImageKey: content.heroImageKey,
-        heroImageValue: content.heroImage,
-        contactInfoTitleKey: content.contactInfoTitleKey,
-        contactInfoTitleValue: content.contactInfoTitle,
-        addressKey: content.addressKey,
-        addressValue: content.address,
-        phoneNumber: content.phoneNumber,
-        email: content.email,
-        location: content.location,
-        taxNumber: content.taxNumber,
-        bankTitleKey: content.bankTitleKey,
-        bankTitleValue: content.bankTitle,
-        bankAccountHolder: content.bankAccountHolder,
-        bankBranch: content.bankBranch,
-        bankAccountNumber: content.bankAccountNumber,
-        bankIban: content.bankIban,
-        bankStyleClass: content.bankStyleClass,
-        workHoursTitleKey: content.workHoursTitleKey,
-        workHoursTitleValue: content.workHoursTitle,
-        workWeekdayKey: content.workWeekdayKey,
-        workWeekdayValue: content.workWeekday,
-        workWeekendKey: content.workWeekendKey,
-        workWeekendValue: content.workWeekend,
-        workWhatsappKey: content.workWhatsappKey,
-        workWhatsappValue: content.workWhatsapp,
-        workHoursStyleClass: content.workHoursStyleClass,
-        mapTitleKey: content.mapTitleKey,
-        mapTitleValue: content.mapTitle,
-        mapSrc: content.mapSrc,
-        mapWidth: content.mapWidth,
-        mapHeight: content.mapHeight,
-        mapAllowFullScreen: content.mapAllowFullScreen.toLowerCase() === 'true',
-        mapLoading: content.mapLoading,
-        mapReferrerPolicy: content.mapReferrerPolicy,
-        mapContainerStyleClass: content.mapContainerStyleClass,
-        mapFrameStyleClass: content.mapFrameStyleClass,
-        styleTexts: [
-          {
-            key: content.heroSectionStyleClassKey,
-            value: content.heroSectionStyleClass,
-          },
-          {
-            key: content.heroTitleStyleClassKey,
-            value: content.heroTitleStyleClass,
-          },
-          {
-            key: content.heroSubtitleStyleClassKey,
-            value: content.heroSubtitleStyleClass,
-          },
-          {
-            key: content.contactInfoCardStyleClassKey,
-            value: content.contactInfoCardStyleClass,
-          },
-          {
-            key: content.contactInfoTitleStyleClassKey,
-            value: content.contactInfoTitleStyleClass,
-          },
-        ],
-      })
-
-      await getConfig(false)
-      setSelectedBlockId(null)
-
-      toast.push(
-        <Notification type="success" duration={2000}>
-          {translate('::ListForms.FormBilgileriKaydedildi')}
-        </Notification>,
-        {
-          placement: 'bottom-end',
-        },
-      )
-
-    } catch (error) {
-      console.error('Contact tasarimi kaydedilemedi:', error)
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleLanguageChange = (language: string) => {
-    setLang(language)
-  }
-
-  const handleSelectBlock = (blockId: string) => {
-    setSelectedBlockId(blockId)
-    if (!isPanelVisible) {
-      setIsPanelVisible(true)
-    }
-  }
+  }, [content, selectedBlockId, translate])
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={loading} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
-    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+    <div className={designerPageClass(isDesignMode, isPanelVisible)}>
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::App.Contact')}
         defaultTitle={APP_NAME}
-      ></Helmet>
-
-      {isDesignMode && (
-        <div className="fixed bottom-6 left-6 z-40 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-xl">
-          Contact designer aktif
-        </div>
-      )}
-
-      {isDesignMode && !isPanelVisible && (
-        <Button
-          type="button"
-          onClick={() => setIsPanelVisible(true)}
-          className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
-        >
-          {translate('::Public.designer.showPanel')}
-        </Button>
-      )}
+      />
 
       <SelectableBlock
         id="hero"
+        label="Hero"
         isActive={selectedBlockId === 'hero'}
         isDesignMode={isDesignMode}
-        onSelect={handleSelectBlock}
+        onSelect={selectBlock}
       >
-        <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
+        <div className={content?.heroSectionStyleClass || HERO_SECTION_STYLE_DEFAULT}>
           <div
             className="absolute inset-0 opacity-20 dark:opacity-35"
             style={{
@@ -689,11 +450,15 @@ const Contact: React.FC = () => {
               backgroundSize: 'cover',
               backgroundPosition: 'center',
             }}
-          ></div>
-          <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
+          />
+          <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45" />
           <div className="container relative mx-auto pt-20">
-            <h1 className={content?.heroTitleStyleClass || 'ml-4 mb-2 mt-3 text-5xl font-bold text-white'}>{content?.heroTitle}</h1>
-            <p className={content?.heroSubtitleStyleClass || 'ml-4 max-w-3xl text-xl'}>{content?.heroSubtitle}</p>
+            <h1 className={content?.heroTitleStyleClass || HERO_TITLE_STYLE_DEFAULT}>
+              {content?.heroTitle}
+            </h1>
+            <p className={content?.heroSubtitleStyleClass || HERO_SUBTITLE_STYLE_DEFAULT}>
+              {content?.heroSubtitle}
+            </p>
           </div>
         </div>
       </SelectableBlock>
@@ -704,83 +469,70 @@ const Contact: React.FC = () => {
             <div className="space-y-4">
               <SelectableBlock
                 id="contact-info"
+                label="Contact info"
                 isActive={selectedBlockId === 'contact-info'}
                 isDesignMode={isDesignMode}
-                onSelect={handleSelectBlock}
+                onSelect={selectBlock}
               >
-                <div className={`${content?.contactInfoCardStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
-                  <h2 className={`${content?.contactInfoTitleStyleClass || 'mb-6 text-2xl font-bold text-gray-900'} dark:text-gray-100`}>{content?.contactInfoTitle}</h2>
+                <div className={content?.contactInfoCardStyleClass || CARD_STYLE_DEFAULT}>
+                  <h2 className={content?.contactInfoTitleStyleClass || INFO_TITLE_STYLE_DEFAULT}>
+                    {content?.contactInfoTitle}
+                  </h2>
                   <div className="space-y-4">
-                    <div className="flex items-start space-x-2">
-                      <FaMapMarkerAlt className="mt-1 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
-                      <div>
-                        <p className="text-gray-600 dark:text-gray-300">{content?.address}</p>
-                      </div>
-                    </div>
-                    <div className="flex items-start space-x-2">
-                      <FaPhone className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
-                      <div>
-                        <p className="text-gray-600 dark:text-gray-300">{content?.phoneNumber}</p>
-                      </div>
-                    </div>
-                    <div className="flex items-start space-x-2">
-                      <FaEnvelope className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
-                      <div>
-                        <p className="text-gray-600 dark:text-gray-300">
-                          <a href={`mailto:${content?.email}`} className="text-blue-600 hover:underline dark:text-blue-400">
-                            {content?.email}
-                          </a>
-                        </p>
-                      </div>
-                    </div>
-                    <div className="flex items-start space-x-2">
-                      <FaBuilding className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
-                      <div>
-                        <p className="text-gray-600 dark:text-gray-300">{content?.location}</p>
-                      </div>
-                    </div>
-                    <div className="flex items-start space-x-2">
-                      <FaIdCard className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
-                      <div>
-                        <p className="text-gray-600 dark:text-gray-300">{content?.taxNumber}</p>
-                      </div>
-                    </div>
+                    <InfoRow icon={<FaMapMarkerAlt className="h-5 w-5" />}>{content?.address}</InfoRow>
+                    <InfoRow icon={<FaPhone className="h-5 w-5" />}>{content?.phoneNumber}</InfoRow>
+                    <InfoRow icon={<FaEnvelope className="h-5 w-5" />}>
+                      <a
+                        href={`mailto:${content?.email}`}
+                        className="text-blue-600 hover:underline dark:text-blue-400"
+                      >
+                        {content?.email}
+                      </a>
+                    </InfoRow>
+                    <InfoRow icon={<FaBuilding className="h-5 w-5" />}>{content?.location}</InfoRow>
+                    <InfoRow icon={<FaIdCard className="h-5 w-5" />}>{content?.taxNumber}</InfoRow>
                   </div>
                 </div>
               </SelectableBlock>
 
               <SelectableBlock
                 id="bank"
+                label="Bank"
                 isActive={selectedBlockId === 'bank'}
                 isDesignMode={isDesignMode}
-                onSelect={handleSelectBlock}
+                onSelect={selectBlock}
               >
-                <div className={`${content?.bankStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
-                  <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.bankTitle}</h2>
-                  <div className="mb-2">
-                    <img
-                      src="/img/enpara.svg"
-                      alt="Enpara Logo"
-                      className="mt-1 w-24 flex-shrink-0 object-contain"
-                    />
-                    <div>
-                      <h3 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">{content?.bankAccountHolder}</h3>
-                      <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankBranch}</p>
-                      <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankAccountNumber}</p>
-                      <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankIban}</p>
-                    </div>
-                  </div>
+                <div className={content?.bankStyleClass || CARD_STYLE_DEFAULT}>
+                  <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
+                    {content?.bankTitle}
+                  </h2>
+                  <img
+                    src="/img/enpara.svg"
+                    alt={content?.bankAccountHolder || 'Bank'}
+                    className="mb-2 w-24 object-contain"
+                  />
+                  <h3 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">
+                    {content?.bankAccountHolder}
+                  </h3>
+                  <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankBranch}</p>
+                  <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">
+                    {content?.bankAccountNumber}
+                  </p>
+                  <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankIban}</p>
                 </div>
               </SelectableBlock>
 
               <SelectableBlock
                 id="work-hours"
+                label="Work hours"
                 isActive={selectedBlockId === 'work-hours'}
                 isDesignMode={isDesignMode}
-                onSelect={handleSelectBlock}
+                onSelect={selectBlock}
               >
-                <div className={`${content?.workHoursStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
-                  <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.workHoursTitle}</h2>
+                <div className={content?.workHoursStyleClass || CARD_STYLE_DEFAULT}>
+                  <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
+                    {content?.workHoursTitle}
+                  </h2>
                   <div className="space-y-2">
                     <div className="flex items-center space-x-2">
                       <FaCalendarAlt className="h-5 w-5 text-blue-500 dark:text-blue-400" />
@@ -801,22 +553,30 @@ const Contact: React.FC = () => {
 
             <SelectableBlock
               id="map"
+              label="Map"
               isActive={selectedBlockId === 'map'}
               isDesignMode={isDesignMode}
-              onSelect={handleSelectBlock}
+              onSelect={selectBlock}
             >
-              <div className={`${content?.mapContainerStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
-                <h2 className="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.mapTitle}</h2>
-                <div className={`${content?.mapFrameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200'} dark:bg-gray-800`}>
-                  <iframe
-                    src={content?.mapSrc}
-                    width={content?.mapWidth}
-                    style={{ border: 0 }}
-                    height={content?.mapHeight}
-                    allowFullScreen={(content?.mapAllowFullScreen || '').toLowerCase() === 'true'}
-                    loading={content?.mapLoading as 'lazy' | 'eager' | undefined}
-                    referrerPolicy={content?.mapReferrerPolicy as React.HTMLAttributeReferrerPolicy | undefined}
-                  ></iframe>
+              <div className={content?.mapContainerStyleClass || CARD_STYLE_DEFAULT}>
+                <h2 className="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
+                  {content?.mapTitle}
+                </h2>
+                <div className={content?.mapFrameStyleClass || MAP_FRAME_STYLE_DEFAULT}>
+                  {content?.mapSrc && (
+                    <iframe
+                      title={content.mapTitle || 'map'}
+                      src={content.mapSrc}
+                      width={content.mapWidth}
+                      height={content.mapHeight}
+                      style={{ border: 0 }}
+                      allowFullScreen={content.mapAllowFullScreen}
+                      loading={content.mapLoading === 'eager' ? 'eager' : 'lazy'}
+                      referrerPolicy={
+                        content.mapReferrerPolicy as React.HTMLAttributeReferrerPolicy | undefined
+                      }
+                    />
+                  )}
                 </div>
               </div>
             </SelectableBlock>
@@ -824,26 +584,7 @@ const Contact: React.FC = () => {
         </div>
       </div>
 
-      <DesignerDrawer
-        isOpen={isDesignMode && isPanelVisible}
-        selection={selectedSelection}
-        pageTitle="Contact"
-        selectedLanguage={selectedLanguage}
-        languages={
-          languageOptions.length > 0
-            ? languageOptions
-            : supportedLanguages.map((language) => ({
-                key: language,
-                cultureName: language,
-                displayName: language.toUpperCase(),
-              }))
-        }
-        onClose={() => setIsPanelVisible(false)}
-        onSave={handleSaveAndExit}
-        onLanguageChange={handleLanguageChange}
-        onReset={resetContent}
-        onFieldChange={handleFieldChange}
-      />
+      <DesignerLayer pageTitle="Contact" selection={selection} designer={designer} />
     </div>
   )
 }
diff --git a/ui/src/views/public/Demo.tsx b/ui/src/views/public/Demo.tsx
index 7e684ded..717353a7 100644
--- a/ui/src/views/public/Demo.tsx
+++ b/ui/src/views/public/Demo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react'
 import {
   FaBuilding,
   FaUser,
@@ -8,176 +8,231 @@ import {
   FaUsers,
   FaRegComment,
   FaPaperPlane,
-  FaCheckCircle
-} from 'react-icons/fa';
-import { useLocalization } from "@/utils/hooks/useLocalization";
-import { createDemoAsync } from "@/services/demo.service";
-import { DemoDto } from "@/proxy/demo/models";
-import { Button } from "@/components/ui";
+  FaCheckCircle,
+} from 'react-icons/fa'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { createDemoAsync } from '@/services/demo.service'
+import { DemoDto } from '@/proxy/demo/models'
+import { Button, Notification, toast } from '@/components/ui'
+import { translateLabel } from './designer'
 
 interface DemoModalProps {
-  isOpen: boolean;
-  onClose: () => void;
+  isOpen: boolean
+  onClose: () => void
 }
 
+type DemoErrors = Partial<Record<keyof DemoDto, string>>
+
+const NUMERIC_FIELDS: Array<keyof DemoDto> = ['numberOfBranches', 'numberOfUsers']
+
+function createEmptyForm(): DemoDto {
+  return {
+    id: crypto.randomUUID(),
+    organizationName: '',
+    name: '',
+    email: '',
+    phoneNumber: '',
+    address: '',
+    numberOfBranches: 0,
+    numberOfUsers: 0,
+    message: '',
+  }
+}
+
+const inputClass = (hasError: boolean) =>
+  `w-full rounded-xl border bg-gray-50 py-2.5 pl-11 pr-4 text-gray-800 placeholder-gray-500 transition-all duration-300 focus:outline-none dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 ${
+    hasError
+      ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20'
+      : 'border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700'
+  }`
+
+interface FieldProps {
+  label: string
+  error?: string
+  icon: React.ReactNode
+  children: React.ReactNode
+}
+
+const Field: React.FC<FieldProps> = ({ label, error, icon, children }) => (
+  <div>
+    <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-200">
+      {label} *
+    </label>
+    <div className="relative">
+      <span className="absolute left-3 top-3 h-5 w-5 text-gray-400">{icon}</span>
+      {children}
+    </div>
+    {error && <p className="mt-1 text-xs text-red-600 dark:text-red-400">{error}</p>}
+  </div>
+)
 
 const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
   const { translate } = useLocalization()
-
-  const [formData, setFormData] = useState<DemoDto>({
-    id: crypto.randomUUID(),
-    organizationName: "",
-    name: "",
-    email: "",
-    phoneNumber: "",
-    address: "",
-    numberOfBranches: 0,
-    numberOfUsers: 0,
-    message: "",
-  });
-
-  const [errors, setErrors] = useState<Partial<DemoDto>>({});
-  const [isSubmitted, setIsSubmitted] = useState(false);
-
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-
-    if (errors[name as keyof DemoDto]) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: "",
-      }));
-    }
-  };
-
-  const validateForm = (): boolean => {
-    const newErrors: Partial<DemoDto> = {};
-
-    if (!formData.organizationName.trim())
-      newErrors.organizationName = "Organization name is required";
-    if (!formData.name.trim()) newErrors.name = "Full name is required";
-    if (!formData.email.trim()) {
-      newErrors.email = "Email is required";
-    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = "Please enter a valid email";
-    }
-    if (!formData.phoneNumber.trim()) newErrors.phoneNumber = "Phone number is required";
-    if (!formData.address.trim()) newErrors.address = "Address is required";
-    if (!formData.message.trim()) newErrors.message = "Message is required";
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!validateForm()) return;
-
-    try {
-      await createDemoAsync(formData);
-      setIsSubmitted(true);
-      onClose(); // modal'ı otomatik kapat
-    } catch (error) {
-      console.error("Gönderim hatası:", error);
-      alert("Sunucuya ulaşılamıyor.");
-    }
-  };
+  const [formData, setFormData] = useState<DemoDto>(createEmptyForm)
+  const [errors, setErrors] = useState<DemoErrors>({})
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const firstFieldRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      window.addEventListener("keydown", handleKeyDown);
+    if (!isOpen) {
+      return
     }
 
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    firstFieldRef.current?.focus()
+
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  const requiredMessage = translateLabel(
+    translate,
+    'App.Validation.Required',
+    'Bu alan zorunludur.',
+  )
+
+  const handleInputChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = event.target
+    const key = name as keyof DemoDto
+
+    setFormData((previous) => ({
+      ...previous,
+      // Sayisal alanlar string olarak saklanirsa sunucu tarafinda tip hatasi olusuyor.
+      [key]: NUMERIC_FIELDS.includes(key) ? Number(value) || 0 : value,
+    }))
+
+    setErrors((previous) => (previous[key] ? { ...previous, [key]: undefined } : previous))
+  }
+
+  const validateForm = () => {
+    const nextErrors: DemoErrors = {}
+
+    if (!formData.organizationName.trim()) nextErrors.organizationName = requiredMessage
+    if (!formData.name.trim()) nextErrors.name = requiredMessage
+    if (!formData.email.trim()) {
+      nextErrors.email = requiredMessage
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      nextErrors.email = translateLabel(
+        translate,
+        'App.Validation.InvalidEmail',
+        'Gecerli bir e-posta adresi girin.',
+      )
+    }
+    if (!formData.phoneNumber.trim()) nextErrors.phoneNumber = requiredMessage
+    if (!formData.address.trim()) nextErrors.address = requiredMessage
+    if (!formData.message.trim()) nextErrors.message = requiredMessage
+
+    setErrors(nextErrors)
+
+    return Object.keys(nextErrors).length === 0
+  }
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    if (isSubmitting || !validateForm()) {
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      await createDemoAsync(formData)
+      setIsSubmitted(true)
+    } catch (error) {
+      console.error('Demo talebi gonderilemedi:', error)
+
+      toast.push(
+        <Notification type="danger" duration={4000}>
+          {translateLabel(translate, 'App.Errors.ServerUnreachable', 'Sunucuya ulasilamiyor.')}
+        </Notification>,
+        { placement: 'bottom-end' },
+      )
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const resetForm = () => {
+    setIsSubmitted(false)
+    setErrors({})
+    setFormData(createEmptyForm())
+  }
+
+  if (!isOpen && !isSubmitted) {
+    return null
+  }
 
-  // 🎉 Gönderim sonrası teşekkür ekranı
   if (isSubmitted) {
     return (
-      <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50 dark:bg-gray-950/70">
-        <div className="mx-auto bg-white rounded-xl shadow-lg max-w-md w-full relative dark:bg-gray-900">
-          <div className="max-w-md w-full bg-gradient-to-br from-blue-50 to-indigo-100 rounded-3xl p-8 text-center border border-blue-200 shadow-xl dark:from-gray-900 dark:to-gray-800 dark:border-gray-700">
-            {/* Kapat Butonu */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="fixed inset-0 z-50 overflow-y-auto bg-gray-600/50 py-5 dark:bg-gray-950/70"
+      >
+        <div className="relative mx-auto w-full max-w-md rounded-xl bg-white shadow-lg dark:bg-gray-900">
+          <div className="w-full rounded-3xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-100 p-8 text-center shadow-xl dark:border-gray-700 dark:from-gray-900 dark:to-gray-800">
             <Button
-              onClick={() => setIsSubmitted(false)}
               variant="plain"
               shape="circle"
-              className="absolute top-4 right-4 !h-8 !w-8 !px-0 text-2xl text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
+              aria-label={translate('::Close')}
+              className="absolute right-4 top-4 !h-8 !w-8 !px-0 text-2xl text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
+              onClick={() => {
+                resetForm()
+                onClose()
+              }}
             >
               &times;
             </Button>
-            
-            <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
-              <FaCheckCircle className="w-8 h-8 text-white" />
+
+            <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500">
+              <FaCheckCircle className="h-8 w-8 text-white" />
             </div>
-            <h2 className="text-2xl font-bold text-gray-800 mb-4 dark:text-gray-100">
+            <h2 className="mb-4 text-2xl font-bold text-gray-800 dark:text-gray-100">
               {translate('::Public.demo.thankYou')}
             </h2>
-            <p className="text-gray-600 mb-6 dark:text-gray-300">
+            <p className="mb-6 text-gray-600 dark:text-gray-300">
               {translate('::Public.demo.resultMessage')}
             </p>
-            <Button
-              onClick={() => {
-                setIsSubmitted(false);
-                setFormData({
-                  id: crypto.randomUUID(),
-                  organizationName: "",
-                  name: "",
-                  email: "",
-                  phoneNumber: "",
-                  address: "",
-                  numberOfBranches: 0,
-                  numberOfUsers: 0,
-                  message: "",
-                });
-              }}
-              variant="solid"
-            >
+            <Button variant="solid" onClick={resetForm}>
               {translate('::Public.demo.newDemo')}
             </Button>
           </div>
         </div>
       </div>
-    );
+    )
   }
 
-  // Modal kapalıysa render etme
-  if (!isOpen) return null;
-
-  // 🎯 Normal form ekranı
   return (
-    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50 dark:bg-gray-950/70">
-      <div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative dark:bg-gray-900">
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={translate('::Public.demo.title')}
+      className="fixed inset-0 z-50 overflow-y-auto bg-gray-600/50 py-5 dark:bg-gray-950/70"
+    >
+      <div className="relative mx-auto w-full max-w-2xl rounded-xl bg-white shadow-lg dark:bg-gray-900">
         <Button
-          onClick={onClose}
-          title="Kapat"
-          aria-label="Kapat"
+          aria-label={translate('::Close')}
           variant="default"
           shape="circle"
-          size="lg"
-          className="absolute top-4 right-4 !h-8 !w-8 !px-0 bg-gray-900 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
+          className="absolute right-4 top-4 z-10 !h-8 !w-8 !px-0"
+          onClick={onClose}
         >
           &times;
         </Button>
 
         <form
+          noValidate
+          className="rounded-3xl border border-gray-100 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-900 lg:p-8"
           onSubmit={handleSubmit}
-          className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100 dark:border-gray-700 dark:bg-gray-900"
         >
           <div className="mb-6 pr-10">
             <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
@@ -189,190 +244,137 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
           </div>
 
           <div className="space-y-3">
-            {/* Organization Name */}
-            <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                {translate('::Public.common.company')} *
-              </label>
-              <div className="relative">
-                <FaBuilding className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <Field
+              label={translate('::Public.common.company')}
+              error={errors.organizationName}
+              icon={<FaBuilding className="h-5 w-5" />}
+            >
+              <input
+                ref={firstFieldRef}
+                type="text"
+                name="organizationName"
+                value={formData.organizationName}
+                className={inputClass(Boolean(errors.organizationName))}
+                placeholder={translate('::Public.demo.organizationName')}
+                onChange={handleInputChange}
+              />
+            </Field>
+
+            <Field
+              label={translate('::Public.common.fullName')}
+              error={errors.name}
+              icon={<FaUser className="h-5 w-5" />}
+            >
+              <input
+                type="text"
+                name="name"
+                value={formData.name}
+                className={inputClass(Boolean(errors.name))}
+                placeholder={translate('::Public.demo.fullName')}
+                onChange={handleInputChange}
+              />
+            </Field>
+
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <Field
+                label={translate('::Abp.Account.EmailAddress')}
+                error={errors.email}
+                icon={<FaEnvelope className="h-5 w-5" />}
+              >
                 <input
-                  type="text"
-                  autoFocus
-                  name="organizationName"
-                  value={formData.organizationName}
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  className={inputClass(Boolean(errors.email))}
+                  placeholder={translate('::Public.demo.email')}
                   onChange={handleInputChange}
-                  className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                    errors.organizationName
-                      ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                      : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                  placeholder={translate('::Public.demo.organizationName')}
                 />
-              </div>
-            </div>
+              </Field>
 
-            {/* Full Name */}
-            <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                {translate('::Public.common.fullName')} *
-              </label>
-              <div className="relative">
-                <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <Field
+                label={translate('::Abp.Identity.User.UserInformation.PhoneNumber')}
+                error={errors.phoneNumber}
+                icon={<FaPhone className="h-5 w-5" />}
+              >
                 <input
-                  type="text"
-                  name="fullName"
-                  value={formData.name}
+                  type="tel"
+                  name="phoneNumber"
+                  value={formData.phoneNumber}
+                  className={inputClass(Boolean(errors.phoneNumber))}
+                  placeholder={translate('::Public.demo.phoneNumber')}
                   onChange={handleInputChange}
-                  className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                    errors.name
-                      ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                      : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                  placeholder={translate('::Public.demo.fullName')}
                 />
-              </div>
+              </Field>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                  {translate('::Abp.Account.EmailAddress')} *
-                </label>
-                <div className="relative">
-                  <FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                  <input
-                    type="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleInputChange}
-                    className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                      errors.email
-                        ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                        : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                    placeholder={translate('::Public.demo.email')}
-                  />
-                </div>
-              </div>
+            <Field
+              label={translate('::App.Address')}
+              error={errors.address}
+              icon={<FaMapPin className="h-5 w-5" />}
+            >
+              <textarea
+                name="address"
+                rows={3}
+                value={formData.address}
+                className={inputClass(Boolean(errors.address))}
+                placeholder={translate('::Public.demo.address')}
+                onChange={handleInputChange}
+              />
+            </Field>
 
-              <div>
-                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                  {translate('::Abp.Identity.User.UserInformation.PhoneNumber')} *
-                </label>
-                <div className="relative">
-                  <FaPhone className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                  <input
-                    type="tel"
-                    name="phoneNumber"
-                    value={formData.phoneNumber}
-                    onChange={handleInputChange}
-                    className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                      errors.phoneNumber
-                        ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                        : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                    placeholder={translate('::Public.demo.phoneNumber')}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Address */}
-            <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                {translate('::App.Address')} *
-              </label>
-              <div className="relative">
-                <FaMapPin className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
-                <textarea
-                  name="address"
-                  value={formData.address}
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <Field
+                label={translate('::Public.common.branchCount')}
+                error={errors.numberOfBranches}
+                icon={<FaBuilding className="h-5 w-5" />}
+              >
+                <input
+                  type="number"
+                  min={0}
+                  name="numberOfBranches"
+                  value={formData.numberOfBranches}
+                  className={inputClass(Boolean(errors.numberOfBranches))}
+                  placeholder={translate('::Public.demo.branches')}
                   onChange={handleInputChange}
-                  rows={3}
-                  className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                    errors.address
-                      ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                      : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                  placeholder={translate('::Public.demo.address')}
                 />
-              </div>
-            </div>
+              </Field>
 
-            {/* Branches & Users Row */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                  {translate('::Public.common.branchCount')} *
-                </label>
-                <div className="relative">
-                  <FaBuilding className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                  <input
-                    type="number"
-                    name="numberOfBranches"
-                    value={formData.numberOfBranches}
-                    onChange={handleInputChange}
-                    className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                      errors.numberOfBranches
-                        ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                        : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                    placeholder={translate('::Public.demo.branches')}
-                    min="1"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                  {translate('::Public.common.userCount')} *
-                </label>
-                <div className="relative">
-                  <FaUsers className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                  <input
-                    type="number"
-                    name="numberOfUsers"
-                    value={formData.numberOfUsers}
-                    onChange={handleInputChange}
-                    className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                      errors.numberOfUsers
-                        ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                        : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                    placeholder={translate('::Public.demo.users')}
-                    min="1"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Message */}
-            <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
-                {translate('::Public.common.message')} *
-              </label>
-              <div className="relative">
-                <FaRegComment className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
-                <textarea
-                  name="message"
-                  value={formData.message}
+              <Field
+                label={translate('::Public.common.userCount')}
+                error={errors.numberOfUsers}
+                icon={<FaUsers className="h-5 w-5" />}
+              >
+                <input
+                  type="number"
+                  min={0}
+                  name="numberOfUsers"
+                  value={formData.numberOfUsers}
+                  className={inputClass(Boolean(errors.numberOfUsers))}
+                  placeholder={translate('::Public.demo.users')}
                   onChange={handleInputChange}
-                  rows={3}
-                  className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
-                    errors.message
-                      ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-                      : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 resize-none dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
-                  placeholder={translate('::Public.demo.message')}
                 />
-              </div>
+              </Field>
             </div>
 
-            {/* Submit Button */}
+            <Field
+              label={translate('::Public.common.message')}
+              error={errors.message}
+              icon={<FaRegComment className="h-5 w-5" />}
+            >
+              <textarea
+                name="message"
+                rows={3}
+                value={formData.message}
+                className={`${inputClass(Boolean(errors.message))} resize-none`}
+                placeholder={translate('::Public.demo.message')}
+                onChange={handleInputChange}
+              />
+            </Field>
+
             <Button
               type="submit"
               variant="plain"
+              loading={isSubmitting}
               icon={<FaPaperPlane className="h-5 w-5" />}
               className="w-full !h-auto !justify-center !rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 !px-6 !py-4 font-semibold text-white transition-all duration-300 hover:scale-[1.02] hover:from-blue-700 hover:to-purple-700 hover:shadow-lg"
             >
@@ -382,7 +384,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
         </form>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Demo;
+export default Demo
diff --git a/ui/src/views/public/Home.tsx b/ui/src/views/public/Home.tsx
index 0110890a..e8690e17 100644
--- a/ui/src/views/public/Home.tsx
+++ b/ui/src/views/public/Home.tsx
@@ -1,24 +1,31 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import {
-  FaArrowRight,
-  FaChevronLeft,
-  FaChevronRight,
-} from 'react-icons/fa'
+import { FaArrowRight, FaChevronLeft, FaChevronRight } from 'react-icons/fa'
+import { Helmet } from 'react-helmet'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ROUTES_ENUM } from '@/routes/route.constant'
-import { Helmet } from 'react-helmet'
 import { APP_NAME } from '@/constants/app.constant'
-import { useStoreActions, useStoreState } from '@/store'
-import Loading from '@/components/shared/Loading'
-import navigationIcon from '@/proxy/menus/navigation-icon.config'
-import DesignerDrawer from './designer/DesignerDrawer'
-import SelectableBlock from './designer/SelectableBlock'
-import { DesignerSelection } from './designer/types'
-import { useDesignerState } from './designer/useDesignerState'
-import { getHome, HomeDto, saveHomePage } from '@/services/home.service'
-import { Button, Notification, toast } from '@/components/ui'
+import { PUBLIC_PAGE_DESIGN } from '@/constants/permission.constant'
+import { Button } from '@/components/ui'
 import { useOptionalDemo } from '@/contexts/DemoContext'
+import { getHome, HomeDto, saveHomePage } from '@/services/home.service'
+import {
+  DesignerLayer,
+  DesignerField,
+  DesignerSelection,
+  SelectableBlock,
+  TranslateFn,
+  iconField,
+  imageField,
+  resolveLocalizedValue,
+  styleField,
+  textAreaField,
+  textField,
+  translateLabel,
+  usePageDesigner,
+} from './designer'
+import { designerPageClass } from './pageStyles'
+import { PageIcon, PublicPageLoader } from './shared'
 
 interface HomeSlideServiceContent {
   icon: string
@@ -38,7 +45,7 @@ interface HomeSlideContent {
   services: HomeSlideServiceContent[]
 }
 
-interface HomeFeatureContent {
+interface HomeCardContent {
   icon: string
   title: string
   titleKey: string
@@ -47,14 +54,8 @@ interface HomeFeatureContent {
   styleClass: string
 }
 
-interface HomeSolutionContent {
-  icon: string
+interface HomeSolutionContent extends HomeCardContent {
   colorClass: string
-  title: string
-  titleKey: string
-  description: string
-  descriptionKey: string
-  styleClass: string
 }
 
 interface HomeContent {
@@ -97,10 +98,12 @@ interface HomeContent {
   ctaButtonStyle: string
   ctaButtonStyleKey: string
   slides: HomeSlideContent[]
-  features: HomeFeatureContent[]
+  features: HomeCardContent[]
   solutions: HomeSolutionContent[]
 }
 
+const SLIDE_INTERVAL_MS = 10000
+
 const HOME_HERO_DEFAULT_IMAGE =
   'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1920'
 const HOME_HERO_PRIMARY_CTA_STYLE_KEY = 'Public.home.hero.primaryCta.style'
@@ -113,51 +116,26 @@ const HOME_CTA_TITLE_STYLE_KEY = 'Public.home.cta.title.style'
 const HOME_CTA_SUBTITLE_STYLE_KEY = 'Public.home.cta.subtitle.style'
 const HOME_CTA_BUTTON_STYLE_KEY = 'Public.home.cta.button.style'
 
-const HOME_HERO_PRIMARY_CTA_STYLE_DEFAULT =
+const HERO_PRIMARY_CTA_STYLE_DEFAULT =
   'inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105'
-const HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT =
+const HERO_SECONDARY_CTA_STYLE_DEFAULT =
   'inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105'
-const HOME_FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
-const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
-const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
-const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
-const HOME_CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold text-white mb-4'
-const HOME_CTA_SUBTITLE_STYLE_DEFAULT = 'text-white text-lg mb-8'
-const HOME_CTA_BUTTON_STYLE_DEFAULT =
-  'bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors'
-const HOME_SLIDE_STYLE_DEFAULT = 'max-w-4xl mx-auto text-center'
-const HOME_SLIDE_SERVICE_STYLE_DEFAULT =
+const FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
+const FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
+const SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
+const SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
+const CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold text-white mb-4'
+const CTA_SUBTITLE_STYLE_DEFAULT = 'text-white text-lg mb-8'
+const CTA_BUTTON_STYLE_DEFAULT =
+  'inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors'
+const SLIDE_STYLE_DEFAULT = 'max-w-4xl mx-auto text-center'
+const SLIDE_SERVICE_STYLE_DEFAULT =
   'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all'
-const HOME_FEATURE_CARD_STYLE_DEFAULT =
+const FEATURE_CARD_STYLE_DEFAULT =
   'p-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-shadow dark:shadow-gray-950/40'
-const HOME_SOLUTION_CARD_STYLE_DEFAULT = 'p-8 h-full rounded-2xl'
-
-function isLikelyLocalizationKey(value?: string) {
-  return Boolean(value && /^[A-Za-z0-9_.-]+$/.test(value) && value.includes('.'))
-}
-
-function resolveLocalizedValue(
-  translate: (key: string) => string,
-  keyOrValue: string | undefined,
-  fallback = '',
-) {
-  if (!keyOrValue) {
-    return fallback
-  }
-
-  if (!isLikelyLocalizationKey(keyOrValue)) {
-    return keyOrValue
-  }
-
-  const translatedValue = translate('::' + keyOrValue)
-  return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
-}
-
-function buildHomeContent(home: HomeDto | undefined, translate: (key: string) => string): HomeContent {
-  const slideItems = home?.slidesDto || []
-  const featureItems = home?.featuresDto || []
-  const solutionItems = home?.solutionsDto || []
+const SOLUTION_CARD_STYLE_DEFAULT = 'p-8 h-full rounded-2xl'
 
+function buildHomeContent(home: HomeDto | undefined, translate: TranslateFn): HomeContent {
   return {
     heroBackgroundImage: resolveLocalizedValue(
       translate,
@@ -170,7 +148,7 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     heroPrimaryCtaStyle: resolveLocalizedValue(
       translate,
       HOME_HERO_PRIMARY_CTA_STYLE_KEY,
-      HOME_HERO_PRIMARY_CTA_STYLE_DEFAULT,
+      HERO_PRIMARY_CTA_STYLE_DEFAULT,
     ),
     heroPrimaryCtaStyleKey: HOME_HERO_PRIMARY_CTA_STYLE_KEY,
     heroSecondaryCtaLabel: resolveLocalizedValue(translate, home?.heroSecondaryCtaKey, ''),
@@ -178,7 +156,7 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     heroSecondaryCtaStyle: resolveLocalizedValue(
       translate,
       HOME_HERO_SECONDARY_CTA_STYLE_KEY,
-      HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT,
+      HERO_SECONDARY_CTA_STYLE_DEFAULT,
     ),
     heroSecondaryCtaStyleKey: HOME_HERO_SECONDARY_CTA_STYLE_KEY,
     featuresTitle: resolveLocalizedValue(translate, home?.featuresTitleKey, ''),
@@ -186,7 +164,7 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     featuresTitleStyle: resolveLocalizedValue(
       translate,
       HOME_FEATURES_TITLE_STYLE_KEY,
-      HOME_FEATURES_TITLE_STYLE_DEFAULT,
+      FEATURES_TITLE_STYLE_DEFAULT,
     ),
     featuresTitleStyleKey: HOME_FEATURES_TITLE_STYLE_KEY,
     featuresSubtitle: resolveLocalizedValue(translate, home?.featuresSubtitleKey, ''),
@@ -194,7 +172,7 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     featuresSubtitleStyle: resolveLocalizedValue(
       translate,
       HOME_FEATURES_SUBTITLE_STYLE_KEY,
-      HOME_FEATURES_SUBTITLE_STYLE_DEFAULT,
+      FEATURES_SUBTITLE_STYLE_DEFAULT,
     ),
     featuresSubtitleStyleKey: HOME_FEATURES_SUBTITLE_STYLE_KEY,
     solutionsTitle: resolveLocalizedValue(translate, home?.solutionsTitleKey, ''),
@@ -202,7 +180,7 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     solutionsTitleStyle: resolveLocalizedValue(
       translate,
       HOME_SOLUTIONS_TITLE_STYLE_KEY,
-      HOME_SOLUTIONS_TITLE_STYLE_DEFAULT,
+      SOLUTIONS_TITLE_STYLE_DEFAULT,
     ),
     solutionsTitleStyleKey: HOME_SOLUTIONS_TITLE_STYLE_KEY,
     solutionsSubtitle: resolveLocalizedValue(translate, home?.solutionsSubtitleKey, ''),
@@ -210,23 +188,19 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     solutionsSubtitleStyle: resolveLocalizedValue(
       translate,
       HOME_SOLUTIONS_SUBTITLE_STYLE_KEY,
-      HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT,
+      SOLUTIONS_SUBTITLE_STYLE_DEFAULT,
     ),
     solutionsSubtitleStyleKey: HOME_SOLUTIONS_SUBTITLE_STYLE_KEY,
     ctaTitle: resolveLocalizedValue(translate, home?.ctaTitleKey, ''),
     ctaTitleKey: home?.ctaTitleKey || '',
-    ctaTitleStyle: resolveLocalizedValue(
-      translate,
-      HOME_CTA_TITLE_STYLE_KEY,
-      HOME_CTA_TITLE_STYLE_DEFAULT,
-    ),
+    ctaTitleStyle: resolveLocalizedValue(translate, HOME_CTA_TITLE_STYLE_KEY, CTA_TITLE_STYLE_DEFAULT),
     ctaTitleStyleKey: HOME_CTA_TITLE_STYLE_KEY,
     ctaSubtitle: resolveLocalizedValue(translate, home?.ctaSubtitleKey, ''),
     ctaSubtitleKey: home?.ctaSubtitleKey || '',
     ctaSubtitleStyle: resolveLocalizedValue(
       translate,
       HOME_CTA_SUBTITLE_STYLE_KEY,
-      HOME_CTA_SUBTITLE_STYLE_DEFAULT,
+      CTA_SUBTITLE_STYLE_DEFAULT,
     ),
     ctaSubtitleStyleKey: HOME_CTA_SUBTITLE_STYLE_KEY,
     ctaButtonLabel: resolveLocalizedValue(translate, home?.ctaButtonLabelKey, ''),
@@ -234,94 +208,140 @@ function buildHomeContent(home: HomeDto | undefined, translate: (key: string) =>
     ctaButtonStyle: resolveLocalizedValue(
       translate,
       HOME_CTA_BUTTON_STYLE_KEY,
-      HOME_CTA_BUTTON_STYLE_DEFAULT,
+      CTA_BUTTON_STYLE_DEFAULT,
     ),
     ctaButtonStyleKey: HOME_CTA_BUTTON_STYLE_KEY,
-    slides: slideItems.map((slide) => ({
+    slides: (home?.slidesDto ?? []).map((slide) => ({
       title: resolveLocalizedValue(translate, slide.titleKey, slide.titleKey),
       titleKey: slide.titleKey || '',
       subtitle: resolveLocalizedValue(translate, slide.subtitleKey, slide.subtitleKey),
       subtitleKey: slide.subtitleKey || '',
-      styleClass: slide.styleClass || HOME_SLIDE_STYLE_DEFAULT,
-      services: (slide.services || []).map((service) => ({
+      styleClass: slide.styleClass || SLIDE_STYLE_DEFAULT,
+      services: (slide.services ?? []).map((service) => ({
         icon: service.icon || '',
         title: resolveLocalizedValue(translate, service.titleKey, service.titleKey),
         titleKey: service.titleKey || '',
         description: resolveLocalizedValue(translate, service.descriptionKey, service.descriptionKey),
         descriptionKey: service.descriptionKey || '',
-        styleClass: service.styleClass || HOME_SLIDE_SERVICE_STYLE_DEFAULT,
+        styleClass: service.styleClass || SLIDE_SERVICE_STYLE_DEFAULT,
       })),
     })),
-    features: featureItems.map((feature) => ({
+    features: (home?.featuresDto ?? []).map((feature) => ({
       icon: feature.icon || '',
       title: resolveLocalizedValue(translate, feature.titleKey, feature.titleKey),
       titleKey: feature.titleKey || '',
       description: resolveLocalizedValue(translate, feature.descriptionKey, feature.descriptionKey),
       descriptionKey: feature.descriptionKey || '',
-      styleClass: feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT,
+      styleClass: feature.styleClass || FEATURE_CARD_STYLE_DEFAULT,
     })),
-    solutions: solutionItems.map((solution) => ({
+    solutions: (home?.solutionsDto ?? []).map((solution) => ({
       icon: solution.icon || '',
       colorClass: solution.colorClass || '',
       title: resolveLocalizedValue(translate, solution.titleKey, solution.titleKey),
       titleKey: solution.titleKey || '',
       description: resolveLocalizedValue(translate, solution.descriptionKey, solution.descriptionKey),
       descriptionKey: solution.descriptionKey || '',
-      styleClass: solution.styleClass || HOME_SOLUTION_CARD_STYLE_DEFAULT,
+      styleClass: solution.styleClass || SOLUTION_CARD_STYLE_DEFAULT,
     })),
   }
 }
 
+function toSaveInput(content: HomeContent, cultureName: string) {
+  return {
+    cultureName,
+    heroBackgroundImageKey: content.heroBackgroundImageKey,
+    heroBackgroundImageValue: content.heroBackgroundImage,
+    heroPrimaryCtaKey: content.heroPrimaryCtaKey,
+    heroPrimaryCtaValue: content.heroPrimaryCtaLabel,
+    heroPrimaryCtaStyleKey: content.heroPrimaryCtaStyleKey,
+    heroPrimaryCtaStyleValue: content.heroPrimaryCtaStyle,
+    heroSecondaryCtaKey: content.heroSecondaryCtaKey,
+    heroSecondaryCtaValue: content.heroSecondaryCtaLabel,
+    heroSecondaryCtaStyleKey: content.heroSecondaryCtaStyleKey,
+    heroSecondaryCtaStyleValue: content.heroSecondaryCtaStyle,
+    featuresTitleKey: content.featuresTitleKey,
+    featuresTitleValue: content.featuresTitle,
+    featuresTitleStyleKey: content.featuresTitleStyleKey,
+    featuresTitleStyleValue: content.featuresTitleStyle,
+    featuresSubtitleKey: content.featuresSubtitleKey,
+    featuresSubtitleValue: content.featuresSubtitle,
+    featuresSubtitleStyleKey: content.featuresSubtitleStyleKey,
+    featuresSubtitleStyleValue: content.featuresSubtitleStyle,
+    solutionsTitleKey: content.solutionsTitleKey,
+    solutionsTitleValue: content.solutionsTitle,
+    solutionsTitleStyleKey: content.solutionsTitleStyleKey,
+    solutionsTitleStyleValue: content.solutionsTitleStyle,
+    solutionsSubtitleKey: content.solutionsSubtitleKey,
+    solutionsSubtitleValue: content.solutionsSubtitle,
+    solutionsSubtitleStyleKey: content.solutionsSubtitleStyleKey,
+    solutionsSubtitleStyleValue: content.solutionsSubtitleStyle,
+    ctaTitleKey: content.ctaTitleKey,
+    ctaTitleValue: content.ctaTitle,
+    ctaTitleStyleKey: content.ctaTitleStyleKey,
+    ctaTitleStyleValue: content.ctaTitleStyle,
+    ctaSubtitleKey: content.ctaSubtitleKey,
+    ctaSubtitleValue: content.ctaSubtitle,
+    ctaSubtitleStyleKey: content.ctaSubtitleStyleKey,
+    ctaSubtitleStyleValue: content.ctaSubtitleStyle,
+    ctaButtonLabelKey: content.ctaButtonLabelKey,
+    ctaButtonLabelValue: content.ctaButtonLabel,
+    ctaButtonStyleKey: content.ctaButtonStyleKey,
+    ctaButtonStyleValue: content.ctaButtonStyle,
+    slides: content.slides.map((slide) => ({
+      titleKey: slide.titleKey,
+      titleValue: slide.title,
+      subtitleKey: slide.subtitleKey,
+      subtitleValue: slide.subtitle,
+      styleClass: slide.styleClass,
+      services: slide.services.map((service) => ({
+        icon: service.icon,
+        titleKey: service.titleKey,
+        titleValue: service.title,
+        descriptionKey: service.descriptionKey,
+        descriptionValue: service.description,
+        styleClass: service.styleClass,
+      })),
+    })),
+    features: content.features.map((feature) => ({
+      icon: feature.icon,
+      titleKey: feature.titleKey,
+      titleValue: feature.title,
+      descriptionKey: feature.descriptionKey,
+      descriptionValue: feature.description,
+      styleClass: feature.styleClass,
+    })),
+    solutions: content.solutions.map((solution) => ({
+      icon: solution.icon,
+      colorClass: solution.colorClass,
+      titleKey: solution.titleKey,
+      titleValue: solution.title,
+      descriptionKey: solution.descriptionKey,
+      descriptionValue: solution.description,
+      styleClass: solution.styleClass,
+    })),
+  }
+}
+
+function cardFields(path: string, item: HomeCardContent, iconLabel: string): DesignerField[] {
+  return [
+    iconField(`${path}.icon`, iconLabel, item.icon, { placeholder: 'Ornek: FaChartBar' }),
+    textField(`${path}.title`, item.titleKey, item.title),
+    textAreaField(`${path}.description`, item.descriptionKey, item.description),
+    styleField(`${path}.styleClass`, `${path}.styleClass`, item.styleClass),
+  ]
+}
+
 const Home: React.FC = () => {
   const { openDemo } = useOptionalDemo()
   const { translate } = useLocalization()
-  const { setLang } = useStoreActions((actions) => actions.locale)
-  const { getConfig } = useStoreActions((actions) => actions.abpConfig)
-  const configCultureName = useStoreState(
-    (state) => state.abpConfig.config?.localization.currentCulture.cultureName,
-  )
-  const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
-  const currentLanguage = configCultureName || localeCurrentLang || 'tr'
-  const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages) || []
-  const languageOptions = abpLanguages
-    .filter((language) => Boolean(language.cultureName))
-    .map((language) => {
-      const cultureName = language.cultureName || 'tr'
-      return {
-        key: cultureName.toLowerCase().split('-')[0],
-        cultureName,
-        displayName: language.displayName || cultureName,
-      }
-    })
-  const languagesFromConfig = languageOptions.map((language) => language.key)
-  const editorLanguages = Array.from(
-    new Set((languagesFromConfig.length > 0 ? languagesFromConfig : [currentLanguage]).filter(Boolean)),
-  )
-
   const [home, setHome] = useState<HomeDto>()
   const [loading, setLoading] = useState(true)
-  const [isSaving, setIsSaving] = useState(false)
-  const [isPanelVisible, setIsPanelVisible] = useState(true)
   const [currentSlide, setCurrentSlide] = useState(0)
 
-  const initialContent = !loading ? buildHomeContent(home, translate) : null
-  const {
-    content,
-    isDesignMode,
-    selectedBlockId,
-    selectedLanguage,
-    supportedLanguages,
-    setContent,
-    setSelectedBlockId,
-    resetContent,
-  } = useDesignerState<HomeContent>('home', initialContent, {
-    currentLanguage,
-    supportedLanguages: editorLanguages,
-  })
-
   useEffect(() => {
-    setLoading(true)
     const fetchHome = async () => {
+      setLoading(true)
+
       try {
         const result = await getHome()
         setHome(result.data)
@@ -335,189 +355,73 @@ const Home: React.FC = () => {
     fetchHome()
   }, [])
 
-  useEffect(() => {
-    if (!content?.slides?.length) {
-      return
-    }
+  const initialContent = useMemo(
+    () => (loading ? null : buildHomeContent(home, translate)),
+    [home, loading, translate],
+  )
 
-    if (currentSlide >= content.slides.length) {
+  const designer = usePageDesigner<HomeContent>({
+    pageKey: 'Home',
+    permission: PUBLIC_PAGE_DESIGN.HOME,
+    initialContent,
+    onSave: (content, cultureName) => saveHomePage(toSaveInput(content, cultureName)),
+  })
+
+  const { content, isDesignMode, isPanelVisible, selectedBlockId, selectBlock } = designer
+  const slides = useMemo(() => content?.slides ?? [], [content?.slides])
+  const slideCount = slides.length
+
+  useEffect(() => {
+    if (slideCount > 0 && currentSlide >= slideCount) {
       setCurrentSlide(0)
     }
-  }, [content?.slides.length, currentSlide])
+  }, [currentSlide, slideCount])
 
+  // Tasarim modunda otomatik gecis kapalidir; aksi halde duzenlenen slayt kayiyor.
   useEffect(() => {
-    if (!content?.slides?.length) {
+    if (slideCount < 2 || isDesignMode) {
       return
     }
 
-    const timer = setInterval(() => {
-      setCurrentSlide((prev) => (prev + 1) % content.slides.length)
-    }, 10000)
+    const timer = setInterval(
+      () => setCurrentSlide((previous) => (previous + 1) % slideCount),
+      SLIDE_INTERVAL_MS,
+    )
 
     return () => clearInterval(timer)
-  }, [content?.slides.length])
+  }, [isDesignMode, slideCount])
 
-  const nextSlide = () => {
-    const size = content?.slides.length || 1
-    setCurrentSlide((prev) => (prev + 1) % size)
-  }
+  const goToSlide = (offset: number) =>
+    setCurrentSlide((previous) => (previous + offset + Math.max(slideCount, 1)) % Math.max(slideCount, 1))
 
-  const prevSlide = () => {
-    const size = content?.slides.length || 1
-    setCurrentSlide((prev) => (prev - 1 + size) % size)
-  }
-
-  const updateContent = (updater: (current: HomeContent) => HomeContent) => {
-    setContent((current) => {
-      if (!current) {
-        return current
-      }
-
-      return updater(current)
-    })
-  }
-
-  const handleFieldChange = (fieldKey: string, value: string | string[]) => {
-    const nextValue = value as string
-
-    updateContent((current) => {
-      if (
-        fieldKey === 'heroBackgroundImage' ||
-        fieldKey === 'heroPrimaryCtaLabel' ||
-        fieldKey === 'heroPrimaryCtaStyle' ||
-        fieldKey === 'heroSecondaryCtaLabel' ||
-        fieldKey === 'heroSecondaryCtaStyle' ||
-        fieldKey === 'featuresTitle' ||
-        fieldKey === 'featuresTitleStyle' ||
-        fieldKey === 'featuresSubtitle' ||
-        fieldKey === 'featuresSubtitleStyle' ||
-        fieldKey === 'solutionsTitle' ||
-        fieldKey === 'solutionsTitleStyle' ||
-        fieldKey === 'solutionsSubtitle' ||
-        fieldKey === 'solutionsSubtitleStyle' ||
-        fieldKey === 'ctaTitle' ||
-        fieldKey === 'ctaTitleStyle' ||
-        fieldKey === 'ctaSubtitle' ||
-        fieldKey === 'ctaSubtitleStyle' ||
-        fieldKey === 'ctaButtonLabel' ||
-        fieldKey === 'ctaButtonStyle'
-      ) {
-        return {
-          ...current,
-          [fieldKey]: nextValue,
-        }
-      }
-
-      if (selectedBlockId?.startsWith('slide-')) {
-        const index = Number(selectedBlockId.replace('slide-', ''))
-        if (Number.isNaN(index)) {
-          return current
-        }
-
-        const slides = [...current.slides]
-        const target = { ...slides[index] }
-
-        if (fieldKey === 'title' || fieldKey === 'subtitle' || fieldKey === 'styleClass') {
-          target[fieldKey] = nextValue
-        } else if (fieldKey.startsWith('service-')) {
-          const parts = fieldKey.split('-')
-          const serviceIndex = Number(parts[1])
-          const serviceField = parts[2] as 'icon' | 'title' | 'description' | 'styleClass'
-          const services = [...target.services]
-          const service = { ...services[serviceIndex] }
-          service[serviceField] = nextValue
-          services[serviceIndex] = service
-          target.services = services
-        }
-
-        slides[index] = target
-        return {
-          ...current,
-          slides,
-        }
-      }
-
-      if (selectedBlockId?.startsWith('feature-')) {
-        const index = Number(selectedBlockId.replace('feature-', ''))
-        if (Number.isNaN(index)) {
-          return current
-        }
-
-        const features = [...current.features]
-        const feature = { ...features[index] }
-        const key = fieldKey as 'icon' | 'title' | 'description' | 'styleClass'
-        feature[key] = nextValue
-        features[index] = feature
-
-        return {
-          ...current,
-          features,
-        }
-      }
-
-      if (selectedBlockId?.startsWith('solution-')) {
-        const index = Number(selectedBlockId.replace('solution-', ''))
-        if (Number.isNaN(index)) {
-          return current
-        }
-
-        const solutions = [...current.solutions]
-        const solution = { ...solutions[index] }
-        const key = fieldKey as 'icon' | 'title' | 'description' | 'colorClass' | 'styleClass'
-        solution[key] = nextValue
-        solutions[index] = solution
-
-        return {
-          ...current,
-          solutions,
-        }
-      }
-
-      return current
-    })
-  }
-
-  const selectedSelection: DesignerSelection | null = React.useMemo(() => {
+  const selection: DesignerSelection | null = useMemo(() => {
     if (!content || !selectedBlockId) {
       return null
     }
 
+    const iconLabel = translateLabel(translate, 'Public.designer.ikonAnahtari', 'Ikon anahtari')
+
     if (selectedBlockId === 'hero') {
       return {
         id: 'hero',
         title: 'Public.home.hero.*',
-        description: 'Hero arka planini ve CTA metinlerini duzenleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.heroHint',
+          'Hero arka planini ve CTA metinlerini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'heroBackgroundImage',
-            label: content.heroBackgroundImageKey,
-            type: 'image',
-            value: content.heroBackgroundImage,
-          },
-          {
-            key: 'heroPrimaryCtaLabel',
-            label: content.heroPrimaryCtaKey,
-            type: 'text',
-            value: content.heroPrimaryCtaLabel,
-          },
-          {
-            key: 'heroPrimaryCtaStyle',
-            label: content.heroPrimaryCtaStyleKey,
-            type: 'text',
-            value: content.heroPrimaryCtaStyle,
-          },
-          {
-            key: 'heroSecondaryCtaLabel',
-            label: content.heroSecondaryCtaKey,
-            type: 'text',
-            value: content.heroSecondaryCtaLabel,
-          },
-          {
-            key: 'heroSecondaryCtaStyle',
-            label: content.heroSecondaryCtaStyleKey,
-            type: 'text',
-            value: content.heroSecondaryCtaStyle,
-          },
+          textField('heroPrimaryCtaLabel', content.heroPrimaryCtaKey, content.heroPrimaryCtaLabel),
+          textField('heroSecondaryCtaLabel', content.heroSecondaryCtaKey, content.heroSecondaryCtaLabel),
+          imageField('heroBackgroundImage', content.heroBackgroundImageKey, content.heroBackgroundImage, {
+            group: 'media',
+          }),
+          styleField('heroPrimaryCtaStyle', content.heroPrimaryCtaStyleKey, content.heroPrimaryCtaStyle),
+          styleField(
+            'heroSecondaryCtaStyle',
+            content.heroSecondaryCtaStyleKey,
+            content.heroSecondaryCtaStyle,
+          ),
         ],
       }
     }
@@ -532,54 +436,32 @@ const Home: React.FC = () => {
 
       return {
         id: selectedBlockId,
-        title: slide.titleKey,
-        description: 'Slayt baslik, alt baslik ve servis kartlarini duzenleyin.',
+        title: slide.titleKey || `Slide ${index + 1}`,
+        description: translateLabel(
+          translate,
+          'Public.designer.slideHint',
+          'Slayt baslik, alt baslik ve servis kartlarini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'title',
-            label: slide.titleKey,
-            type: 'text',
-            value: slide.title,
-          },
-          {
-            key: 'subtitle',
-            label: slide.subtitleKey,
-            type: 'textarea',
-            value: slide.subtitle,
-          },
-          {
-            key: 'styleClass',
-            label: `Slide${index + 1}.StyleClass`,
-            type: 'text',
-            value: slide.styleClass,
-          },
-          ...slide.services.flatMap((service, serviceIndex) => [
-            {
-              key: `service-${serviceIndex}-icon`,
-              label: `Slide${index + 1}.Service${serviceIndex + 1}.Icon`,
-              type: 'icon' as const,
-              value: service.icon,
-              placeholder: 'Ornek: FaUsers',
-            },
-            {
-              key: `service-${serviceIndex}-title`,
-              label: service.titleKey,
-              type: 'text' as const,
-              value: service.title,
-            },
-            {
-              key: `service-${serviceIndex}-description`,
-              label: service.descriptionKey,
-              type: 'textarea' as const,
-              value: service.description,
-            },
-            {
-              key: `service-${serviceIndex}-styleClass`,
-              label: `Slide${index + 1}.Service${serviceIndex + 1}.StyleClass`,
-              type: 'text' as const,
-              value: service.styleClass,
-            },
-          ]),
+          textField(`slides.${index}.title`, slide.titleKey, slide.title),
+          textAreaField(`slides.${index}.subtitle`, slide.subtitleKey, slide.subtitle),
+          styleField(`slides.${index}.styleClass`, `Slide${index + 1}.StyleClass`, slide.styleClass),
+          ...slide.services.flatMap((service, serviceIndex) => {
+            const path = `slides.${index}.services.${serviceIndex}`
+
+            return [
+              iconField(`${path}.icon`, `Slide${index + 1}.Service${serviceIndex + 1}.Icon`, service.icon, {
+                placeholder: 'Ornek: FaUsers',
+              }),
+              textField(`${path}.title`, service.titleKey, service.title),
+              textAreaField(`${path}.description`, service.descriptionKey, service.description),
+              styleField(
+                `${path}.styleClass`,
+                `Slide${index + 1}.Service${serviceIndex + 1}.StyleClass`,
+                service.styleClass,
+              ),
+            ]
+          }),
         ],
       }
     }
@@ -588,74 +470,20 @@ const Home: React.FC = () => {
       return {
         id: selectedBlockId,
         title: content.featuresTitleKey,
-        description: 'Features bolum basliklarini duzenleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.headingHint',
+          'Bolum basliklarini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'featuresTitle',
-            label: content.featuresTitleKey,
-            type: 'text',
-            value: content.featuresTitle,
-          },
-          {
-            key: 'featuresTitleStyle',
-            label: content.featuresTitleStyleKey,
-            type: 'text',
-            value: content.featuresTitleStyle,
-          },
-          {
-            key: 'featuresSubtitle',
-            label: content.featuresSubtitleKey,
-            type: 'textarea',
-            value: content.featuresSubtitle,
-          },
-          {
-            key: 'featuresSubtitleStyle',
-            label: content.featuresSubtitleStyleKey,
-            type: 'text',
-            value: content.featuresSubtitleStyle,
-          },
-        ],
-      }
-    }
-
-    if (selectedBlockId.startsWith('feature-')) {
-      const index = Number(selectedBlockId.replace('feature-', ''))
-      const item = content.features[index]
-
-      if (!item) {
-        return null
-      }
-
-      return {
-        id: selectedBlockId,
-        title: item.titleKey,
-        description: 'Feature ikon ve metinlerini duzenleyin.',
-        fields: [
-          {
-            key: 'icon',
-            label: `Feature${index + 1}.Icon`,
-            type: 'icon',
-            value: item.icon,
-            placeholder: 'Ornek: FaChartBar',
-          },
-          {
-            key: 'title',
-            label: item.titleKey,
-            type: 'text',
-            value: item.title,
-          },
-          {
-            key: 'description',
-            label: item.descriptionKey,
-            type: 'textarea',
-            value: item.description,
-          },
-          {
-            key: 'styleClass',
-            label: `Feature${index + 1}.StyleClass`,
-            type: 'text',
-            value: item.styleClass,
-          },
+          textField('featuresTitle', content.featuresTitleKey, content.featuresTitle),
+          textAreaField('featuresSubtitle', content.featuresSubtitleKey, content.featuresSubtitle),
+          styleField('featuresTitleStyle', content.featuresTitleStyleKey, content.featuresTitleStyle),
+          styleField(
+            'featuresSubtitleStyle',
+            content.featuresSubtitleStyleKey,
+            content.featuresSubtitleStyle,
+          ),
         ],
       }
     }
@@ -664,423 +492,237 @@ const Home: React.FC = () => {
       return {
         id: selectedBlockId,
         title: content.solutionsTitleKey,
-        description: 'Solutions bolum basliklarini duzenleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.headingHint',
+          'Bolum basliklarini duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'solutionsTitle',
-            label: content.solutionsTitleKey,
-            type: 'text',
-            value: content.solutionsTitle,
-          },
-          {
-            key: 'solutionsTitleStyle',
-            label: content.solutionsTitleStyleKey,
-            type: 'text',
-            value: content.solutionsTitleStyle,
-          },
-          {
-            key: 'solutionsSubtitle',
-            label: content.solutionsSubtitleKey,
-            type: 'textarea',
-            value: content.solutionsSubtitle,
-          },
-          {
-            key: 'solutionsSubtitleStyle',
-            label: content.solutionsSubtitleStyleKey,
-            type: 'text',
-            value: content.solutionsSubtitleStyle,
-          },
+          textField('solutionsTitle', content.solutionsTitleKey, content.solutionsTitle),
+          textAreaField('solutionsSubtitle', content.solutionsSubtitleKey, content.solutionsSubtitle),
+          styleField('solutionsTitleStyle', content.solutionsTitleStyleKey, content.solutionsTitleStyle),
+          styleField(
+            'solutionsSubtitleStyle',
+            content.solutionsSubtitleStyleKey,
+            content.solutionsSubtitleStyle,
+          ),
         ],
       }
     }
 
+    if (selectedBlockId.startsWith('feature-')) {
+      const index = Number(selectedBlockId.replace('feature-', ''))
+      const item = content.features[index]
+
+      return item
+        ? {
+            id: selectedBlockId,
+            title: item.titleKey || `Feature ${index + 1}`,
+            description: translateLabel(translate, 'Public.designer.desc1', 'Kart icerigini duzenleyin.'),
+            fields: cardFields(`features.${index}`, item, iconLabel),
+          }
+        : null
+    }
+
     if (selectedBlockId.startsWith('solution-')) {
       const index = Number(selectedBlockId.replace('solution-', ''))
       const item = content.solutions[index]
 
-      if (!item) {
-        return null
-      }
-
-      return {
-        id: selectedBlockId,
-        title: item.titleKey,
-        description: 'Solution kartini tamamen duzenleyin.',
-        fields: [
-          {
-            key: 'colorClass',
-            label: `Solution${index + 1}.ColorClass`,
-            type: 'text',
-            value: item.colorClass,
-          },
-          {
-            key: 'icon',
-            label: `Solution${index + 1}.Icon`,
-            type: 'icon',
-            value: item.icon,
-            placeholder: 'Ornek: FaDesktop',
-          },
-          {
-            key: 'title',
-            label: item.titleKey,
-            type: 'text',
-            value: item.title,
-          },
-          {
-            key: 'description',
-            label: item.descriptionKey,
-            type: 'textarea',
-            value: item.description,
-          },
-          {
-            key: 'styleClass',
-            label: `Solution${index + 1}.StyleClass`,
-            type: 'text',
-            value: item.styleClass,
-          },
-        ],
-      }
+      return item
+        ? {
+            id: selectedBlockId,
+            title: item.titleKey || `Solution ${index + 1}`,
+            description: translateLabel(translate, 'Public.designer.desc1', 'Kart icerigini duzenleyin.'),
+            fields: [
+              ...cardFields(`solutions.${index}`, item, iconLabel),
+              styleField(`solutions.${index}.colorClass`, `Solution${index + 1}.ColorClass`, item.colorClass),
+            ],
+          }
+        : null
     }
 
     if (selectedBlockId === 'cta') {
       return {
         id: selectedBlockId,
         title: content.ctaTitleKey,
-        description: 'Sayfa alti cta metinlerini duzenleyin.',
+        description: translateLabel(
+          translate,
+          'Public.designer.desc2',
+          'Sayfa alti cagri bolumunu duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'ctaTitle',
-            label: content.ctaTitleKey,
-            type: 'text',
-            value: content.ctaTitle,
-          },
-          {
-            key: 'ctaTitleStyle',
-            label: content.ctaTitleStyleKey,
-            type: 'text',
-            value: content.ctaTitleStyle,
-          },
-          {
-            key: 'ctaSubtitle',
-            label: content.ctaSubtitleKey,
-            type: 'textarea',
-            value: content.ctaSubtitle,
-          },
-          {
-            key: 'ctaSubtitleStyle',
-            label: content.ctaSubtitleStyleKey,
-            type: 'text',
-            value: content.ctaSubtitleStyle,
-          },
-          {
-            key: 'ctaButtonLabel',
-            label: content.ctaButtonLabelKey,
-            type: 'text',
-            value: content.ctaButtonLabel,
-          },
-          {
-            key: 'ctaButtonStyle',
-            label: content.ctaButtonStyleKey,
-            type: 'text',
-            value: content.ctaButtonStyle,
-          },
+          textField('ctaTitle', content.ctaTitleKey, content.ctaTitle),
+          textAreaField('ctaSubtitle', content.ctaSubtitleKey, content.ctaSubtitle),
+          textField('ctaButtonLabel', content.ctaButtonLabelKey, content.ctaButtonLabel),
+          styleField('ctaTitleStyle', content.ctaTitleStyleKey, content.ctaTitleStyle),
+          styleField('ctaSubtitleStyle', content.ctaSubtitleStyleKey, content.ctaSubtitleStyle),
+          styleField('ctaButtonStyle', content.ctaButtonStyleKey, content.ctaButtonStyle),
         ],
       }
     }
 
     return null
-  }, [content, selectedBlockId])
-
-  const handleSaveAndExit = async () => {
-    if (!content || isSaving) {
-      return
-    }
-
-    setIsSaving(true)
-
-    try {
-      await saveHomePage({
-        cultureName: selectedLanguage,
-        heroBackgroundImageKey: content.heroBackgroundImageKey,
-        heroBackgroundImageValue: content.heroBackgroundImage,
-        heroPrimaryCtaKey: content.heroPrimaryCtaKey,
-        heroPrimaryCtaValue: content.heroPrimaryCtaLabel,
-        heroPrimaryCtaStyleKey: content.heroPrimaryCtaStyleKey,
-        heroPrimaryCtaStyleValue: content.heroPrimaryCtaStyle,
-        heroSecondaryCtaKey: content.heroSecondaryCtaKey,
-        heroSecondaryCtaValue: content.heroSecondaryCtaLabel,
-        heroSecondaryCtaStyleKey: content.heroSecondaryCtaStyleKey,
-        heroSecondaryCtaStyleValue: content.heroSecondaryCtaStyle,
-        featuresTitleKey: content.featuresTitleKey,
-        featuresTitleValue: content.featuresTitle,
-        featuresTitleStyleKey: content.featuresTitleStyleKey,
-        featuresTitleStyleValue: content.featuresTitleStyle,
-        featuresSubtitleKey: content.featuresSubtitleKey,
-        featuresSubtitleValue: content.featuresSubtitle,
-        featuresSubtitleStyleKey: content.featuresSubtitleStyleKey,
-        featuresSubtitleStyleValue: content.featuresSubtitleStyle,
-        solutionsTitleKey: content.solutionsTitleKey,
-        solutionsTitleValue: content.solutionsTitle,
-        solutionsTitleStyleKey: content.solutionsTitleStyleKey,
-        solutionsTitleStyleValue: content.solutionsTitleStyle,
-        solutionsSubtitleKey: content.solutionsSubtitleKey,
-        solutionsSubtitleValue: content.solutionsSubtitle,
-        solutionsSubtitleStyleKey: content.solutionsSubtitleStyleKey,
-        solutionsSubtitleStyleValue: content.solutionsSubtitleStyle,
-        ctaTitleKey: content.ctaTitleKey,
-        ctaTitleValue: content.ctaTitle,
-        ctaTitleStyleKey: content.ctaTitleStyleKey,
-        ctaTitleStyleValue: content.ctaTitleStyle,
-        ctaSubtitleKey: content.ctaSubtitleKey,
-        ctaSubtitleValue: content.ctaSubtitle,
-        ctaSubtitleStyleKey: content.ctaSubtitleStyleKey,
-        ctaSubtitleStyleValue: content.ctaSubtitleStyle,
-        ctaButtonLabelKey: content.ctaButtonLabelKey,
-        ctaButtonLabelValue: content.ctaButtonLabel,
-        ctaButtonStyleKey: content.ctaButtonStyleKey,
-        ctaButtonStyleValue: content.ctaButtonStyle,
-        slides: content.slides.map((slide) => ({
-          titleKey: slide.titleKey || '',
-          titleValue: slide.title,
-          subtitleKey: slide.subtitleKey || '',
-          subtitleValue: slide.subtitle,
-          styleClass: slide.styleClass,
-          services: slide.services.map((service) => ({
-            icon: service.icon,
-            titleKey: service.titleKey || '',
-            titleValue: service.title,
-            descriptionKey: service.descriptionKey || '',
-            descriptionValue: service.description,
-            styleClass: service.styleClass,
-          })),
-        })),
-        features: content.features.map((feature) => ({
-          icon: feature.icon,
-          titleKey: feature.titleKey || '',
-          titleValue: feature.title,
-          descriptionKey: feature.descriptionKey || '',
-          descriptionValue: feature.description,
-          styleClass: feature.styleClass,
-        })),
-        solutions: content.solutions.map((solution) => ({
-          icon: solution.icon,
-          colorClass: solution.colorClass,
-          titleKey: solution.titleKey || '',
-          titleValue: solution.title,
-          descriptionKey: solution.descriptionKey || '',
-          descriptionValue: solution.description,
-          styleClass: solution.styleClass,
-        })),
-      })
-
-      await getConfig(false)
-      setSelectedBlockId(null)
-
-      toast.push(
-        <Notification type="success" duration={2000}>
-          {translate('::ListForms.FormBilgileriKaydedildi')}
-        </Notification>,
-        {
-          placement: 'bottom-end',
-        },
-      )
-
-    } catch (error) {
-      console.error('Home tasarimi kaydedilemedi:', error)
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleLanguageChange = (language: string) => {
-    setLang(language)
-  }
-
-  const handleSelectBlock = (blockId: string) => {
-    setSelectedBlockId(blockId)
-    if (!isPanelVisible) {
-      setIsPanelVisible(true)
-    }
-  }
+  }, [content, selectedBlockId, translate])
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={loading} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
-    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+    <div className={designerPageClass(isDesignMode, isPanelVisible)}>
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
-        title={translate('::' + 'App.Home')}
+        title={translate('::App.Home')}
         defaultTitle={APP_NAME}
-      ></Helmet>
+      />
 
-      {isDesignMode && (
-        <div className="fixed bottom-6 left-6 z-40 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-xl">
-          Home designer aktif
-        </div>
-      )}
-
-      {isDesignMode && !isPanelVisible && (
-        <Button
-          type="button"
-          onClick={() => setIsPanelVisible(true)}
-          variant="plain"
-          className="fixed right-4 top-1/2 z-40 -translate-y-1/2 !h-auto !rounded-full bg-slate-900 !px-4 !py-2 text-sm font-semibold text-white shadow-xl"
+      {/* Hero carousel */}
+      <div className="relative">
+        <SelectableBlock
+          id="hero"
+          label="Hero"
+          isActive={selectedBlockId === 'hero'}
+          isDesignMode={isDesignMode}
+          onSelect={selectBlock}
         >
-          {translate('::Public.designer.showPanel')}
-        </Button>
-      )}
-
-      {/* Hero Carousel */}
-      <SelectableBlock
-        id="hero"
-        isActive={selectedBlockId === 'hero'}
-        isDesignMode={isDesignMode}
-        onSelect={handleSelectBlock}
-      >
-      <div className="relative min-h-screen overflow-hidden bg-blue-900 p-20 text-white dark:bg-gray-950">
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-950 dark:via-gray-950 dark:to-gray-950"></div>
-        <div
-          className="absolute inset-0 opacity-20 dark:opacity-35"
-          style={{
-            backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        ></div>
-        <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
-
-        {/* Carousel Content */}
-        <div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
-          {(content?.slides || []).map((slide, index) => (
+          <div className="relative min-h-screen overflow-hidden bg-blue-900 p-20 text-white dark:bg-gray-950">
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-950 dark:via-gray-950 dark:to-gray-950" />
             <div
-              key={index}
-              className={`absolute inset-0 transition-all duration-700 ease-in-out ${
-                index === currentSlide
-                  ? 'opacity-100 translate-x-0'
-                  : index < currentSlide
-                    ? 'opacity-0 -translate-x-full'
-                    : 'opacity-0 translate-x-full'
-              }`}
-            >
-              <SelectableBlock
-                id={`slide-${index}`}
-                isActive={selectedBlockId === `slide-${index}`}
-                isDesignMode={isDesignMode}
-                onSelect={(id) => {
-                  setCurrentSlide(index)
-                  handleSelectBlock(id)
-                }}
-                className="h-full"
-              >
-              <div className={`container mx-auto px-4 pt-16 ${slide.styleClass || ''}`}>
-                <div className="max-w-4xl mx-auto text-center">
-                  <h1 className="text-3xl md:text-6xl font-bold mb-6 text-white animate-fade-in">
-                    {slide.title}
-                  </h1>
-                  <p className="text-xl md:text-2xl text-gray-300 mb-12 animate-fade-in-delay">
-                    {slide.subtitle}
-                  </p>
-
-                  <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
-                    <button
-                      type="button"
-                      onClick={openDemo}
-                      className={content?.heroPrimaryCtaStyle}
-                    >
-                      {content?.heroPrimaryCtaLabel}{' '}
-                      <FaArrowRight className="ml-2" size={20} />
-                    </button>
-                    <Link
-                      to={ROUTES_ENUM.public.products}
-                      className={content?.heroSecondaryCtaStyle}
-                    >
-                      {content?.heroSecondaryCtaLabel}
-                    </Link>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
-                    {slide.services.map((service, i) => (
-                      <div
-                        key={i}
-                        className={
-                          service.styleClass ||
-                          'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all'
-                        }
-                      >
-                        {(() => {
-                          const IconComponent = navigationIcon[service.icon || '']
-                          return IconComponent ? (
-                            <IconComponent className="mx-auto mb-4 text-blue-300" size={40} />
-                          ) : null
-                        })()}
-                        <h3 className="text-xl font-semibold mb-3 text-white">{service.title}</h3>
-                        <p className="text-gray-300">{service.description}</p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-              </SelectableBlock>
-            </div>
-          ))}
-        </div>
-
-        {/* Navigation Buttons */}
-        <Button
-          onClick={prevSlide}
-          variant="plain"
-          shape="circle"
-          icon={<FaChevronLeft size={24} />}
-          className="absolute left-4 top-1/2 z-10 -translate-y-1/2 !h-14 !w-14 !px-0 bg-white/10 hover:!bg-white/20 backdrop-blur-sm text-white transition-all"
-          aria-label="Previous slide"
-        />
-        <Button
-          onClick={nextSlide}
-          variant="plain"
-          shape="circle"
-          icon={<FaChevronRight size={24} />}
-          className="absolute right-4 top-1/2 z-10 -translate-y-1/2 !h-14 !w-14 !px-0 bg-white/10 hover:!bg-white/20 backdrop-blur-sm text-white transition-all"
-          aria-label="Next slide"
-        />
-
-        {/* Slide Indicators */}
-        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-10">
-          {(content?.slides || []).map((_, index) => (
-            <Button
-              key={index}
-              onClick={() => setCurrentSlide(index)}
-              variant="plain"
-              shape="circle"
-              className={`!h-3 !min-h-3 !px-0 rounded-full transition-all ${
-                index === currentSlide ? '!w-8 bg-white' : '!w-3 bg-white/50 hover:bg-white/70'
-              }`}
-              aria-label={`Go to slide ${index + 1}`}
+              className="absolute inset-0 opacity-20 dark:opacity-35"
+              style={{
+                backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+              }}
             />
-          ))}
-        </div>
+            <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45" />
 
-        {isDesignMode && (
-          <div className="absolute bottom-24 left-1/2 z-20 -translate-x-1/2 flex gap-2 rounded-full bg-black/30 px-3 py-2 backdrop-blur">
-            {(content?.slides || []).map((_, index) => (
+            <div className="container relative mx-auto flex h-screen items-center px-4 pb-16 pt-32">
+              {slides.map((slide, index) => (
+                <div
+                  key={slide.titleKey || index}
+                  aria-hidden={index !== currentSlide}
+                  className={`absolute inset-0 transition-all duration-700 ease-in-out ${
+                    index === currentSlide
+                      ? 'opacity-100 translate-x-0'
+                      : index < currentSlide
+                        ? 'pointer-events-none opacity-0 -translate-x-full'
+                        : 'pointer-events-none opacity-0 translate-x-full'
+                  }`}
+                >
+                  <SelectableBlock
+                    id={`slide-${index}`}
+                    label={`Slide ${index + 1}`}
+                    isActive={selectedBlockId === `slide-${index}`}
+                    isDesignMode={isDesignMode}
+                    className="h-full"
+                    onSelect={(id) => {
+                      setCurrentSlide(index)
+                      selectBlock(id)
+                    }}
+                  >
+                    <div className={`container mx-auto px-4 pt-16 ${slide.styleClass}`}>
+                      <div className="mx-auto max-w-4xl text-center">
+                        <h1 className="animate-fade-in mb-6 text-3xl font-bold text-white md:text-6xl">
+                          {slide.title}
+                        </h1>
+                        <p className="animate-fade-in-delay mb-12 text-xl text-gray-300 md:text-2xl">
+                          {slide.subtitle}
+                        </p>
+
+                        <div className="mb-16 flex flex-col justify-center gap-6 md:flex-row">
+                          <button
+                            type="button"
+                            className={content?.heroPrimaryCtaStyle || HERO_PRIMARY_CTA_STYLE_DEFAULT}
+                            onClick={openDemo}
+                          >
+                            {content?.heroPrimaryCtaLabel}
+                            <FaArrowRight className="ml-2" size={20} />
+                          </button>
+                          <Link
+                            to={ROUTES_ENUM.public.products}
+                            className={content?.heroSecondaryCtaStyle || HERO_SECONDARY_CTA_STYLE_DEFAULT}
+                          >
+                            {content?.heroSecondaryCtaLabel}
+                          </Link>
+                        </div>
+
+                        <div className="mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3">
+                          {slide.services.map((service, serviceIndex) => (
+                            <div
+                              key={service.titleKey || serviceIndex}
+                              className={service.styleClass || SLIDE_SERVICE_STYLE_DEFAULT}
+                            >
+                              <PageIcon
+                                name={service.icon}
+                                className="mx-auto mb-4 text-blue-300"
+                                size={40}
+                              />
+                              <h3 className="mb-3 text-xl font-semibold text-white">{service.title}</h3>
+                              <p className="text-gray-300">{service.description}</p>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </SelectableBlock>
+                </div>
+              ))}
+            </div>
+
+            {slideCount > 1 && (
+              <>
+                <Button
+                  variant="plain"
+                  shape="circle"
+                  icon={<FaChevronLeft size={24} />}
+                  className="absolute left-4 top-1/2 z-10 -translate-y-1/2 !h-14 !w-14 !px-0 bg-white/10 text-white backdrop-blur-sm transition-all hover:!bg-white/20"
+                  aria-label="Previous slide"
+                  onClick={() => goToSlide(-1)}
+                />
+                <Button
+                  variant="plain"
+                  shape="circle"
+                  icon={<FaChevronRight size={24} />}
+                  className="absolute right-4 top-1/2 z-10 -translate-y-1/2 !h-14 !w-14 !px-0 bg-white/10 text-white backdrop-blur-sm transition-all hover:!bg-white/20"
+                  aria-label="Next slide"
+                  onClick={() => goToSlide(1)}
+                />
+
+                <div className="absolute bottom-8 left-1/2 z-10 flex -translate-x-1/2 gap-3">
+                  {slides.map((slide, index) => (
+                    <Button
+                      key={`indicator-${slide.titleKey || index}`}
+                      variant="plain"
+                      shape="circle"
+                      className={`!h-3 !min-h-3 !px-0 rounded-full transition-all ${
+                        index === currentSlide ? '!w-8 bg-white' : '!w-3 bg-white/50 hover:bg-white/70'
+                      }`}
+                      aria-label={`Go to slide ${index + 1}`}
+                      onClick={() => setCurrentSlide(index)}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        </SelectableBlock>
+
+        {/* Tasarim modunda slayt secici; secilebilir blogun disinda durur ki tiklamalar yutulmasin. */}
+        {isDesignMode && slideCount > 0 && (
+          <div className="absolute bottom-24 left-1/2 z-30 flex -translate-x-1/2 gap-2 rounded-full bg-black/40 px-3 py-2 backdrop-blur">
+            {slides.map((slide, index) => (
               <Button
-                key={`editor-slide-${index}`}
+                key={`editor-slide-${slide.titleKey || index}`}
                 type="button"
-                onClick={() => {
-                  setCurrentSlide(index)
-                  handleSelectBlock(`slide-${index}`)
-                }}
                 variant="plain"
                 className={`!h-auto !rounded-full !px-3 !py-1 text-xs font-semibold text-white transition ${
                   selectedBlockId === `slide-${index}` ? 'bg-sky-500' : 'bg-white/20 hover:bg-white/30'
                 }`}
+                onClick={() => {
+                  setCurrentSlide(index)
+                  selectBlock(`slide-${index}`)
+                }}
               >
                 Slide {index + 1}
               </Button>
@@ -1088,48 +730,44 @@ const Home: React.FC = () => {
           </div>
         )}
       </div>
-      </SelectableBlock>
 
       {/* Features */}
-      <section className="py-20 bg-white dark:bg-gray-950">
+      <section className="bg-white py-20 dark:bg-gray-950">
         <div className="container mx-auto px-4">
           <SelectableBlock
             id="features-heading"
+            label="Features"
             isActive={selectedBlockId === 'features-heading'}
             isDesignMode={isDesignMode}
-            onSelect={handleSelectBlock}
+            onSelect={selectBlock}
           >
-          <div className="text-center mb-16">
-            <h2 className={`${content?.featuresTitleStyle || HOME_FEATURES_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
-              {content?.featuresTitle}
-            </h2>
-            <p className={`${content?.featuresSubtitleStyle || HOME_FEATURES_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
-              {content?.featuresSubtitle}
-            </p>
-          </div>
+            <div className="mb-16 text-center">
+              <h2 className={content?.featuresTitleStyle || FEATURES_TITLE_STYLE_DEFAULT}>
+                {content?.featuresTitle}
+              </h2>
+              <p className={content?.featuresSubtitleStyle || FEATURES_SUBTITLE_STYLE_DEFAULT}>
+                {content?.featuresSubtitle}
+              </p>
+            </div>
           </SelectableBlock>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {(content?.features || []).map((feature, i) => (
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+            {content?.features.map((feature, index) => (
               <SelectableBlock
-                key={i}
-                id={`feature-${i}`}
-                isActive={selectedBlockId === `feature-${i}`}
+                key={feature.titleKey || index}
+                id={`feature-${index}`}
+                label={`Feature ${index + 1}`}
+                isActive={selectedBlockId === `feature-${index}`}
                 isDesignMode={isDesignMode}
-                onSelect={handleSelectBlock}
+                onSelect={selectBlock}
               >
-              <div
-                className={`${feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT} dark:bg-gray-900 dark:shadow-gray-950/40`}
-              >
-                <div className="mb-6">
-                  {(() => {
-                    const IconComponent = navigationIcon[feature.icon || '']
-                    return IconComponent ? <IconComponent className="w-12 h-12 text-blue-500" /> : null
-                  })()}
+                <div className={feature.styleClass || FEATURE_CARD_STYLE_DEFAULT}>
+                  <PageIcon name={feature.icon} className="mb-6 h-12 w-12 text-blue-500" />
+                  <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                    {feature.title}
+                  </h2>
+                  <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
                 </div>
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{feature.title}</h2>
-                <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
-              </div>
               </SelectableBlock>
             ))}
           </div>
@@ -1137,42 +775,39 @@ const Home: React.FC = () => {
       </section>
 
       {/* Solutions */}
-      <section className="py-20 bg-gray-50 dark:bg-gray-900">
+      <section className="bg-gray-50 py-20 dark:bg-gray-900">
         <div className="container mx-auto px-4">
           <SelectableBlock
             id="solutions-heading"
+            label="Solutions"
             isActive={selectedBlockId === 'solutions-heading'}
             isDesignMode={isDesignMode}
-            onSelect={handleSelectBlock}
+            onSelect={selectBlock}
           >
-          <div className="text-center mb-16">
-            <h2 className={`${content?.solutionsTitleStyle || HOME_SOLUTIONS_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
-              {content?.solutionsTitle}
-            </h2>
-            <p className={`${content?.solutionsSubtitleStyle || HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
-              {content?.solutionsSubtitle}
-            </p>
-          </div>
+            <div className="mb-16 text-center">
+              <h2 className={content?.solutionsTitleStyle || SOLUTIONS_TITLE_STYLE_DEFAULT}>
+                {content?.solutionsTitle}
+              </h2>
+              <p className={content?.solutionsSubtitleStyle || SOLUTIONS_SUBTITLE_STYLE_DEFAULT}>
+                {content?.solutionsSubtitle}
+              </p>
+            </div>
           </SelectableBlock>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {(content?.solutions || []).map((s, i) => (
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+            {content?.solutions.map((solution, index) => (
               <SelectableBlock
-                key={i}
-                id={`solution-${i}`}
-                isActive={selectedBlockId === `solution-${i}`}
+                key={solution.titleKey || index}
+                id={`solution-${index}`}
+                label={`Solution ${index + 1}`}
+                isActive={selectedBlockId === `solution-${index}`}
                 isDesignMode={isDesignMode}
-                onSelect={handleSelectBlock}
+                onSelect={selectBlock}
               >
-                <div className={`${s.colorClass} ${s.styleClass || 'p-8 h-full rounded-2xl'}`}>
-                  <div className="mb-6">
-                    {(() => {
-                      const IconComponent = navigationIcon[s.icon || '']
-                      return IconComponent ? <IconComponent className="w-16 h-16 text-white" /> : null
-                    })()}
-                  </div>
-                  <h3 className="text-2xl font-semibold text-white mb-4">{s.title}</h3>
-                  <p className="text-white/90">{s.description}</p>
+                <div className={`${solution.colorClass} ${solution.styleClass || SOLUTION_CARD_STYLE_DEFAULT}`}>
+                  <PageIcon name={solution.icon} className="mb-6 h-16 w-16 text-white" />
+                  <h3 className="mb-4 text-2xl font-semibold text-white">{solution.title}</h3>
+                  <p className="text-white/90">{solution.description}</p>
                 </div>
               </SelectableBlock>
             ))}
@@ -1180,47 +815,31 @@ const Home: React.FC = () => {
         </div>
       </section>
 
-      {/* Call to Action */}
+      {/* CTA */}
       <SelectableBlock
         id="cta"
+        label="CTA"
         isActive={selectedBlockId === 'cta'}
         isDesignMode={isDesignMode}
-        onSelect={handleSelectBlock}
+        onSelect={selectBlock}
       >
-      <section className="bg-blue-900 py-16 dark:bg-gray-800">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className={content?.ctaTitleStyle}>{content?.ctaTitle}</h2>
-          <p className={content?.ctaSubtitleStyle}>{content?.ctaSubtitle}</p>
-          <Link
-            to={ROUTES_ENUM.public.contact}
-            className={content?.ctaButtonStyle}
-          >
-            {content?.ctaButtonLabel}
-          </Link>
-        </div>
-      </section>
+        <section className="bg-blue-900 py-16 dark:bg-gray-800">
+          <div className="container mx-auto px-4 text-center">
+            <h2 className={content?.ctaTitleStyle || CTA_TITLE_STYLE_DEFAULT}>{content?.ctaTitle}</h2>
+            <p className={content?.ctaSubtitleStyle || CTA_SUBTITLE_STYLE_DEFAULT}>
+              {content?.ctaSubtitle}
+            </p>
+            <Link
+              to={ROUTES_ENUM.public.contact}
+              className={content?.ctaButtonStyle || CTA_BUTTON_STYLE_DEFAULT}
+            >
+              {content?.ctaButtonLabel}
+            </Link>
+          </div>
+        </section>
       </SelectableBlock>
 
-      <DesignerDrawer
-        isOpen={isDesignMode && isPanelVisible}
-        selection={selectedSelection}
-        pageTitle="Home"
-        selectedLanguage={selectedLanguage}
-        languages={
-          languageOptions.length > 0
-            ? languageOptions
-            : supportedLanguages.map((language) => ({
-                key: language,
-                cultureName: language,
-                displayName: language.toUpperCase(),
-              }))
-        }
-        onClose={() => setIsPanelVisible(false)}
-        onSave={handleSaveAndExit}
-        onLanguageChange={handleLanguageChange}
-        onReset={resetContent}
-        onFieldChange={handleFieldChange}
-      />
+      <DesignerLayer pageTitle="Home" selection={selection} designer={designer} />
     </div>
   )
 }
diff --git a/ui/src/views/public/NotFound.tsx b/ui/src/views/public/NotFound.tsx
index af849283..45bfc800 100644
--- a/ui/src/views/public/NotFound.tsx
+++ b/ui/src/views/public/NotFound.tsx
@@ -1,23 +1,28 @@
-import React from 'react';
-import { FaFrown } from 'react-icons/fa';
-import { ROUTES_ENUM } from '@/routes/route.constant';
-import { useLocalization } from '@/utils/hooks/useLocalization';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FaFrown } from 'react-icons/fa'
+import { ROUTES_ENUM } from '@/routes/route.constant'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 
 const NotFound: React.FC = () => {
   const { translate } = useLocalization()
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-white text-gray-700 p-4 dark:bg-gray-950 dark:text-gray-300"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */}
-      <FaFrown size={128} className="text-blue-600 mb-6" /> {/* İkon boyutu ve rengi güncellendi */}
-      <h1 className="text-7xl font-bold text-gray-900 mb-4 dark:text-gray-100">404</h1> {/* Başlık boyutu ve rengi güncellendi */}
-      <p className="text-xl text-gray-600 mb-8 text-center max-w-md dark:text-gray-300"> {/* Metin rengi, margin ve max-width güncellendi */}
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white p-4 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
+      <FaFrown size={128} className="mb-6 text-blue-600" />
+      <h1 className="mb-4 text-7xl font-bold text-gray-900 dark:text-gray-100">404</h1>
+      <p className="mb-8 max-w-md text-center text-xl text-gray-600 dark:text-gray-300">
         {translate('::Public.notFound.message')}
       </p>
-      <a href={ROUTES_ENUM.public.home} className="bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300 text-lg font-semibold"> {/* Buton stili güncellendi */}
+      {/* `<a href>` tam sayfa yeniden yukleme yapiyordu; SPA yonlendirmesi kullanilir. */}
+      <Link
+        to={ROUTES_ENUM.public.home}
+        className="rounded-lg bg-blue-600 px-6 py-3 text-lg font-semibold text-white transition duration-300 hover:bg-blue-700"
+      >
         {translate('::Public.notFound.button')}
-      </a>
+      </Link>
     </div>
-  );
-};
+  )
+}
 
-export default NotFound;
+export default NotFound
diff --git a/ui/src/views/public/Payment.tsx b/ui/src/views/public/Payment.tsx
index 7f192bd7..bb1adcd6 100644
--- a/ui/src/views/public/Payment.tsx
+++ b/ui/src/views/public/Payment.tsx
@@ -1,6 +1,5 @@
 import { Basket } from '@/components/orders/Basket'
 import { PaymentForm } from '@/components/orders/PaymentForm'
-import { Loading } from '@/components/shared'
 import { APP_NAME } from '@/constants/app.constant'
 import { CustomTenantDto } from '@/proxy/config/models'
 import { OrderDto } from '@/proxy/order/models'
@@ -17,6 +16,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import React, { useState, useEffect } from 'react'
 import { Helmet } from 'react-helmet'
 import { useNavigate } from 'react-router-dom'
+import { PublicPageLoader } from './shared'
 
 const Payment: React.FC = () => {
   const navigate = useNavigate()
@@ -115,13 +115,7 @@ const Payment: React.FC = () => {
   }
 
   if (!tenant) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={!tenant} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
@@ -133,15 +127,7 @@ const Payment: React.FC = () => {
       ></Helmet>
 
       {/* Hero Section */}
-      <div className="relative bg-blue-900 text-white py-12">
-        <div
-          className="absolute inset-0 opacity-20"
-          style={{
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        ></div>
-      </div>
+      <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950" />
 
       <div className="container mx-auto px-4 pt-4">
         <PaymentForm
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index 544ce8d2..c3411881 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -1,27 +1,43 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { FaCheckCircle } from 'react-icons/fa'
-import { useNavigate } from 'react-router-dom'
-import { useLocalization } from '@/utils/hooks/useLocalization'
-import { ROUTES_ENUM } from '@/routes/route.constant'
+import { Link } from 'react-router-dom'
 import { Helmet } from 'react-helmet'
 import { ServiceDto } from '@/proxy/services/models'
 import { getServices, saveServicesPage } from '@/services/service.service'
-import navigationIcon from '@/proxy/menus/navigation-icon.config'
-import { Loading } from '@/components/shared'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { ROUTES_ENUM } from '@/routes/route.constant'
 import { APP_NAME } from '@/constants/app.constant'
-import { useStoreState, useStoreActions } from '@/store'
-import DesignerDrawer from './designer/DesignerDrawer'
-import SelectableBlock from './designer/SelectableBlock'
-import { DesignerSelection } from './designer/types'
-import { useDesignerState } from './designer/useDesignerState'
-import { Button, Notification, toast } from '@/components/ui'
+import { PUBLIC_PAGE_DESIGN } from '@/constants/permission.constant'
+import {
+  DesignerLayer,
+  DesignerField,
+  DesignerSelection,
+  SelectableBlock,
+  TranslateFn,
+  iconField,
+  imageField,
+  isLikelyLocalizationKey,
+  resolveLocalizedValue,
+  styleField,
+  textAreaField,
+  textField,
+  translateLabel,
+  usePageDesigner,
+} from './designer'
+import { designerPageClass, getIconColor } from './pageStyles'
+import { PageIcon, PublicPageLoader } from './shared'
+
+interface ServiceFeatureContent {
+  key: string
+  value: string
+}
 
 interface ServiceCardContent {
   icon: string
   title: string
   titleKey: string
   description: string
-  descriptionKey?: string
+  descriptionKey: string
   cardStyleClassKey: string
   cardStyleClass: string
   titleStyleClassKey: string
@@ -30,10 +46,7 @@ interface ServiceCardContent {
   descriptionStyleClass: string
   featureStyleClassKey: string
   featureStyleClass: string
-  features: Array<{
-    key: string
-    value: string
-  }>
+  features: ServiceFeatureContent[]
 }
 
 interface SupportCardContent {
@@ -44,10 +57,7 @@ interface SupportCardContent {
   cardStyleClass: string
   titleStyleClassKey: string
   titleStyleClass: string
-  features: Array<{
-    key: string
-    value: string
-  }>
+  features: ServiceFeatureContent[]
 }
 
 interface ServicesContent {
@@ -98,7 +108,9 @@ const SERVICES_SUPPORT_TITLE_KEY = 'Public.services.support.title'
 const SERVICES_SUPPORT_BUTTON_KEY = 'Public.services.support.contactButton'
 const SERVICES_CTA_TITLE_KEY = 'Public.services.cta.title'
 const SERVICES_CTA_DESCRIPTION_KEY = 'Public.services.cta.description'
-const SERVICES_CTA_BUTTON_KEY = 'Public.services.support.contactButton'
+// Destek karti ve CTA butonu ayni anahtari paylastigi icin biri duzenlendiginde digeri de
+// degisiyordu; CTA butonu artik kendi anahtarini kullanir, ceviri yoksa destek metnine duser.
+const SERVICES_CTA_BUTTON_KEY = 'Public.services.cta.contactButton'
 const SERVICES_HERO_SECTION_STYLE_KEY = 'Public.services.hero.sectionStyleClass'
 const SERVICES_HERO_TITLE_STYLE_KEY = 'Public.services.hero.titleStyleClass'
 const SERVICES_HERO_SUBTITLE_STYLE_KEY = 'Public.services.hero.subtitleStyleClass'
@@ -109,31 +121,36 @@ const SERVICES_CTA_TITLE_STYLE_KEY = 'Public.services.cta.titleStyleClass'
 const SERVICES_CTA_DESCRIPTION_STYLE_KEY = 'Public.services.cta.descriptionStyleClass'
 const SERVICES_CTA_BUTTON_STYLE_KEY = 'Public.services.cta.buttonStyleClass'
 
-function isLikelyLocalizationKey(value?: string) {
-  return Boolean(value && /^[A-Za-z0-9_.-]+$/.test(value) && value.includes('.'))
+const HERO_SECTION_STYLE_DEFAULT = 'relative bg-blue-900 text-white py-12 dark:bg-gray-950'
+const HERO_TITLE_STYLE_DEFAULT = 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'
+const HERO_SUBTITLE_STYLE_DEFAULT = 'text-xl max-w-3xl ml-4'
+const SERVICE_CARD_STYLE_DEFAULT =
+  'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow dark:shadow-gray-950/40'
+const SERVICE_TITLE_STYLE_DEFAULT = 'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4'
+const SERVICE_DESCRIPTION_STYLE_DEFAULT = 'text-gray-600 dark:text-gray-300 mb-6'
+const SERVICE_FEATURE_STYLE_DEFAULT = 'flex items-center text-gray-700 dark:text-gray-300'
+const SUPPORT_CARD_STYLE_DEFAULT =
+  'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border border-gray-200 dark:border-gray-700 dark:shadow-gray-950/40'
+const SUPPORT_TITLE_STYLE_DEFAULT = 'text-xl font-bold mb-4 text-gray-900 dark:text-gray-100'
+const SUPPORT_HEADING_STYLE_DEFAULT = 'text-3xl font-bold text-center mb-10 text-gray-900 dark:text-gray-100'
+const SUPPORT_BUTTON_STYLE_DEFAULT =
+  'block text-center bg-blue-600 text-white font-medium px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white'
+const CTA_SECTION_STYLE_DEFAULT = 'bg-blue-900 text-white py-16 dark:bg-gray-800'
+const CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold mb-6 text-white'
+const CTA_DESCRIPTION_STYLE_DEFAULT = 'text-xl mb-8 max-w-2xl mx-auto'
+const CTA_BUTTON_STYLE_DEFAULT =
+  'inline-block bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors'
+
+function buildFeatures(features: string[] | undefined, prefix: string, translate: TranslateFn) {
+  return (features ?? []).map((feature, index) => ({
+    key: (isLikelyLocalizationKey(feature) ? feature : '') || `${prefix}.feature.${index + 1}`,
+    value: resolveLocalizedValue(translate, feature, feature),
+  }))
 }
 
-function resolveLocalizedValue(
-  translate: (key: string) => string,
-  keyOrValue: string | undefined,
-  fallback = '',
-) {
-  if (!keyOrValue) {
-    return fallback
-  }
+function buildServicesContent(services: ServiceDto[], translate: TranslateFn): ServicesContent {
+  const supportButtonLabel = resolveLocalizedValue(translate, SERVICES_SUPPORT_BUTTON_KEY)
 
-  if (!isLikelyLocalizationKey(keyOrValue)) {
-    return keyOrValue
-  }
-
-  const translatedValue = translate('::' + keyOrValue)
-  return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
-}
-
-function buildServicesContent(
-  services: ServiceDto[],
-  translate: (key: string) => string,
-): ServicesContent {
   return {
     heroTitle: resolveLocalizedValue(translate, SERVICES_HERO_TITLE_KEY, 'Services'),
     heroTitleKey: SERVICES_HERO_TITLE_KEY,
@@ -141,13 +158,13 @@ function buildServicesContent(
     heroSectionStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_HERO_SECTION_STYLE_KEY,
-      'relative bg-blue-900 text-white py-12',
+      HERO_SECTION_STYLE_DEFAULT,
     ),
     heroTitleStyleClassKey: SERVICES_HERO_TITLE_STYLE_KEY,
     heroTitleStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_HERO_TITLE_STYLE_KEY,
-      'text-5xl font-bold ml-4 mt-3 mb-2 text-white',
+      HERO_TITLE_STYLE_DEFAULT,
     ),
     heroSubtitle: resolveLocalizedValue(translate, SERVICES_HERO_SUBTITLE_KEY),
     heroSubtitleKey: SERVICES_HERO_SUBTITLE_KEY,
@@ -155,95 +172,89 @@ function buildServicesContent(
     heroSubtitleStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_HERO_SUBTITLE_STYLE_KEY,
-      'text-xl max-w-3xl ml-4',
+      HERO_SUBTITLE_STYLE_DEFAULT,
     ),
     heroImage: resolveLocalizedValue(translate, SERVICES_HERO_IMAGE_KEY, SERVICES_HERO_IMAGE),
     heroImageKey: SERVICES_HERO_IMAGE_KEY,
     serviceItems: services
       .filter((item) => item.type === 'service')
-      .map((item, index) => ({
-        icon: item.icon || '',
-        title: resolveLocalizedValue(translate, item.title, item.title),
-        titleKey:
-          (isLikelyLocalizationKey(item.title) ? item.title : undefined) ||
-          `Public.services.dynamic.service.${index + 1}.title`,
-        description: resolveLocalizedValue(translate, item.description, item.description || ''),
-        descriptionKey:
-          (item.description && isLikelyLocalizationKey(item.description) ? item.description : undefined) ||
-          `Public.services.dynamic.service.${index + 1}.description`,
-        cardStyleClassKey: `Public.services.dynamic.service.${index + 1}.cardStyleClass`,
-        cardStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.services.dynamic.service.${index + 1}.cardStyleClass`,
-          'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow dark:shadow-gray-950/40',
-        ),
-        titleStyleClassKey: `Public.services.dynamic.service.${index + 1}.titleStyleClass`,
-        titleStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.services.dynamic.service.${index + 1}.titleStyleClass`,
-          'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
-        ),
-        descriptionStyleClassKey: `Public.services.dynamic.service.${index + 1}.descriptionStyleClass`,
-        descriptionStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.services.dynamic.service.${index + 1}.descriptionStyleClass`,
-          'text-gray-600 dark:text-gray-300 mb-6',
-        ),
-        featureStyleClassKey: `Public.services.dynamic.service.${index + 1}.featureStyleClass`,
-        featureStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.services.dynamic.service.${index + 1}.featureStyleClass`,
-          'flex items-center text-gray-700 dark:text-gray-300',
-        ),
-        features: (item.features ?? []).map((feature, featureIndex) => ({
-          key:
-            (isLikelyLocalizationKey(feature) ? feature : undefined) ||
-            `Public.services.dynamic.service.${index + 1}.feature.${featureIndex + 1}`,
-          value: resolveLocalizedValue(translate, feature, feature),
-        })),
-      })),
+      .map((item, index) => {
+        const prefix = `Public.services.dynamic.service.${index + 1}`
+
+        return {
+          icon: item.icon || '',
+          title: resolveLocalizedValue(translate, item.title, item.title),
+          titleKey: (isLikelyLocalizationKey(item.title) ? item.title : '') || `${prefix}.title`,
+          description: resolveLocalizedValue(translate, item.description, item.description || ''),
+          descriptionKey:
+            (item.description && isLikelyLocalizationKey(item.description) ? item.description : '') ||
+            `${prefix}.description`,
+          cardStyleClassKey: `${prefix}.cardStyleClass`,
+          cardStyleClass: resolveLocalizedValue(
+            translate,
+            `${prefix}.cardStyleClass`,
+            SERVICE_CARD_STYLE_DEFAULT,
+          ),
+          titleStyleClassKey: `${prefix}.titleStyleClass`,
+          titleStyleClass: resolveLocalizedValue(
+            translate,
+            `${prefix}.titleStyleClass`,
+            SERVICE_TITLE_STYLE_DEFAULT,
+          ),
+          descriptionStyleClassKey: `${prefix}.descriptionStyleClass`,
+          descriptionStyleClass: resolveLocalizedValue(
+            translate,
+            `${prefix}.descriptionStyleClass`,
+            SERVICE_DESCRIPTION_STYLE_DEFAULT,
+          ),
+          featureStyleClassKey: `${prefix}.featureStyleClass`,
+          featureStyleClass: resolveLocalizedValue(
+            translate,
+            `${prefix}.featureStyleClass`,
+            SERVICE_FEATURE_STYLE_DEFAULT,
+          ),
+          features: buildFeatures(item.features, prefix, translate),
+        }
+      }),
     supportTitle: resolveLocalizedValue(translate, SERVICES_SUPPORT_TITLE_KEY),
     supportTitleKey: SERVICES_SUPPORT_TITLE_KEY,
     supportTitleStyleClassKey: SERVICES_SUPPORT_TITLE_STYLE_KEY,
     supportTitleStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_SUPPORT_TITLE_STYLE_KEY,
-      'text-3xl font-bold text-center mb-10',
+      SUPPORT_HEADING_STYLE_DEFAULT,
     ),
     supportButtonStyleClassKey: SERVICES_SUPPORT_BUTTON_STYLE_KEY,
     supportButtonStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_SUPPORT_BUTTON_STYLE_KEY,
-      'block text-center bg-blue-600 text-white font-medium px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white',
+      SUPPORT_BUTTON_STYLE_DEFAULT,
     ),
     supportItems: services
       .filter((item) => item.type === 'support')
-      .map((item, index) => ({
-        icon: item.icon || '',
-        title: resolveLocalizedValue(translate, item.title, item.title),
-        titleKey:
-          (isLikelyLocalizationKey(item.title) ? item.title : undefined) ||
-          `Public.services.dynamic.support.${index + 1}.title`,
-        cardStyleClassKey: `Public.services.dynamic.support.${index + 1}.cardStyleClass`,
-        cardStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.services.dynamic.support.${index + 1}.cardStyleClass`,
-          'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border border-gray-200 dark:border-gray-700 dark:shadow-gray-950/40',
-        ),
-        titleStyleClassKey: `Public.services.dynamic.support.${index + 1}.titleStyleClass`,
-        titleStyleClass: resolveLocalizedValue(
-          translate,
-          `Public.services.dynamic.support.${index + 1}.titleStyleClass`,
-          'text-xl font-bold mb-4',
-        ),
-        features: (item.features ?? []).map((feature, featureIndex) => ({
-          key:
-            (isLikelyLocalizationKey(feature) ? feature : undefined) ||
-            `Public.services.dynamic.support.${index + 1}.feature.${featureIndex + 1}`,
-          value: resolveLocalizedValue(translate, feature, feature),
-        })),
-      })),
-    supportButtonLabel: resolveLocalizedValue(translate, SERVICES_SUPPORT_BUTTON_KEY),
+      .map((item, index) => {
+        const prefix = `Public.services.dynamic.support.${index + 1}`
+
+        return {
+          icon: item.icon || '',
+          title: resolveLocalizedValue(translate, item.title, item.title),
+          titleKey: (isLikelyLocalizationKey(item.title) ? item.title : '') || `${prefix}.title`,
+          cardStyleClassKey: `${prefix}.cardStyleClass`,
+          cardStyleClass: resolveLocalizedValue(
+            translate,
+            `${prefix}.cardStyleClass`,
+            SUPPORT_CARD_STYLE_DEFAULT,
+          ),
+          titleStyleClassKey: `${prefix}.titleStyleClass`,
+          titleStyleClass: resolveLocalizedValue(
+            translate,
+            `${prefix}.titleStyleClass`,
+            SUPPORT_TITLE_STYLE_DEFAULT,
+          ),
+          features: buildFeatures(item.features, prefix, translate),
+        }
+      }),
+    supportButtonLabel,
     supportButtonLabelKey: SERVICES_SUPPORT_BUTTON_KEY,
     ctaTitle: resolveLocalizedValue(translate, SERVICES_CTA_TITLE_KEY),
     ctaTitleKey: SERVICES_CTA_TITLE_KEY,
@@ -251,13 +262,13 @@ function buildServicesContent(
     ctaSectionStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_CTA_SECTION_STYLE_KEY,
-      'bg-blue-900 text-white py-16 dark:bg-gray-800',
+      CTA_SECTION_STYLE_DEFAULT,
     ),
     ctaTitleStyleClassKey: SERVICES_CTA_TITLE_STYLE_KEY,
     ctaTitleStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_CTA_TITLE_STYLE_KEY,
-      'text-3xl font-bold mb-6 text-white dark:text-gray-300',
+      CTA_TITLE_STYLE_DEFAULT,
     ),
     ctaDescription: resolveLocalizedValue(translate, SERVICES_CTA_DESCRIPTION_KEY),
     ctaDescriptionKey: SERVICES_CTA_DESCRIPTION_KEY,
@@ -265,94 +276,113 @@ function buildServicesContent(
     ctaDescriptionStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_CTA_DESCRIPTION_STYLE_KEY,
-      'text-xl mb-8 max-w-2xl mx-auto',
+      CTA_DESCRIPTION_STYLE_DEFAULT,
     ),
-    ctaButtonLabel: resolveLocalizedValue(translate, SERVICES_CTA_BUTTON_KEY),
+    ctaButtonLabel: resolveLocalizedValue(translate, SERVICES_CTA_BUTTON_KEY, supportButtonLabel),
     ctaButtonLabelKey: SERVICES_CTA_BUTTON_KEY,
     ctaButtonStyleClassKey: SERVICES_CTA_BUTTON_STYLE_KEY,
     ctaButtonStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_CTA_BUTTON_STYLE_KEY,
-      'bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors',
+      CTA_BUTTON_STYLE_DEFAULT,
     ),
   }
 }
 
+function toSaveInput(content: ServicesContent, cultureName: string) {
+  return {
+    cultureName,
+    heroTitleKey: content.heroTitleKey,
+    heroTitleValue: content.heroTitle,
+    heroSubtitleKey: content.heroSubtitleKey,
+    heroSubtitleValue: content.heroSubtitle,
+    heroImageKey: content.heroImageKey,
+    heroImageValue: content.heroImage,
+    supportTitleKey: content.supportTitleKey,
+    supportTitleValue: content.supportTitle,
+    supportButtonLabelKey: content.supportButtonLabelKey,
+    supportButtonLabelValue: content.supportButtonLabel,
+    ctaTitleKey: content.ctaTitleKey,
+    ctaTitleValue: content.ctaTitle,
+    ctaDescriptionKey: content.ctaDescriptionKey,
+    ctaDescriptionValue: content.ctaDescription,
+    ctaButtonLabelKey: content.ctaButtonLabelKey,
+    ctaButtonLabelValue: content.ctaButtonLabel,
+    serviceItems: content.serviceItems.map((item, index) => ({
+      icon: item.icon,
+      titleKey: item.titleKey || `Public.services.dynamic.service.${index + 1}.title`,
+      titleValue: item.title,
+      descriptionKey: item.descriptionKey || `Public.services.dynamic.service.${index + 1}.description`,
+      descriptionValue: item.description,
+      type: 'service' as const,
+      features: item.features.map((feature, featureIndex) => ({
+        key: feature.key || `Public.services.dynamic.service.${index + 1}.feature.${featureIndex + 1}`,
+        value: feature.value,
+      })),
+    })),
+    supportItems: content.supportItems.map((item, index) => ({
+      icon: item.icon,
+      titleKey: item.titleKey || `Public.services.dynamic.support.${index + 1}.title`,
+      titleValue: item.title,
+      type: 'support' as const,
+      features: item.features.map((feature, featureIndex) => ({
+        key: feature.key || `Public.services.dynamic.support.${index + 1}.feature.${featureIndex + 1}`,
+        value: feature.value,
+      })),
+    })),
+    styleTexts: [
+      { key: content.heroSectionStyleClassKey, value: content.heroSectionStyleClass },
+      { key: content.heroTitleStyleClassKey, value: content.heroTitleStyleClass },
+      { key: content.heroSubtitleStyleClassKey, value: content.heroSubtitleStyleClass },
+      { key: content.supportTitleStyleClassKey, value: content.supportTitleStyleClass },
+      { key: content.supportButtonStyleClassKey, value: content.supportButtonStyleClass },
+      { key: content.ctaSectionStyleClassKey, value: content.ctaSectionStyleClass },
+      { key: content.ctaTitleStyleClassKey, value: content.ctaTitleStyleClass },
+      { key: content.ctaDescriptionStyleClassKey, value: content.ctaDescriptionStyleClass },
+      { key: content.ctaButtonStyleClassKey, value: content.ctaButtonStyleClass },
+      ...content.serviceItems.flatMap((item) => [
+        { key: item.cardStyleClassKey, value: item.cardStyleClass },
+        { key: item.titleStyleClassKey, value: item.titleStyleClass },
+        { key: item.descriptionStyleClassKey, value: item.descriptionStyleClass },
+        { key: item.featureStyleClassKey, value: item.featureStyleClass },
+      ]),
+      ...content.supportItems.flatMap((item) => [
+        { key: item.cardStyleClassKey, value: item.cardStyleClass },
+        { key: item.titleStyleClassKey, value: item.titleStyleClass },
+      ]),
+    ],
+  }
+}
+
+function featureFields(
+  pathPrefix: string,
+  features: ServiceFeatureContent[],
+  fallbackPrefix: string,
+): DesignerField[] {
+  return features.map((feature, index) =>
+    textField(
+      `${pathPrefix}.features.${index}.value`,
+      feature.key || `${fallbackPrefix}.feature.${index + 1}`,
+      feature.value,
+    ),
+  )
+}
+
 const Services: React.FC = () => {
   const { translate } = useLocalization()
-  const navigate = useNavigate()
-  const { setLang } = useStoreActions((actions) => actions.locale)
-  const { getConfig } = useStoreActions((actions) => actions.abpConfig)
-  const configCultureName = useStoreState(
-    (state) => state.abpConfig.config?.localization.currentCulture.cultureName,
-  )
-  const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
-  const currentLanguage = configCultureName || localeCurrentLang || 'tr'
-  const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages) || []
-  const languageOptions = abpLanguages
-    .filter((language) => Boolean(language.cultureName))
-    .map((language) => {
-      const cultureName = language.cultureName || 'tr'
-      return {
-        key: cultureName.toLowerCase().split('-')[0],
-        cultureName,
-        displayName: language.displayName || cultureName,
-      }
-    })
-  const languagesFromConfig = languageOptions.map((language) => language.key)
-  const editorLanguages = Array.from(
-    new Set((languagesFromConfig.length > 0 ? languagesFromConfig : [currentLanguage]).filter(Boolean)),
-  )
   const [services, setServices] = useState<ServiceDto[]>([])
   const [loading, setLoading] = useState(true)
-  const [isSaving, setIsSaving] = useState(false)
-  const [isPanelVisible, setIsPanelVisible] = useState(true)
-
-  const iconColors = [
-    'text-blue-600',
-    'text-red-600',
-    'text-green-600',
-    'text-purple-600',
-    'text-yellow-600',
-    'text-indigo-600',
-  ]
-
-  function getIconColor(index: number) {
-    return iconColors[index % iconColors.length]
-  }
-
-  const initialContent = !loading ? buildServicesContent(services, translate) : null
-  const {
-    content,
-    isDesignMode,
-    selectedBlockId,
-    selectedLanguage,
-    supportedLanguages,
-    setContent,
-    setSelectedBlockId,
-    resetContent,
-  } = useDesignerState<ServicesContent>('services', initialContent, {
-    currentLanguage,
-    supportedLanguages: editorLanguages,
-  })
 
   useEffect(() => {
-    setLoading(true)
-
     const fetchServices = async () => {
+      setLoading(true)
+
       try {
         const result = await getServices()
-        const items = result?.data?.map((service: ServiceDto) => ({
-          icon: service.icon,
-          title: service.title,
-          description: service.description,
-          type: service.type,
-          features: service.features ?? [],
-        }))
-
-        setServices(items)
+        setServices(result?.data ?? [])
       } catch (error) {
-        console.error('Service listesi alınırken hata oluştu:', error)
+        console.error('Service listesi alinirken hata olustu:', error)
+        setServices([])
       } finally {
         setLoading(false)
       }
@@ -361,126 +391,21 @@ const Services: React.FC = () => {
     fetchServices()
   }, [])
 
-  const updateContent = (updater: (current: ServicesContent) => ServicesContent) => {
-    setContent((current) => {
-      if (!current) {
-        return current
-      }
+  const initialContent = useMemo(
+    () => (loading ? null : buildServicesContent(services, translate)),
+    [loading, services, translate],
+  )
 
-      return updater(current)
-    })
-  }
+  const designer = usePageDesigner<ServicesContent>({
+    pageKey: 'Services',
+    permission: PUBLIC_PAGE_DESIGN.SERVICES,
+    initialContent,
+    onSave: (content, cultureName) => saveServicesPage(toSaveInput(content, cultureName)),
+  })
 
-  const handleFieldChange = (fieldKey: string, value: string | string[]) => {
-    updateContent((current) => {
-      if (
-        fieldKey === 'heroTitle' ||
-        fieldKey === 'heroSubtitle' ||
-        fieldKey === 'heroImage' ||
-        fieldKey === 'heroSectionStyleClass' ||
-        fieldKey === 'heroTitleStyleClass' ||
-        fieldKey === 'heroSubtitleStyleClass' ||
-        fieldKey === 'supportTitle' ||
-        fieldKey === 'supportTitleStyleClass' ||
-        fieldKey === 'supportButtonLabel' ||
-        fieldKey === 'supportButtonStyleClass' ||
-        fieldKey === 'ctaTitle' ||
-        fieldKey === 'ctaSectionStyleClass' ||
-        fieldKey === 'ctaTitleStyleClass' ||
-        fieldKey === 'ctaDescription' ||
-        fieldKey === 'ctaDescriptionStyleClass' ||
-        fieldKey === 'ctaButtonLabel'
-        || fieldKey === 'ctaButtonStyleClass'
-      ) {
-        return {
-          ...current,
-          [fieldKey]: value as string,
-        }
-      }
+  const { content, isDesignMode, isPanelVisible, selectedBlockId, selectBlock } = designer
 
-      if (selectedBlockId?.startsWith('service-')) {
-        const index = Number(selectedBlockId.replace('service-', ''))
-        const serviceItems = [...current.serviceItems]
-        const nextItem = { ...serviceItems[index] }
-
-        if (fieldKey.startsWith('feature-')) {
-          const featureIndex = Number(fieldKey.replace('feature-', ''))
-          const features = [...(nextItem.features ?? [])]
-          const existingFeature = features[featureIndex]
-
-          if (!Number.isNaN(featureIndex)) {
-            features[featureIndex] = {
-              key:
-                existingFeature?.key ||
-                `Public.services.dynamic.service.${index + 1}.feature.${featureIndex + 1}`,
-              value: value as string,
-            }
-          }
-
-          nextItem.features = features
-        } else if (fieldKey === 'features') {
-          nextItem.features = (value as string[]).map((feature, featureIndex) => ({
-            key:
-              nextItem.features[featureIndex]?.key ||
-              `Public.services.dynamic.service.${index + 1}.feature.${featureIndex + 1}`,
-            value: feature,
-          }))
-        } else {
-          nextItem[fieldKey as keyof ServiceCardContent] = value as never
-        }
-
-        serviceItems[index] = nextItem
-
-        return {
-          ...current,
-          serviceItems,
-        }
-      }
-
-      if (selectedBlockId?.startsWith('support-')) {
-        const index = Number(selectedBlockId.replace('support-', ''))
-        const supportItems = [...current.supportItems]
-        const nextItem = { ...supportItems[index] }
-
-        if (fieldKey.startsWith('feature-')) {
-          const featureIndex = Number(fieldKey.replace('feature-', ''))
-          const features = [...(nextItem.features ?? [])]
-          const existingFeature = features[featureIndex]
-
-          if (!Number.isNaN(featureIndex)) {
-            features[featureIndex] = {
-              key:
-                existingFeature?.key ||
-                `Public.services.dynamic.support.${index + 1}.feature.${featureIndex + 1}`,
-              value: value as string,
-            }
-          }
-
-          nextItem.features = features
-        } else if (fieldKey === 'features') {
-          nextItem.features = (value as string[]).map((feature, featureIndex) => ({
-            key:
-              nextItem.features[featureIndex]?.key ||
-              `Public.services.dynamic.support.${index + 1}.feature.${featureIndex + 1}`,
-            value: feature,
-          }))
-        } else {
-          nextItem[fieldKey as keyof SupportCardContent] = value as never
-        }
-
-        supportItems[index] = nextItem
-
-        return {
-          ...current,
-          supportItems,
-        }
-      }
-
-      return current
-    })
-  }
-
-  const selectedSelection: DesignerSelection | null = React.useMemo(() => {
+  const selection: DesignerSelection | null = useMemo(() => {
     if (!content || !selectedBlockId) {
       return null
     }
@@ -489,44 +414,26 @@ const Services: React.FC = () => {
       return {
         id: 'hero',
         title: content.heroTitleKey,
-        description: translate('::Public.designer.desc4'),
+        description: translateLabel(
+          translate,
+          'Public.designer.desc4',
+          'Baslik, alt baslik ve arka plan gorselini guncelleyin.',
+        ),
         fields: [
-          {
-            key: 'heroTitle',
-            label: content.heroTitleKey,
-            type: 'text',
-            value: content.heroTitle,
-          },
-          {
-            key: 'heroTitleStyleClass',
-            label: content.heroTitleStyleClassKey,
-            type: 'text',
-            value: content.heroTitleStyleClass,
-          },
-          {
-            key: 'heroSubtitle',
-            label: content.heroSubtitleKey,
-            type: 'textarea',
-            value: content.heroSubtitle,
-          },
-          {
-            key: 'heroSubtitleStyleClass',
-            label: content.heroSubtitleStyleClassKey,
-            type: 'text',
-            value: content.heroSubtitleStyleClass,
-          },
-          {
-            key: 'heroImage',
-            label: content.heroImageKey,
-            type: 'image',
-            value: content.heroImage,
-          },
-          {
-            key: 'heroSectionStyleClass',
-            label: content.heroSectionStyleClassKey,
-            type: 'text',
-            value: content.heroSectionStyleClass,
-          },
+          textField('heroTitle', content.heroTitleKey, content.heroTitle),
+          textAreaField('heroSubtitle', content.heroSubtitleKey, content.heroSubtitle),
+          imageField('heroImage', content.heroImageKey, content.heroImage, { group: 'media' }),
+          styleField('heroTitleStyleClass', content.heroTitleStyleClassKey, content.heroTitleStyleClass),
+          styleField(
+            'heroSubtitleStyleClass',
+            content.heroSubtitleStyleClassKey,
+            content.heroSubtitleStyleClass,
+          ),
+          styleField(
+            'heroSectionStyleClass',
+            content.heroSectionStyleClassKey,
+            content.heroSectionStyleClass,
+          ),
         ],
       }
     }
@@ -535,32 +442,24 @@ const Services: React.FC = () => {
       return {
         id: 'support-heading',
         title: content.supportTitleKey,
-        description: translate('::Public.designer.desc3'),
+        description: translateLabel(
+          translate,
+          'Public.designer.desc3',
+          'Destek bolumu baslik ve butonunu duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'supportTitle',
-            label: content.supportTitleKey,
-            type: 'text',
-            value: content.supportTitle,
-          },
-          {
-            key: 'supportTitleStyleClass',
-            label: content.supportTitleStyleClassKey,
-            type: 'text',
-            value: content.supportTitleStyleClass,
-          },
-          {
-            key: 'supportButtonLabel',
-            label: content.supportButtonLabelKey,
-            type: 'text',
-            value: content.supportButtonLabel,
-          },
-          {
-            key: 'supportButtonStyleClass',
-            label: content.supportButtonStyleClassKey,
-            type: 'text',
-            value: content.supportButtonStyleClass,
-          },
+          textField('supportTitle', content.supportTitleKey, content.supportTitle),
+          textField('supportButtonLabel', content.supportButtonLabelKey, content.supportButtonLabel),
+          styleField(
+            'supportTitleStyleClass',
+            content.supportTitleStyleClassKey,
+            content.supportTitleStyleClass,
+          ),
+          styleField(
+            'supportButtonStyleClass',
+            content.supportButtonStyleClassKey,
+            content.supportButtonStyleClass,
+          ),
         ],
       }
     }
@@ -569,50 +468,27 @@ const Services: React.FC = () => {
       return {
         id: 'cta',
         title: content.ctaTitleKey,
-        description: translate('::Public.designer.desc2'),
+        description: translateLabel(
+          translate,
+          'Public.designer.desc2',
+          'Sayfa alti cagri bolumunu duzenleyin.',
+        ),
         fields: [
-          {
-            key: 'ctaTitle',
-            label: content.ctaTitleKey,
-            type: 'text',
-            value: content.ctaTitle,
-          },
-          {
-            key: 'ctaTitleStyleClass',
-            label: content.ctaTitleStyleClassKey,
-            type: 'text',
-            value: content.ctaTitleStyleClass,
-          },
-          {
-            key: 'ctaDescription',
-            label: content.ctaDescriptionKey,
-            type: 'textarea',
-            value: content.ctaDescription,
-          },
-          {
-            key: 'ctaDescriptionStyleClass',
-            label: content.ctaDescriptionStyleClassKey,
-            type: 'text',
-            value: content.ctaDescriptionStyleClass,
-          },
-          {
-            key: 'ctaButtonLabel',
-            label: content.ctaButtonLabelKey,
-            type: 'text',
-            value: content.ctaButtonLabel,
-          },
-          {
-            key: 'ctaButtonStyleClass',
-            label: content.ctaButtonStyleClassKey,
-            type: 'text',
-            value: content.ctaButtonStyleClass,
-          },
-          {
-            key: 'ctaSectionStyleClass',
-            label: content.ctaSectionStyleClassKey,
-            type: 'text',
-            value: content.ctaSectionStyleClass,
-          },
+          textField('ctaTitle', content.ctaTitleKey, content.ctaTitle),
+          textAreaField('ctaDescription', content.ctaDescriptionKey, content.ctaDescription),
+          textField('ctaButtonLabel', content.ctaButtonLabelKey, content.ctaButtonLabel),
+          styleField('ctaTitleStyleClass', content.ctaTitleStyleClassKey, content.ctaTitleStyleClass),
+          styleField(
+            'ctaDescriptionStyleClass',
+            content.ctaDescriptionStyleClassKey,
+            content.ctaDescriptionStyleClass,
+          ),
+          styleField('ctaButtonStyleClass', content.ctaButtonStyleClassKey, content.ctaButtonStyleClass),
+          styleField(
+            'ctaSectionStyleClass',
+            content.ctaSectionStyleClassKey,
+            content.ctaSectionStyleClass,
+          ),
         ],
       }
     }
@@ -625,61 +501,30 @@ const Services: React.FC = () => {
         return null
       }
 
+      const path = `serviceItems.${index}`
+
       return {
         id: selectedBlockId,
         title: item.titleKey,
-        description: translate('::Public.designer.desc1'),
+        description: translateLabel(translate, 'Public.designer.desc1', 'Kart icerigini duzenleyin.'),
         fields: [
-          {
-            key: 'icon',
-            label: translate('::Public.designer.ikonAnahtari'),
-            type: 'icon',
-            value: item.icon,
-            placeholder: 'Ornek: FaServer',
-          },
-          {
-            key: 'title',
-            label: item.titleKey,
-            type: 'text',
-            value: item.title,
-          },
-          {
-            key: 'description',
-            label: item.descriptionKey || `Public.services.dynamic.service.${index + 1}.description`,
-            type: 'textarea',
-            value: item.description,
-          },
-          {
-            key: 'cardStyleClass',
-            label: item.cardStyleClassKey,
-            type: 'text',
-            value: item.cardStyleClass,
-          },
-          {
-            key: 'titleStyleClass',
-            label: item.titleStyleClassKey,
-            type: 'text',
-            value: item.titleStyleClass,
-          },
-          {
-            key: 'descriptionStyleClass',
-            label: item.descriptionStyleClassKey,
-            type: 'text',
-            value: item.descriptionStyleClass,
-          },
-          {
-            key: 'featureStyleClass',
-            label: item.featureStyleClassKey,
-            type: 'text',
-            value: item.featureStyleClass,
-          },
-          ...item.features.map((feature, featureIndex) => ({
-            key: `feature-${featureIndex}`,
-            label:
-              feature.key || `Public.services.dynamic.service.${index + 1}.feature.${featureIndex + 1}`,
-            type: 'text' as const,
-            value: feature.value,
-          })),
+          iconField(
+            `${path}.icon`,
+            translateLabel(translate, 'Public.designer.ikonAnahtari', 'Ikon anahtari'),
+            item.icon,
+            { placeholder: 'Ornek: FaServer' },
+          ),
+          textField(`${path}.title`, item.titleKey, item.title),
+          textAreaField(`${path}.description`, item.descriptionKey, item.description),
+          ...featureFields(path, item.features, `Public.services.dynamic.service.${index + 1}`),
+          styleField(`${path}.cardStyleClass`, item.cardStyleClassKey, item.cardStyleClass),
+          styleField(`${path}.titleStyleClass`, item.titleStyleClassKey, item.titleStyleClass),
+          styleField(
+            `${path}.descriptionStyleClass`,
+            item.descriptionStyleClassKey,
+            item.descriptionStyleClass,
+          ),
+          styleField(`${path}.featureStyleClass`, item.featureStyleClassKey, item.featureStyleClass),
         ],
       }
     }
@@ -692,389 +537,192 @@ const Services: React.FC = () => {
         return null
       }
 
+      const path = `supportItems.${index}`
+
       return {
         id: selectedBlockId,
         title: item.titleKey,
-        description: translate('::Public.designer.desc1'),
+        description: translateLabel(translate, 'Public.designer.desc1', 'Kart icerigini duzenleyin.'),
         fields: [
-          {
-            key: 'icon',
-            label: translate('::Public.designer.ikonAnahtari'),
-            type: 'icon',
-            value: item.icon,
-            placeholder: 'Ornek: FaLifeRing',
-          },
-          {
-            key: 'title',
-            label: item.titleKey,
-            type: 'text',
-            value: item.title,
-          },
-          {
-            key: 'cardStyleClass',
-            label: item.cardStyleClassKey,
-            type: 'text',
-            value: item.cardStyleClass,
-          },
-          {
-            key: 'titleStyleClass',
-            label: item.titleStyleClassKey,
-            type: 'text',
-            value: item.titleStyleClass,
-          },
-          ...item.features.map((feature, featureIndex) => ({
-            key: `feature-${featureIndex}`,
-            label:
-              feature.key || `Public.services.dynamic.support.${index + 1}.feature.${featureIndex + 1}`,
-            type: 'text' as const,
-            value: feature.value,
-          })),
+          iconField(
+            `${path}.icon`,
+            translateLabel(translate, 'Public.designer.ikonAnahtari', 'Ikon anahtari'),
+            item.icon,
+            { placeholder: 'Ornek: FaLifeRing' },
+          ),
+          textField(`${path}.title`, item.titleKey, item.title),
+          ...featureFields(path, item.features, `Public.services.dynamic.support.${index + 1}`),
+          styleField(`${path}.cardStyleClass`, item.cardStyleClassKey, item.cardStyleClass),
+          styleField(`${path}.titleStyleClass`, item.titleStyleClassKey, item.titleStyleClass),
         ],
       }
     }
 
     return null
-  }, [content, selectedBlockId])
-
-  const handleSaveAndExit = async () => {
-    if (!content || isSaving) {
-      return
-    }
-
-    setIsSaving(true)
-
-    try {
-      await saveServicesPage({
-        cultureName: selectedLanguage,
-        heroTitleKey: content.heroTitleKey,
-        heroTitleValue: content.heroTitle,
-        heroSubtitleKey: content.heroSubtitleKey,
-        heroSubtitleValue: content.heroSubtitle,
-        heroImageKey: content.heroImageKey,
-        heroImageValue: content.heroImage,
-        supportTitleKey: content.supportTitleKey,
-        supportTitleValue: content.supportTitle,
-        supportButtonLabelKey: content.supportButtonLabelKey,
-        supportButtonLabelValue: content.supportButtonLabel,
-        ctaTitleKey: content.ctaTitleKey,
-        ctaTitleValue: content.ctaTitle,
-        ctaDescriptionKey: content.ctaDescriptionKey,
-        ctaDescriptionValue: content.ctaDescription,
-        ctaButtonLabelKey: content.ctaButtonLabelKey,
-        ctaButtonLabelValue: content.ctaButtonLabel,
-        serviceItems: content.serviceItems.map((item, index) => ({
-          icon: item.icon,
-          titleKey: item.titleKey || `Public.services.dynamic.service.${index + 1}.title`,
-          titleValue: item.title,
-          descriptionKey:
-            item.descriptionKey || `Public.services.dynamic.service.${index + 1}.description`,
-          descriptionValue: item.description,
-          type: 'service' as const,
-          features: item.features.map((feature, featureIndex) => ({
-            key:
-              feature.key || `Public.services.dynamic.service.${index + 1}.feature.${featureIndex + 1}`,
-            value: feature.value,
-          })),
-        })),
-        supportItems: content.supportItems.map((item, index) => ({
-          icon: item.icon,
-          titleKey: item.titleKey || `Public.services.dynamic.support.${index + 1}.title`,
-          titleValue: item.title,
-          type: 'support' as const,
-          features: item.features.map((feature, featureIndex) => ({
-            key:
-              feature.key || `Public.services.dynamic.support.${index + 1}.feature.${featureIndex + 1}`,
-            value: feature.value,
-          })),
-        })),
-        styleTexts: [
-          {
-            key: content.heroSectionStyleClassKey,
-            value: content.heroSectionStyleClass,
-          },
-          {
-            key: content.heroTitleStyleClassKey,
-            value: content.heroTitleStyleClass,
-          },
-          {
-            key: content.heroSubtitleStyleClassKey,
-            value: content.heroSubtitleStyleClass,
-          },
-          {
-            key: content.supportTitleStyleClassKey,
-            value: content.supportTitleStyleClass,
-          },
-          {
-            key: content.supportButtonStyleClassKey,
-            value: content.supportButtonStyleClass,
-          },
-          {
-            key: content.ctaSectionStyleClassKey,
-            value: content.ctaSectionStyleClass,
-          },
-          {
-            key: content.ctaTitleStyleClassKey,
-            value: content.ctaTitleStyleClass,
-          },
-          {
-            key: content.ctaDescriptionStyleClassKey,
-            value: content.ctaDescriptionStyleClass,
-          },
-          {
-            key: content.ctaButtonStyleClassKey,
-            value: content.ctaButtonStyleClass,
-          },
-          ...content.serviceItems.flatMap((item) => [
-            {
-              key: item.cardStyleClassKey,
-              value: item.cardStyleClass,
-            },
-            {
-              key: item.titleStyleClassKey,
-              value: item.titleStyleClass,
-            },
-            {
-              key: item.descriptionStyleClassKey,
-              value: item.descriptionStyleClass,
-            },
-            {
-              key: item.featureStyleClassKey,
-              value: item.featureStyleClass,
-            },
-          ]),
-          ...content.supportItems.flatMap((item) => [
-            {
-              key: item.cardStyleClassKey,
-              value: item.cardStyleClass,
-            },
-            {
-              key: item.titleStyleClassKey,
-              value: item.titleStyleClass,
-            },
-          ]),
-        ],
-      })
-
-      await getConfig(false)
-      setSelectedBlockId(null)
-
-      toast.push(
-        <Notification type="success" duration={2000}>
-          {translate('::ListForms.FormBilgileriKaydedildi')}
-        </Notification>,
-        {
-          placement: 'bottom-end',
-        },
-      )
-
-    } catch (error) {
-      console.error('Services tasarimi kaydedilemedi:', error)
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleLanguageChange = (language: string) => {
-    // Wait for global locale/config refresh; designer language follows store state.
-    setLang(language)
-  }
-
-  const handleSelectBlock = (blockId: string) => {
-    setSelectedBlockId(blockId)
-    if (!isPanelVisible) {
-      setIsPanelVisible(true)
-    }
-  }
+  }, [content, selectedBlockId, translate])
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={loading} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
-    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+    <div className={designerPageClass(isDesignMode, isPanelVisible)}>
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::App.Services')}
         defaultTitle={APP_NAME}
-      ></Helmet>
+      />
 
-      {isDesignMode && !isPanelVisible && (
-        <Button
-          type="button"
-          variant='solid'
-          onClick={() => setIsPanelVisible(true)}
-          className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
-        >
-          {translate('::Public.designer.showPanel')}
-        </Button>
-      )}
-
-      {/* Hero Section */}
+      {/* Hero */}
       <SelectableBlock
         id="hero"
+        label="Hero"
         isActive={selectedBlockId === 'hero'}
         isDesignMode={isDesignMode}
-        onSelect={handleSelectBlock}
+        onSelect={selectBlock}
       >
-        <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
+        <div className={content?.heroSectionStyleClass || HERO_SECTION_STYLE_DEFAULT}>
           <div
             className="absolute inset-0 opacity-20 dark:opacity-35"
             style={{
-              backgroundImage: `url("${content?.heroImage ?? SERVICES_HERO_IMAGE}")`,
+              backgroundImage: `url("${content?.heroImage || SERVICES_HERO_IMAGE}")`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
             }}
-          ></div>
-          <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
-          <div className="container mx-auto pt-20 relative">
-            <h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>{content?.heroTitle}</h1>
-            <p className={content?.heroSubtitleStyleClass || 'text-xl max-w-3xl ml-4'}>{content?.heroSubtitle}</p>
+          />
+          <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45" />
+          <div className="container relative mx-auto pt-20">
+            <h1 className={content?.heroTitleStyleClass || HERO_TITLE_STYLE_DEFAULT}>
+              {content?.heroTitle}
+            </h1>
+            <p className={content?.heroSubtitleStyleClass || HERO_SUBTITLE_STYLE_DEFAULT}>
+              {content?.heroSubtitle}
+            </p>
           </div>
         </div>
       </SelectableBlock>
 
-      {/* Services Grid */}
+      {/* Services */}
       <div className="py-6">
         <div className="container mx-auto px-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {content?.serviceItems.map((service, index) => {
-                const IconComponent = navigationIcon[service.icon || '']
-                return (
-                  <SelectableBlock
-                    key={index}
-                    id={`service-${index}`}
-                    isActive={selectedBlockId === `service-${index}`}
-                    isDesignMode={isDesignMode}
-                    onSelect={handleSelectBlock}
-                  >
-                    <div className={`${service.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
-                      <div className="mb-6">
-                        {IconComponent && (
-                          <IconComponent className={`w-12 h-12 ${getIconColor(index)}`} />
-                        )}
-                      </div>
-                      <h3 className={`${service.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'} dark:text-gray-100`}>{service.title}</h3>
-                      <p className={`${service.descriptionStyleClass || 'text-gray-600 mb-6'} dark:text-gray-300`}>{service.description}</p>
-                      <ul className="space-y-2">
-                        {(service.features ?? []).map((feature, fIndex) => (
-                          <li key={fIndex} className={`${service.featureStyleClass || 'flex items-center text-gray-700'} dark:text-gray-300`}>
-                            <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
-                            {feature.value}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </SelectableBlock>
-                )
-              })}
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {content?.serviceItems.map((service, index) => (
+              <SelectableBlock
+                key={`${service.titleKey}-${index}`}
+                id={`service-${index}`}
+                label={`Service ${index + 1}`}
+                isActive={selectedBlockId === `service-${index}`}
+                isDesignMode={isDesignMode}
+                onSelect={selectBlock}
+              >
+                <div className={service.cardStyleClass || SERVICE_CARD_STYLE_DEFAULT}>
+                  <PageIcon
+                    name={service.icon}
+                    className={`mb-6 h-12 w-12 ${getIconColor(index)}`}
+                  />
+                  <h3 className={service.titleStyleClass || SERVICE_TITLE_STYLE_DEFAULT}>
+                    {service.title}
+                  </h3>
+                  <p className={service.descriptionStyleClass || SERVICE_DESCRIPTION_STYLE_DEFAULT}>
+                    {service.description}
+                  </p>
+                  <ul className="space-y-2">
+                    {service.features.map((feature, featureIndex) => (
+                      <li
+                        key={feature.key || featureIndex}
+                        className={service.featureStyleClass || SERVICE_FEATURE_STYLE_DEFAULT}
+                      >
+                        <span className="mr-2 h-2 w-2 rounded-full bg-blue-600" />
+                        {feature.value}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </SelectableBlock>
+            ))}
           </div>
         </div>
       </div>
 
-      {/* Support Plans */}
+      {/* Support plans */}
       <div className="bg-white py-10 dark:bg-gray-900">
         <div className="container mx-auto px-4">
           <SelectableBlock
             id="support-heading"
+            label="Support"
             isActive={selectedBlockId === 'support-heading'}
             isDesignMode={isDesignMode}
-            onSelect={handleSelectBlock}
+            onSelect={selectBlock}
           >
-            <h2 className={`${content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'} dark:text-gray-100`}>{content?.supportTitle}</h2>
+            <h2 className={content?.supportTitleStyleClass || SUPPORT_HEADING_STYLE_DEFAULT}>
+              {content?.supportTitle}
+            </h2>
           </SelectableBlock>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {content?.supportItems.map((plan, index) => {
-                const IconComponent = navigationIcon[plan.icon || '']
 
-                return (
-                  <SelectableBlock
-                    key={index}
-                    id={`support-${index}`}
-                    isActive={selectedBlockId === `support-${index}`}
-                    isDesignMode={isDesignMode}
-                    onSelect={handleSelectBlock}
-                  >
-                    <div className={`${plan.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 border border-gray-200'} dark:border-gray-700 dark:bg-gray-950 dark:shadow-gray-950/40`}>
-                      <div className="mb-6">
-                        {IconComponent && (
-                          <IconComponent className={`w-12 h-12 ${getIconColor(index)}`} />
-                        )}
-                      </div>
-                      <h3 className={`${plan.titleStyleClass || 'text-xl font-bold mb-4'} dark:text-gray-100`}>{plan.title}</h3>
-                      <ul className="space-y-3 mb-8">
-                        {(plan.features ?? []).map((feature, fIndex) => (
-                          <li key={fIndex} className="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
-                            <FaCheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
-                            <span>{feature.value}</span>
-                          </li>
-                        ))}
-                      </ul>
-                      <Button
-                        block
-                        size="md"
-                        type="button"
-                        variant="solid"
-                        onClick={() => navigate(ROUTES_ENUM.public.contact)}
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+            {content?.supportItems.map((plan, index) => (
+              <SelectableBlock
+                key={`${plan.titleKey}-${index}`}
+                id={`support-${index}`}
+                label={`Support ${index + 1}`}
+                isActive={selectedBlockId === `support-${index}`}
+                isDesignMode={isDesignMode}
+                onSelect={selectBlock}
+              >
+                <div className={plan.cardStyleClass || SUPPORT_CARD_STYLE_DEFAULT}>
+                  <PageIcon name={plan.icon} className={`mb-6 h-12 w-12 ${getIconColor(index)}`} />
+                  <h3 className={plan.titleStyleClass || SUPPORT_TITLE_STYLE_DEFAULT}>{plan.title}</h3>
+                  <ul className="mb-8 space-y-3">
+                    {plan.features.map((feature, featureIndex) => (
+                      <li
+                        key={feature.key || featureIndex}
+                        className="flex items-center space-x-2 text-gray-700 dark:text-gray-300"
                       >
-                        {content?.supportButtonLabel}
-                      </Button>
-                    </div>
-                  </SelectableBlock>
-                )
-              })}
+                        <FaCheckCircle className="h-5 w-5 flex-shrink-0 text-green-500" />
+                        <span>{feature.value}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  <Link
+                    to={ROUTES_ENUM.public.contact}
+                    className={content?.supportButtonStyleClass || SUPPORT_BUTTON_STYLE_DEFAULT}
+                  >
+                    {content?.supportButtonLabel}
+                  </Link>
+                </div>
+              </SelectableBlock>
+            ))}
           </div>
         </div>
       </div>
 
-      {/* Call to Action */}
+      {/* CTA */}
       <SelectableBlock
         id="cta"
+        label="CTA"
         isActive={selectedBlockId === 'cta'}
         isDesignMode={isDesignMode}
-        onSelect={handleSelectBlock}
+        onSelect={selectBlock}
       >
-        <div className={content?.ctaSectionStyleClass || 'bg-blue-900 text-white py-16'}>
+        <div className={content?.ctaSectionStyleClass || CTA_SECTION_STYLE_DEFAULT}>
           <div className="container mx-auto px-4 text-center">
-            <h2 className={content?.ctaTitleStyleClass || 'text-3xl font-bold mb-6 text-white'}>{content?.ctaTitle}</h2>
-            <p className={content?.ctaDescriptionStyleClass || 'text-xl mb-8 max-w-2xl mx-auto'}>{content?.ctaDescription}</p>
-            <Button
-              type="button"
-              variant="solid"
-              size="lg"
-              onClick={() => navigate(ROUTES_ENUM.public.contact)}
+            <h2 className={content?.ctaTitleStyleClass || CTA_TITLE_STYLE_DEFAULT}>
+              {content?.ctaTitle}
+            </h2>
+            <p className={content?.ctaDescriptionStyleClass || CTA_DESCRIPTION_STYLE_DEFAULT}>
+              {content?.ctaDescription}
+            </p>
+            <Link
+              to={ROUTES_ENUM.public.contact}
+              className={content?.ctaButtonStyleClass || CTA_BUTTON_STYLE_DEFAULT}
             >
               {content?.ctaButtonLabel}
-            </Button>
+            </Link>
           </div>
         </div>
       </SelectableBlock>
 
-      <DesignerDrawer
-        isOpen={isDesignMode && isPanelVisible}
-        selection={selectedSelection}
-        pageTitle="Services"
-        selectedLanguage={selectedLanguage}
-        languages={
-          languageOptions.length > 0
-            ? languageOptions
-            : supportedLanguages.map((language) => ({
-                key: language,
-                cultureName: language,
-                displayName: language.toUpperCase(),
-              }))
-        }
-        onClose={() => setIsPanelVisible(false)}
-        onSave={handleSaveAndExit}
-        onLanguageChange={handleLanguageChange}
-        onReset={resetContent}
-        onFieldChange={handleFieldChange}
-      />
+      <DesignerLayer pageTitle="Services" selection={selection} designer={designer} />
     </div>
   )
 }
diff --git a/ui/src/views/public/Success.tsx b/ui/src/views/public/Success.tsx
index 75b3b68a..1a230e33 100644
--- a/ui/src/views/public/Success.tsx
+++ b/ui/src/views/public/Success.tsx
@@ -1,6 +1,6 @@
 import { OrderSuccess } from '@/components/orders/OrderSuccess'
-import { Loading } from '@/components/shared'
 import { APP_NAME } from '@/constants/app.constant'
+import { PublicPageLoader } from './shared'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import React, { useState, useEffect } from 'react'
@@ -30,13 +30,7 @@ const Success: React.FC = () => {
   }
 
   if (!orderId) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <Loading loading={!orderId} />
-        </div>
-      </div>
-    )
+    return <PublicPageLoader />
   }
 
   return (
@@ -46,15 +40,7 @@ const Success: React.FC = () => {
         title={translate('::' + 'App.Platform.Success')}
         defaultTitle={APP_NAME}
       ></Helmet>
-      <div className="relative bg-blue-900 text-white py-12">
-        <div
-          className="absolute inset-0 opacity-20"
-          style={{
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        ></div>
-      </div>
+      <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950" />
 
       <div className="container mx-auto px-4 pt-12">
         <OrderSuccess
diff --git a/ui/src/views/public/designer/DesignerDrawer.tsx b/ui/src/views/public/designer/DesignerDrawer.tsx
index b6c94325..59bc3fcf 100644
--- a/ui/src/views/public/designer/DesignerDrawer.tsx
+++ b/ui/src/views/public/designer/DesignerDrawer.tsx
@@ -1,22 +1,17 @@
-import React from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import Avatar from '@/components/ui/Avatar'
 import { Button, Input } from '@/components/ui'
 import { IconPickerField } from '@/views/shared/MenuAddDialog'
-import { DesignerSelection } from './types'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { normalizeLanguageKey, translateLabel } from './localization'
+import { DesignerField, DesignerFieldValue, DesignerLanguageOption, DesignerSelection } from './types'
 
-interface DesignerLanguageOption {
-  key: string
-  cultureName: string
-  displayName: string
-}
-
-function normalizeLanguageKey(language?: string) {
-  if (!language) {
-    return ''
-  }
-
-  return language.toLowerCase().split('-')[0]
+const GROUP_ORDER = ['content', 'media', 'style', 'advanced']
+const GROUP_FALLBACK_LABELS: Record<string, string> = {
+  content: 'Icerik',
+  media: 'Gorsel',
+  style: 'Stil',
+  advanced: 'Gelismis',
 }
 
 interface DesignerDrawerProps {
@@ -25,11 +20,176 @@ interface DesignerDrawerProps {
   pageTitle: string
   selectedLanguage: string
   languages: DesignerLanguageOption[]
+  isSaving?: boolean
+  isDirty?: boolean
+  canUndo?: boolean
+  canRedo?: boolean
   onClose: () => void
   onSave: () => void
-  onLanguageChange: (language: string) => void
+  onLanguageChange: (cultureName: string) => void
   onReset: () => void
-  onFieldChange: (fieldKey: string, value: string | string[]) => void
+  onFieldChange: (fieldKey: string, value: DesignerFieldValue) => void
+  onUndo?: () => void
+  onRedo?: () => void
+}
+
+function toDisplayString(value: DesignerFieldValue) {
+  if (Array.isArray(value)) {
+    return value.join('\n')
+  }
+
+  if (typeof value === 'boolean' || typeof value === 'number') {
+    return String(value)
+  }
+
+  return value ?? ''
+}
+
+const StyleClassEditor: React.FC<{
+  field: DesignerField
+  onChange: (value: string) => void
+}> = ({ field, onChange }) => {
+  const tokens = toDisplayString(field.value).split(/\s+/).filter(Boolean)
+
+  return (
+    <div className="space-y-2">
+      <Input
+        textArea
+        rows={field.rows ?? 3}
+        value={toDisplayString(field.value)}
+        placeholder={field.placeholder}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
+      />
+      {tokens.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {tokens.map((token, index) => (
+            <button
+              key={`${token}-${index}`}
+              type="button"
+              title="Kaldir"
+              className="rounded-full bg-slate-100 px-2 py-0.5 font-mono text-[11px] text-slate-600 transition-colors hover:bg-rose-100 hover:text-rose-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-rose-900/40 dark:hover:text-rose-300"
+              onClick={() => onChange(tokens.filter((_, i) => i !== index).join(' '))}
+            >
+              {token}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const ImageFieldEditor: React.FC<{
+  field: DesignerField
+  onChange: (value: string) => void
+}> = ({ field, onChange }) => {
+  const value = toDisplayString(field.value)
+
+  return (
+    <div className="space-y-2">
+      <Input
+        value={value}
+        placeholder={field.placeholder ?? 'https://...'}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
+      />
+      {value && (
+        <div className="overflow-hidden rounded-lg border border-slate-200 bg-slate-50 dark:border-gray-700 dark:bg-gray-800">
+          <img
+            src={value}
+            alt={field.label}
+            loading="lazy"
+            className="h-28 w-full object-cover"
+            onError={(event) => {
+              event.currentTarget.style.display = 'none'
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+const FieldEditor: React.FC<{
+  field: DesignerField
+  onChange: (fieldKey: string, value: DesignerFieldValue) => void
+}> = ({ field, onChange }) => {
+  switch (field.type) {
+    case 'icon':
+      return (
+        <IconPickerField
+          value={toDisplayString(field.value)}
+          onChange={(iconKey) => onChange(field.key, iconKey)}
+        />
+      )
+    case 'image':
+      return <ImageFieldEditor field={field} onChange={(value) => onChange(field.key, value)} />
+    case 'style':
+      return <StyleClassEditor field={field} onChange={(value) => onChange(field.key, value)} />
+    case 'boolean':
+      return (
+        <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-600 dark:text-gray-300">
+          <input
+            type="checkbox"
+            checked={field.value === true || field.value === 'true'}
+            className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500 dark:border-gray-600"
+            onChange={(event) => onChange(field.key, event.target.checked)}
+          />
+          {field.placeholder ?? field.label}
+        </label>
+      )
+    case 'number':
+      return (
+        <Input
+          type="number"
+          value={toDisplayString(field.value)}
+          placeholder={field.placeholder}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            const parsed = Number(event.target.value)
+            onChange(field.key, Number.isFinite(parsed) ? parsed : 0)
+          }}
+        />
+      )
+    case 'list':
+      return (
+        <Input
+          textArea
+          rows={field.rows ?? 5}
+          value={toDisplayString(field.value)}
+          placeholder={field.placeholder}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            onChange(
+              field.key,
+              event.target.value
+                .split('\n')
+                .map((item) => item.trim())
+                .filter(Boolean),
+            )
+          }
+        />
+      )
+    case 'textarea':
+      return (
+        <Input
+          textArea
+          rows={field.rows ?? 4}
+          value={toDisplayString(field.value)}
+          placeholder={field.placeholder}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            onChange(field.key, event.target.value)
+          }
+        />
+      )
+    default:
+      return (
+        <Input
+          value={toDisplayString(field.value)}
+          placeholder={field.placeholder}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            onChange(field.key, event.target.value)
+          }
+        />
+      )
+  }
 }
 
 const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
@@ -38,118 +198,219 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
   pageTitle,
   selectedLanguage,
   languages,
+  isSaving = false,
+  isDirty = false,
+  canUndo = false,
+  canRedo = false,
   onClose,
   onSave,
   onLanguageChange,
+  onReset,
   onFieldChange,
+  onUndo,
+  onRedo,
 }) => {
   const { translate } = useLocalization()
+  const [search, setSearch] = useState('')
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    setSearch('')
+  }, [selection?.id])
+
+  const groupedFields = useMemo(() => {
+    const query = search.trim().toLowerCase()
+    const fields = (selection?.fields ?? []).filter(
+      (field) =>
+        !query ||
+        field.label.toLowerCase().includes(query) ||
+        field.key.toLowerCase().includes(query),
+    )
+
+    const groups = new Map<string, DesignerField[]>()
+
+    fields.forEach((field) => {
+      const group = field.group ?? 'content'
+      groups.set(group, [...(groups.get(group) ?? []), field])
+    })
+
+    return Array.from(groups.entries()).sort(([a], [b]) => {
+      const indexA = GROUP_ORDER.indexOf(a)
+      const indexB = GROUP_ORDER.indexOf(b)
+
+      return (indexA === -1 ? GROUP_ORDER.length : indexA) - (indexB === -1 ? GROUP_ORDER.length : indexB)
+    })
+  }, [search, selection])
+
+  const totalFieldCount = selection?.fields.length ?? 0
 
   if (!isOpen) {
     return null
   }
 
   return (
-    <div className="fixed inset-y-0 right-0 z-50 w-[420px] border-l border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl">
-      <div className="flex h-full flex-col bg-white dark:bg-gray-900">
-        <div className="border-b border-slate-200 dark:border-gray-700 px-5 py-4">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-400">
-                {pageTitle} {translate('::Public.designer.title')}
-              </p>
-              <h3 className="mt-2 text-lg font-semibold text-slate-900 dark:text-gray-100">
-                {selection?.title ?? translate('::Public.designer.noSelection')}
-              </h3>
-              <p className="mt-1 text-sm text-slate-500 dark:text-gray-400">
-                {selection?.description ?? translate('::Public.designer.selectField')}
-              </p>
-            </div>
-            <Button variant="plain" size="sm" onClick={onClose}>
-              {translate('::Public.designer.close')}
-            </Button>
+    <aside className="fixed inset-y-0 right-0 z-50 flex w-full max-w-[420px] flex-col border-l border-slate-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+      <header className="border-b border-slate-200 px-5 py-4 dark:border-gray-700">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-400">
+              {pageTitle} {translateLabel(translate, 'Public.designer.title', 'Tasarim')}
+            </p>
+            <h3 className="mt-2 truncate text-lg font-semibold text-slate-900 dark:text-gray-100">
+              {selection?.title ??
+                translateLabel(translate, 'Public.designer.noSelection', 'Blok secilmedi')}
+            </h3>
+            <p className="mt-1 text-sm text-slate-500 dark:text-gray-400">
+              {selection?.description ??
+                translateLabel(
+                  translate,
+                  'Public.designer.selectField',
+                  'Duzenlemek istediginiz blogu sayfadan secin.',
+                )}
+            </p>
           </div>
-
-            <div className="mt-4 flex flex-wrap gap-1.5">
-              {languages.map((language) => (
-                <Button
-                  key={`${language.cultureName}-${language.key}`}
-                  type="button"
-                  title={language.displayName}
-                  onClick={() => onLanguageChange(language.cultureName)}
-                  className={`flex h-9 w-9 items-center justify-center rounded-lg text-xl transition-all
-                    ${
-                      normalizeLanguageKey(selectedLanguage) === language.key
-                        ? 'border-sky-500 bg-sky-50 dark:bg-sky-900/20 ring-2 ring-sky-200 dark:ring-sky-700'
-                        : 'border-slate-200 dark:border-gray-700 hover:border-slate-400 dark:hover:border-gray-500 hover:bg-slate-50 dark:hover:bg-gray-800'
-                    }`}
-                >
-                  <Avatar
-                    size={22}
-                    shape="circle"
-                    src={`/img/countries/${language.cultureName}.png`}
-                  />
-                </Button>
-              ))}
-            </div>
+          <Button variant="plain" size="sm" onClick={onClose}>
+            {translateLabel(translate, 'Public.designer.close', 'Kapat')}
+          </Button>
         </div>
 
-        <div className="flex-1 space-y-4 overflow-y-auto px-5 py-5">
-          {selection?.fields.map((field) => {
-            const commonProps = {
-              value: Array.isArray(field.value) ? field.value.join('\n') : field.value,
-              placeholder: field.placeholder,
-              onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                const nextValue =
-                  field.type === 'list'
-                    ? event.target.value
-                        .split('\n')
-                        .map((item) => item.trim())
-                        .filter(Boolean)
-                    : event.target.value
-
-                onFieldChange(field.key, nextValue)
-              },
-            }
-
-            return (
-              <div key={field.key}>
-                <label className="mb-1 block text-sm font-semibold text-slate-700 dark:text-gray-200">
-                  {field.localizationKey || field.label}
-                </label>
-                {field.localizationKey && field.localizationKey !== field.label && (
-                  <p className="mb-2 text-xs text-slate-500 dark:text-gray-400">{field.label}</p>
-                )}
-                {field.type === 'icon' ? (
-                  <IconPickerField
-                    value={field.value as string}
-                    onChange={(iconKey) => onFieldChange(field.key, iconKey)}
-                  />
-                ) : (
-                  <Input
-                    {...commonProps}
-                    textArea={field.type === 'textarea' || field.type === 'list'}
-                    rows={field.rows ?? (field.type === 'list' ? 5 : 4)}
-                  />
-                )}
-              </div>
-            )
-          })}
-
-          {!selection && (
-            <div className="rounded-2xl border border-dashed border-slate-300 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 px-4 py-6 text-sm text-slate-500 dark:text-gray-400">
-              {translate('::Public.designer.noSelectionDetails')}
-            </div>
-          )}
-        </div>
-
-        <div className="flex items-center justify-between border-t border-slate-200 dark:border-gray-700 px-5 py-4">
-            <Button variant="solid" block onClick={onSave}>
-              {translate('::Save')}
+        <div className="mt-4 flex flex-wrap items-center gap-1.5">
+          {languages.map((language) => (
+            <Button
+              key={`${language.cultureName}-${language.key}`}
+              type="button"
+              variant="plain"
+              shape="circle"
+              title={language.displayName}
+              aria-label={language.displayName}
+              aria-pressed={normalizeLanguageKey(selectedLanguage) === language.key}
+              className={`!h-9 !w-9 !px-0 border transition-all ${
+                normalizeLanguageKey(selectedLanguage) === language.key
+                  ? 'border-sky-500 bg-sky-50 ring-2 ring-sky-200 dark:bg-sky-900/20 dark:ring-sky-700'
+                  : 'border-slate-200 hover:border-slate-400 hover:bg-slate-50 dark:border-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-800'
+              }`}
+              onClick={() => onLanguageChange(language.cultureName)}
+            >
+              <Avatar size={22} shape="circle" src={`/img/countries/${language.cultureName}.png`} />
             </Button>
+          ))}
+
+          <span className="ml-auto flex items-center gap-1">
+            <Button
+              type="button"
+              variant="plain"
+              size="sm"
+              disabled={!canUndo}
+              title={translateLabel(translate, 'Public.designer.undo', 'Geri al (Ctrl+Z)')}
+              onClick={onUndo}
+            >
+              ↶
+            </Button>
+            <Button
+              type="button"
+              variant="plain"
+              size="sm"
+              disabled={!canRedo}
+              title={translateLabel(translate, 'Public.designer.redo', 'Ileri al (Ctrl+Shift+Z)')}
+              onClick={onRedo}
+            >
+              ↷
+            </Button>
+          </span>
         </div>
+
+        {totalFieldCount > 6 && (
+          <div className="mt-3">
+            <Input
+              size="sm"
+              value={search}
+              placeholder={translateLabel(translate, 'Public.designer.searchField', 'Alan ara...')}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setSearch(event.target.value)}
+            />
+          </div>
+        )}
+      </header>
+
+      <div className="flex-1 space-y-5 overflow-y-auto px-5 py-5">
+        {!selection && (
+          <div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-sm text-slate-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
+            {translateLabel(
+              translate,
+              'Public.designer.noSelectionDetails',
+              'Sayfadaki bir blogu tiklayarak duzenlemeye baslayin.',
+            )}
+          </div>
+        )}
+
+        {selection && groupedFields.length === 0 && (
+          <p className="text-sm text-slate-500 dark:text-gray-400">
+            {translateLabel(translate, 'App.NoDataFound', 'Kayit bulunamadi')}
+          </p>
+        )}
+
+        {groupedFields.map(([group, fields]) => {
+          const isCollapsed = collapsedGroups[group] === true
+
+          return (
+            <section key={group}>
+              <button
+                type="button"
+                className="mb-2 flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.14em] text-slate-400 transition-colors hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                onClick={() =>
+                  setCollapsedGroups((previous) => ({ ...previous, [group]: !isCollapsed }))
+                }
+              >
+                <span>
+                  {translateLabel(
+                    translate,
+                    `Public.designer.group.${group}`,
+                    GROUP_FALLBACK_LABELS[group] ?? group,
+                  )}
+                  <span className="ml-2 font-normal normal-case tracking-normal">
+                    ({fields.length})
+                  </span>
+                </span>
+                <span>{isCollapsed ? '+' : '−'}</span>
+              </button>
+
+              {!isCollapsed && (
+                <div className="space-y-4">
+                  {fields.map((field) => (
+                    <div key={field.key}>
+                      <label className="mb-1 block text-sm font-semibold text-slate-700 dark:text-gray-200">
+                        {field.label}
+                      </label>
+                      {field.helpText && (
+                        <p className="mb-2 text-xs text-slate-500 dark:text-gray-400">
+                          {field.helpText}
+                        </p>
+                      )}
+                      <FieldEditor field={field} onChange={onFieldChange} />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          )
+        })}
       </div>
-    </div>
+
+      <footer className="flex items-center gap-2 border-t border-slate-200 px-5 py-4 dark:border-gray-700">
+        <Button type="button" variant="plain" disabled={!isDirty || isSaving} onClick={onReset}>
+          {translateLabel(translate, 'Public.designer.reset', 'Geri yukle')}
+        </Button>
+        <Button
+          block
+          type="button"
+          variant="solid"
+          loading={isSaving}
+          disabled={!isDirty || isSaving}
+          onClick={onSave}
+        >
+          {translate('::Save')}
+        </Button>
+      </footer>
+    </aside>
   )
 }
 
diff --git a/ui/src/views/public/designer/DesignerLayer.tsx b/ui/src/views/public/designer/DesignerLayer.tsx
new file mode 100644
index 00000000..6253763c
--- /dev/null
+++ b/ui/src/views/public/designer/DesignerLayer.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import { Button } from '@/components/ui'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import DesignerDrawer from './DesignerDrawer'
+import { translateLabel } from './localization'
+import { DesignerFieldValue, DesignerLanguageOption, DesignerSelection } from './types'
+
+export interface DesignerLayerController {
+  isDesignMode: boolean
+  isPanelVisible: boolean
+  isSaving: boolean
+  isDirty: boolean
+  canUndo: boolean
+  canRedo: boolean
+  selectedLanguage: string
+  drawerLanguages: DesignerLanguageOption[]
+  setIsPanelVisible: (visible: boolean) => void
+  changeLanguage: (cultureName: string) => void
+  changeField: (fieldKey: string, value: DesignerFieldValue) => void
+  resetContent: () => void
+  exitDesignMode: () => void
+  save: () => void
+  undo: () => void
+  redo: () => void
+}
+
+interface DesignerLayerProps {
+  pageTitle: string
+  selection: DesignerSelection | null
+  designer: DesignerLayerController
+}
+
+/**
+ * Tasarim modunun sayfadan bagimsiz arayuzu: durum cubugu ve duzenleme paneli.
+ * Tasarim modu kapaliyken hicbir sey render etmez.
+ */
+const DesignerLayer: React.FC<DesignerLayerProps> = ({ pageTitle, selection, designer }) => {
+  const { translate } = useLocalization()
+
+  if (!designer.isDesignMode) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="fixed bottom-6 left-6 z-40 flex items-center gap-2 rounded-full bg-slate-900/95 px-3 py-2 text-sm font-medium text-white shadow-xl backdrop-blur">
+        <span className="pl-1">{pageTitle}</span>
+        <span
+          className={`h-2 w-2 rounded-full ${designer.isDirty ? 'bg-amber-400' : 'bg-emerald-400'}`}
+          title={
+            designer.isDirty
+              ? translateLabel(translate, 'Public.designer.unsaved', 'Kaydedilmemis degisiklik var')
+              : translateLabel(translate, 'Public.designer.saved', 'Tum degisiklikler kayitli')
+          }
+        />
+        <Button
+          type="button"
+          variant="plain"
+          size="sm"
+          className="!text-white"
+          onClick={() => designer.setIsPanelVisible(!designer.isPanelVisible)}
+        >
+          {designer.isPanelVisible
+            ? translateLabel(translate, 'Public.designer.hidePanel', 'Paneli gizle')
+            : translateLabel(translate, 'Public.designer.showPanel', 'Paneli goster')}
+        </Button>
+        <Button
+          type="button"
+          variant="plain"
+          size="sm"
+          className="!text-white"
+          onClick={designer.exitDesignMode}
+        >
+          {translateLabel(translate, 'Public.designer.exit', 'Tasarimdan cik')}
+        </Button>
+      </div>
+
+      <DesignerDrawer
+        isOpen={designer.isPanelVisible}
+        selection={selection}
+        pageTitle={pageTitle}
+        selectedLanguage={designer.selectedLanguage}
+        languages={designer.drawerLanguages}
+        isSaving={designer.isSaving}
+        isDirty={designer.isDirty}
+        canUndo={designer.canUndo}
+        canRedo={designer.canRedo}
+        onClose={() => designer.setIsPanelVisible(false)}
+        onSave={designer.save}
+        onLanguageChange={designer.changeLanguage}
+        onReset={designer.resetContent}
+        onFieldChange={designer.changeField}
+        onUndo={designer.undo}
+        onRedo={designer.redo}
+      />
+    </>
+  )
+}
+
+export default DesignerLayer
diff --git a/ui/src/views/public/designer/SelectableBlock.tsx b/ui/src/views/public/designer/SelectableBlock.tsx
index e72e2c9e..f443fd0c 100644
--- a/ui/src/views/public/designer/SelectableBlock.tsx
+++ b/ui/src/views/public/designer/SelectableBlock.tsx
@@ -1,22 +1,40 @@
 import classNames from 'classnames'
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useCallback } from 'react'
 
 interface SelectableBlockProps extends PropsWithChildren {
   id: string
   isActive: boolean
   isDesignMode: boolean
   onSelect: (id: string) => void
+  /** Blok uzerinde gorunen etiket. Verilmezse `id` kullanilir. */
+  label?: string
   className?: string
 }
 
+/**
+ * Tasarim modunda icerigi secilebilir hale getirir.
+ * Tasarim modu kapaliyken hicbir sarmalayici DOM dugumu uretmez.
+ */
 const SelectableBlock: React.FC<SelectableBlockProps> = ({
   id,
   isActive,
   isDesignMode,
   onSelect,
+  label,
   className,
   children,
 }) => {
+  const handleSelect = useCallback(
+    (event: React.SyntheticEvent) => {
+      // Tasarim modunda blok icindeki link/buton tiklamalari sayfayi degistirmemeli;
+      // tiklama yalnizca blogu secmeli.
+      event.preventDefault()
+      event.stopPropagation()
+      onSelect(id)
+    },
+    [id, onSelect],
+  )
+
   if (!isDesignMode) {
     return <>{children}</>
   }
@@ -24,26 +42,33 @@ const SelectableBlock: React.FC<SelectableBlockProps> = ({
   return (
     <div
       className={classNames(
-        'relative rounded-xl transition-all cursor-pointer',
+        'group/designer relative rounded-xl transition-all cursor-pointer',
         isActive
           ? 'ring-2 ring-sky-500 ring-offset-4 ring-offset-white dark:ring-offset-gray-950'
           : 'ring-1 ring-sky-200/80 hover:ring-sky-400 dark:ring-sky-700/80 dark:hover:ring-sky-500',
         className,
       )}
-      onClick={(e) => {
-        e.stopPropagation()
-        onSelect(id)
-      }}
       role="button"
       tabIndex={0}
+      aria-pressed={isActive}
+      aria-label={label ?? id}
+      onClickCapture={handleSelect}
       onKeyDown={(event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          onSelect(id)
+          handleSelect(event)
         }
       }}
     >
-      <div className="pointer-events-none absolute left-3 top-3 z-20 rounded-full"></div>
+      <span
+        className={classNames(
+          'pointer-events-none absolute -top-2.5 left-3 z-20 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider shadow-sm transition-opacity',
+          isActive
+            ? 'bg-sky-500 text-white opacity-100'
+            : 'bg-slate-900/80 text-white opacity-0 group-hover/designer:opacity-100',
+        )}
+      >
+        {label ?? id}
+      </span>
       {children}
     </div>
   )
diff --git a/ui/src/views/public/designer/fields.ts b/ui/src/views/public/designer/fields.ts
new file mode 100644
index 00000000..8caa4b46
--- /dev/null
+++ b/ui/src/views/public/designer/fields.ts
@@ -0,0 +1,45 @@
+import { DesignerField } from './types'
+
+interface FieldExtras {
+  group?: string
+  placeholder?: string
+  helpText?: string
+  rows?: number
+}
+
+function build(
+  type: DesignerField['type'],
+  key: string,
+  label: string,
+  value: DesignerField['value'],
+  extras?: FieldExtras,
+): DesignerField {
+  return { key, label, type, value, ...extras }
+}
+
+export const textField = (key: string, label: string, value: string, extras?: FieldExtras) =>
+  build('text', key, label, value, extras)
+
+export const textAreaField = (key: string, label: string, value: string, extras?: FieldExtras) =>
+  build('textarea', key, label, value, extras)
+
+export const imageField = (key: string, label: string, value: string, extras?: FieldExtras) =>
+  build('image', key, label, value, extras)
+
+export const iconField = (key: string, label: string, value: string, extras?: FieldExtras) =>
+  build('icon', key, label, value, extras)
+
+export const numberField = (key: string, label: string, value: number, extras?: FieldExtras) =>
+  build('number', key, label, value, extras)
+
+export const booleanField = (key: string, label: string, value: boolean, extras?: FieldExtras) =>
+  build('boolean', key, label, value, extras)
+
+/**
+ * Tailwind sinif listesi alani. Panelde tek satirlik editor + sinif rozetleri ile gosterilir.
+ */
+export const styleField = (key: string, label: string, value: string, extras?: FieldExtras) =>
+  build('style', key, label, value, { group: extras?.group ?? 'style', ...extras })
+
+/** Alan gruplarinin panelde gorunecegi sira. */
+export const FIELD_GROUP_ORDER = ['content', 'media', 'style', 'advanced'] as const
diff --git a/ui/src/views/public/designer/index.ts b/ui/src/views/public/designer/index.ts
new file mode 100644
index 00000000..ab3197fc
--- /dev/null
+++ b/ui/src/views/public/designer/index.ts
@@ -0,0 +1,10 @@
+export { default as DesignerDrawer } from './DesignerDrawer'
+export { default as DesignerLayer } from './DesignerLayer'
+export { default as SelectableBlock } from './SelectableBlock'
+export * from './fields'
+export * from './localization'
+export * from './paths'
+export * from './types'
+export * from './useDesignerLanguages'
+export { useDesignerState } from './useDesignerState'
+export { usePageDesigner } from './usePageDesigner'
diff --git a/ui/src/views/public/designer/localization.ts b/ui/src/views/public/designer/localization.ts
new file mode 100644
index 00000000..f44910e7
--- /dev/null
+++ b/ui/src/views/public/designer/localization.ts
@@ -0,0 +1,50 @@
+export type TranslateFn = (key: string) => string
+
+const LOCALIZATION_KEY_PATTERN = /^[A-Za-z0-9_.-]+$/
+
+/**
+ * Bir metnin lokalizasyon anahtari mi yoksa duz metin mi oldugunu tahmin eder.
+ * Anahtarlar bosluk icermez ve en az bir nokta ile ayrilmis segment tasir.
+ */
+export function isLikelyLocalizationKey(value?: string) {
+  return Boolean(value && LOCALIZATION_KEY_PATTERN.test(value) && value.includes('.'))
+}
+
+/**
+ * Deger bir lokalizasyon anahtari ise cevirisini, degilse degerin kendisini dondurur.
+ * Ceviri bulunamadiginda `fallback` kullanilir.
+ */
+export function resolveLocalizedValue(
+  translate: TranslateFn,
+  keyOrValue: string | undefined,
+  fallback = '',
+) {
+  if (!keyOrValue) {
+    return fallback
+  }
+
+  if (!isLikelyLocalizationKey(keyOrValue)) {
+    return keyOrValue
+  }
+
+  const translatedValue = translate('::' + keyOrValue)
+
+  return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
+}
+
+/**
+ * Designer arayuz metinleri icin: anahtar tanimli degilse okunabilir bir yedek metin dondurur.
+ */
+export function translateLabel(translate: TranslateFn, key: string, fallback: string) {
+  const value = translate('::' + key)
+
+  return value === key ? fallback : value
+}
+
+export function normalizeLanguageKey(language?: string) {
+  if (!language) {
+    return 'tr'
+  }
+
+  return language.toLowerCase().split('-')[0]
+}
diff --git a/ui/src/views/public/designer/paths.ts b/ui/src/views/public/designer/paths.ts
new file mode 100644
index 00000000..893c168a
--- /dev/null
+++ b/ui/src/views/public/designer/paths.ts
@@ -0,0 +1,61 @@
+type AnyRecord = Record<string, unknown>
+
+function splitPath(path: string) {
+  return path.split('.').filter((segment) => segment.length > 0)
+}
+
+function isIndexSegment(segment: string) {
+  return /^\d+$/.test(segment)
+}
+
+/** `slides.0.services.1.icon` gibi bir yolu okur. */
+export function getByPath(source: unknown, path: string): unknown {
+  return splitPath(path).reduce<unknown>((accumulator, segment) => {
+    if (accumulator === null || typeof accumulator !== 'object') {
+      return undefined
+    }
+
+    return (accumulator as AnyRecord)[segment]
+  }, source)
+}
+
+/**
+ * Yol boyunca yalnizca degisen dugumleri kopyalayarak yeni bir nesne dondurur.
+ * Yol gecersizse (ornegin dizi indeksi yoksa) kaynak nesne degistirilmeden dondurulur.
+ */
+export function setByPath<T>(source: T, path: string, value: unknown): T {
+  const segments = splitPath(path)
+
+  if (segments.length === 0 || source === null || typeof source !== 'object') {
+    return source
+  }
+
+  const [segment, ...rest] = segments
+  const container = source as unknown as AnyRecord
+
+  if (Array.isArray(source)) {
+    if (!isIndexSegment(segment)) {
+      return source
+    }
+
+    const index = Number(segment)
+
+    if (index < 0 || index >= source.length) {
+      return source
+    }
+
+    const next = [...(source as unknown[])]
+    next[index] = rest.length === 0 ? value : setByPath(next[index], rest.join('.'), value)
+
+    return next as unknown as T
+  }
+
+  if (!(segment in container)) {
+    return source
+  }
+
+  return {
+    ...container,
+    [segment]: rest.length === 0 ? value : setByPath(container[segment], rest.join('.'), value),
+  } as unknown as T
+}
diff --git a/ui/src/views/public/designer/types.ts b/ui/src/views/public/designer/types.ts
index 7f6e6b57..abe9d829 100644
--- a/ui/src/views/public/designer/types.ts
+++ b/ui/src/views/public/designer/types.ts
@@ -1,12 +1,28 @@
-export type DesignerFieldType = 'text' | 'textarea' | 'image' | 'list' | 'icon'
+export type DesignerFieldType =
+  | 'text'
+  | 'textarea'
+  | 'image'
+  | 'list'
+  | 'icon'
+  | 'style'
+  | 'number'
+  | 'boolean'
+
+export type DesignerFieldValue = string | string[] | number | boolean
 
 export interface DesignerField {
+  /**
+   * Duzenlenen icerik nesnesine giden nokta yolu.
+   * Ornek: `heroTitle`, `slides.0.title`, `slides.0.services.2.icon`
+   */
   key: string
   label: string
   type: DesignerFieldType
-  value: string | string[]
-  localizationKey?: string
+  value: DesignerFieldValue
+  /** Panelde alanlari gruplamak icin kullanilir. */
+  group?: string
   placeholder?: string
+  helpText?: string
   rows?: number
 }
 
@@ -16,3 +32,9 @@ export interface DesignerSelection {
   description?: string
   fields: DesignerField[]
 }
+
+export interface DesignerLanguageOption {
+  key: string
+  cultureName: string
+  displayName: string
+}
diff --git a/ui/src/views/public/designer/useDesignerLanguages.ts b/ui/src/views/public/designer/useDesignerLanguages.ts
new file mode 100644
index 00000000..3b9fd007
--- /dev/null
+++ b/ui/src/views/public/designer/useDesignerLanguages.ts
@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+import { useStoreState } from '@/store'
+import { normalizeLanguageKey } from './localization'
+import { DesignerLanguageOption } from './types'
+
+/**
+ * ABP yapilandirmasindaki dilleri designer paneli icin normalize eder.
+ * Dort public sayfada tekrarlanan dil hazirligi burada tek noktada toplanir.
+ */
+export function useDesignerLanguages() {
+  const configCultureName = useStoreState(
+    (state) => state.abpConfig.config?.localization.currentCulture.cultureName,
+  )
+  const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
+  const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages)
+
+  const currentLanguage = configCultureName || localeCurrentLang || 'tr'
+
+  const languageOptions = useMemo<DesignerLanguageOption[]>(
+    () =>
+      (abpLanguages ?? [])
+        .filter((language) => Boolean(language.cultureName))
+        .map((language) => {
+          const cultureName = language.cultureName as string
+
+          return {
+            key: normalizeLanguageKey(cultureName),
+            cultureName,
+            displayName: language.displayName || cultureName,
+          }
+        }),
+    [abpLanguages],
+  )
+
+  const editorLanguages = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          (languageOptions.length > 0
+            ? languageOptions.map((language) => language.key)
+            : [normalizeLanguageKey(currentLanguage)]
+          ).filter(Boolean),
+        ),
+      ),
+    [currentLanguage, languageOptions],
+  )
+
+  return { currentLanguage, languageOptions, editorLanguages }
+}
+
+/** Panelde gosterilecek dil listesi; yapilandirma bos ise desteklenen dillerden uretilir. */
+export function resolveDrawerLanguages(
+  languageOptions: DesignerLanguageOption[],
+  supportedLanguages: string[],
+): DesignerLanguageOption[] {
+  if (languageOptions.length > 0) {
+    return languageOptions
+  }
+
+  return supportedLanguages.map((language) => ({
+    key: language,
+    cultureName: language,
+    displayName: language.toUpperCase(),
+  }))
+}
diff --git a/ui/src/views/public/designer/useDesignerState.ts b/ui/src/views/public/designer/useDesignerState.ts
index da00295b..75f8afc0 100644
--- a/ui/src/views/public/designer/useDesignerState.ts
+++ b/ui/src/views/public/designer/useDesignerState.ts
@@ -1,183 +1,272 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useLocation, useSearchParams } from 'react-router-dom'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { normalizeLanguageKey } from './localization'
+import { setByPath } from './paths'
 
 const DESIGNER_QUERY_KEY = 'design'
+const HISTORY_LIMIT = 50
 
 interface UseDesignerStateOptions {
-	currentLanguage?: string
-	supportedLanguages?: string[]
+  currentLanguage?: string
+  supportedLanguages?: string[]
+  /** Tasarim modunun acilabilmesi icin yetki kontrolu. Varsayilan: acik. */
+  enabled?: boolean
 }
 
-function serializeValue<T>(value: T | null | undefined) {
-	if (value === undefined) {
-		return '__undefined__'
-	}
-
-	if (value === null) {
-		return '__null__'
-	}
-
-	try {
-		return JSON.stringify(value)
-	} catch {
-		return '__unserializable__'
-	}
+interface LanguageEntry<T> {
+  current: T
+  /** Sunucudan gelen son icerigin serilestirilmis hali; "kirli mi" karsilastirmasi icin. */
+  baseline: string
+  past: T[]
+  future: T[]
 }
 
-function normalizeLanguageKey(language?: string) {
-	if (!language) {
-		return 'tr'
-	}
-
-	return language.toLowerCase().split('-')[0]
+function serialize(value: unknown) {
+  try {
+    return JSON.stringify(value) ?? '__undefined__'
+  } catch {
+    return '__unserializable__'
+  }
 }
 
-function cloneValue<T>(value: T): T {
-	try {
-		return JSON.parse(JSON.stringify(value)) as T
-	} catch {
-		return value
-	}
+function clone<T>(value: T): T {
+  try {
+    return JSON.parse(JSON.stringify(value)) as T
+  } catch {
+    return value
+  }
+}
+
+function createEntry<T>(content: T): LanguageEntry<T> {
+  return { current: clone(content), baseline: serialize(content), past: [], future: [] }
 }
 
 export function useDesignerState<T>(
-	pageKey: string,
-	initialContent: T | null,
-	options?: UseDesignerStateOptions,
+  pageKey: string,
+  initialContent: T | null,
+  options?: UseDesignerStateOptions,
 ) {
-	const location = useLocation()
-	const [searchParams] = useSearchParams()
-	const isDesignMode =
-		searchParams.get(DESIGNER_QUERY_KEY) === '1' || location.pathname.endsWith('/designer')
-	const currentLanguage = normalizeLanguageKey(options?.currentLanguage)
-	const supportedLanguages = useMemo(() => {
-		const base = (options?.supportedLanguages ?? [currentLanguage]).map((language) =>
-			normalizeLanguageKey(language),
-		)
-		if (!base.includes(currentLanguage)) {
-			return [currentLanguage, ...base]
-		}
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const isDesignerRequested =
+    searchParams.get(DESIGNER_QUERY_KEY) === '1' || location.pathname.endsWith('/designer')
+  const isDesignMode = isDesignerRequested && options?.enabled !== false
 
-		return Array.from(new Set(base))
-	}, [currentLanguage, options?.supportedLanguages])
+  const currentLanguage = normalizeLanguageKey(options?.currentLanguage)
+  const supportedLanguages = useMemo(() => {
+    const base = (options?.supportedLanguages ?? [currentLanguage]).map(normalizeLanguageKey)
 
-	const [selectedLanguage, setSelectedLanguage] = useState(currentLanguage)
-	const [byLanguage, setByLanguage] = useState<Record<string, T>>({})
-	const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
-	const seededDefaultsRef = useRef<Record<string, string>>({})
+    return Array.from(new Set(base.includes(currentLanguage) ? base : [currentLanguage, ...base]))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentLanguage, serialize(options?.supportedLanguages)])
 
-	const selectedLanguagePrefix = normalizeLanguageKey(selectedLanguage)
-	const content =
-		byLanguage[selectedLanguage] ??
-		byLanguage[selectedLanguagePrefix] ??
-		byLanguage[currentLanguage] ??
-		initialContent ??
-		null
+  const [entries, setEntries] = useState<Record<string, LanguageEntry<T>>>({})
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
+  const entriesRef = useRef(entries)
+  entriesRef.current = entries
 
-	useEffect(() => {
-		setSelectedLanguage(normalizeLanguageKey(currentLanguage))
-	}, [currentLanguage])
+  const serializedInitial = serialize(initialContent)
 
-	useEffect(() => {
-		if (!initialContent) {
-			return
-		}
+  // Sunucu icerigi degistiginde (ilk yukleme veya dil degisimi) o dilin taslagini tohumla.
+  // Kullanici o dilde duzenleme yaptiysa taslak korunur, uzerine yazilmaz.
+  useEffect(() => {
+    if (!initialContent) {
+      return
+    }
 
-		const nextSerializedInitial = serializeValue(initialContent)
+    setEntries((previous) => {
+      const entry = previous[currentLanguage]
 
-		setByLanguage((prev) => {
-			const currentValue = prev[currentLanguage]
-			const currentSerialized = serializeValue(currentValue)
-			const previousSeed = seededDefaultsRef.current[currentLanguage]
+      if (entry && serialize(entry.current) !== entry.baseline) {
+        return previous
+      }
 
-			if (currentValue !== undefined && previousSeed !== undefined && currentSerialized !== previousSeed) {
-				return prev
-			}
+      if (entry && entry.baseline === serializedInitial) {
+        return previous
+      }
 
-			if (currentSerialized === nextSerializedInitial) {
-				seededDefaultsRef.current[currentLanguage] = nextSerializedInitial
-				return prev
-			}
+      return { ...previous, [currentLanguage]: createEntry(initialContent) }
+    })
+    // initialContent yerine serilestirilmis hali izlenir: her render'da yeni referans gelse bile
+    // efekt yalnizca icerik gercekten degistiginde calisir.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentLanguage, serializedInitial])
 
-			seededDefaultsRef.current[currentLanguage] = nextSerializedInitial
+  useEffect(() => {
+    if (!isDesignMode) {
+      setSelectedBlockId(null)
+    }
+  }, [isDesignMode])
 
-			return {
-				...prev,
-				[currentLanguage]: cloneValue(initialContent),
-			}
-		})
+  const entry = entries[currentLanguage]
+  const content = entry?.current ?? initialContent ?? null
+  const isDirty = Boolean(entry) && serialize(entry.current) !== entry.baseline
 
-		if (!isDesignMode && selectedBlockId !== null) {
-			setSelectedBlockId(null)
-		}
-	}, [currentLanguage, initialContent, isDesignMode, selectedBlockId])
+  const mutate = useCallback(
+    (updater: (current: T) => T | null) => {
+      setEntries((previous) => {
+        const existing = previous[currentLanguage]
 
-	useEffect(() => {
-		if (!isDesignMode || !initialContent) {
-			return
-		}
+        if (!existing) {
+          return previous
+        }
 
-		const normalizedSelectedLanguage = normalizeLanguageKey(selectedLanguage)
-		const hasSelectedLanguageContent =
-			byLanguage[normalizedSelectedLanguage] !== undefined ||
-			byLanguage[selectedLanguage] !== undefined
+        const next = updater(existing.current)
 
-		if (hasSelectedLanguageContent) {
-			return
-		}
+        if (!next || serialize(next) === serialize(existing.current)) {
+          return previous
+        }
 
-		// If selected language has no saved value, initialize it from the current translated defaults.
-		seededDefaultsRef.current[normalizedSelectedLanguage] = serializeValue(initialContent)
-		setByLanguage((prev) => ({
-			...prev,
-			[normalizedSelectedLanguage]: cloneValue(initialContent),
-		}))
-	}, [byLanguage, initialContent, isDesignMode, selectedLanguage])
+        return {
+          ...previous,
+          [currentLanguage]: {
+            ...existing,
+            current: next,
+            past: [...existing.past, existing.current].slice(-HISTORY_LIMIT),
+            future: [],
+          },
+        }
+      })
+    },
+    [currentLanguage],
+  )
 
-	const setContent = (updater: (current: T | null) => T | null) => {
-		setByLanguage((prev) => {
-			const current =
-				prev[selectedLanguage] ??
-				prev[normalizeLanguageKey(selectedLanguage)] ??
-				prev[currentLanguage] ??
-				initialContent ??
-				null
-			const next = updater(current)
+  /** Nokta yolu ile tek bir alani gunceller. */
+  const setFieldValue = useCallback(
+    (path: string, value: unknown) => {
+      mutate((current) => setByPath(current, path, value))
+    },
+    [mutate],
+  )
 
-			if (!next) {
-				return prev
-			}
+  const undo = useCallback(() => {
+    setEntries((previous) => {
+      const existing = previous[currentLanguage]
 
-			return {
-				...prev,
-				[normalizeLanguageKey(selectedLanguage)]: cloneValue(next),
-			}
-		})
-	}
+      if (!existing?.past.length) {
+        return previous
+      }
 
-	const resetContent = () => {
-		if (!initialContent) {
-			return
-		}
+      const past = [...existing.past]
+      const restored = past.pop() as T
 
-		const normalizedSelectedLanguage = normalizeLanguageKey(selectedLanguage)
-		seededDefaultsRef.current[normalizedSelectedLanguage] = serializeValue(initialContent)
+      return {
+        ...previous,
+        [currentLanguage]: {
+          ...existing,
+          current: restored,
+          past,
+          future: [existing.current, ...existing.future].slice(0, HISTORY_LIMIT),
+        },
+      }
+    })
+  }, [currentLanguage])
 
-		setByLanguage((prev) => ({
-			...prev,
-			[normalizedSelectedLanguage]: cloneValue(initialContent),
-		}))
-	}
+  const redo = useCallback(() => {
+    setEntries((previous) => {
+      const existing = previous[currentLanguage]
 
-	return {
-		content,
-		isDesignMode,
-		selectedBlockId,
-		selectedLanguage,
-		supportedLanguages,
-		setContent,
-		setSelectedBlockId,
-		setSelectedLanguage,
-		resetContent,
-	}
+      if (!existing?.future.length) {
+        return previous
+      }
+
+      const [restored, ...future] = existing.future
+
+      return {
+        ...previous,
+        [currentLanguage]: {
+          ...existing,
+          current: restored,
+          past: [...existing.past, existing.current].slice(-HISTORY_LIMIT),
+          future,
+        },
+      }
+    })
+  }, [currentLanguage])
+
+  /** Kaydedilmemis degisiklikleri atip sunucudan gelen son icerige doner. */
+  const resetContent = useCallback(() => {
+    setEntries((previous) => {
+      const existing = previous[currentLanguage]
+
+      if (!existing) {
+        return previous
+      }
+
+      return {
+        ...previous,
+        [currentLanguage]: {
+          ...existing,
+          current: JSON.parse(existing.baseline) as T,
+          past: [...existing.past, existing.current].slice(-HISTORY_LIMIT),
+          future: [],
+        },
+      }
+    })
+  }, [currentLanguage])
+
+  /** Kaydetme basarili olduktan sonra mevcut icerigi yeni referans nokta yapar. */
+  const commitContent = useCallback(() => {
+    setEntries((previous) => {
+      const existing = previous[currentLanguage]
+
+      if (!existing) {
+        return previous
+      }
+
+      return {
+        ...previous,
+        [currentLanguage]: { ...existing, baseline: serialize(existing.current) },
+      }
+    })
+  }, [currentLanguage])
+
+  const exitDesignMode = useCallback(() => {
+    // Tasarim modu iki sekilde acilabiliyor: `?design=1` veya `/<sayfa>/designer` yolu.
+    if (location.pathname.endsWith('/designer')) {
+      navigate(location.pathname.replace(/\/designer$/, '') || '/', { replace: true })
+      return
+    }
+
+    const next = new URLSearchParams(searchParams)
+    next.delete(DESIGNER_QUERY_KEY)
+    setSearchParams(next, { replace: true })
+  }, [location.pathname, navigate, searchParams, setSearchParams])
+
+  // Tasarim modunda sekme kapatilirken kaydedilmemis degisiklikler icin uyari.
+  useEffect(() => {
+    if (!isDesignMode || !isDirty) {
+      return
+    }
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault()
+      event.returnValue = ''
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [isDesignMode, isDirty])
+
+  return {
+    pageKey,
+    content,
+    isDesignMode,
+    isDirty,
+    canUndo: Boolean(entry?.past.length),
+    canRedo: Boolean(entry?.future.length),
+    selectedBlockId,
+    selectedLanguage: currentLanguage,
+    supportedLanguages,
+    setContent: mutate,
+    setFieldValue,
+    setSelectedBlockId,
+    resetContent,
+    commitContent,
+    exitDesignMode,
+    undo,
+    redo,
+  }
 }
diff --git a/ui/src/views/public/designer/usePageDesigner.tsx b/ui/src/views/public/designer/usePageDesigner.tsx
new file mode 100644
index 00000000..55365e7a
--- /dev/null
+++ b/ui/src/views/public/designer/usePageDesigner.tsx
@@ -0,0 +1,188 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Notification, toast } from '@/components/ui'
+import { useStoreActions, useStoreState } from '@/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { usePermission } from '@/utils/hooks/usePermission'
+import { translateLabel } from './localization'
+import { resolveDrawerLanguages, useDesignerLanguages } from './useDesignerLanguages'
+import { useDesignerState } from './useDesignerState'
+import { DesignerFieldValue } from './types'
+
+interface UsePageDesignerOptions<T> {
+  /** Tasarim panelinde gosterilecek sayfa adi ve state anahtari. */
+  pageKey: string
+  /**
+   * Tasarim modunu acmak icin gereken ABP yetkisi (orn. `App.Home.Design`).
+   * Yetki `PermissionsData.json` icinde tanimlanir ve seeder ile yonetilir.
+   */
+  permission: string
+  /** Sunucudan uretilen icerik. Referans kararliligi icin `useMemo` ile hesaplanmalidir. */
+  initialContent: T | null
+  /** Kaydetme cagrisi. Basarili donerse icerik yeni referans nokta olarak isaretlenir. */
+  onSave: (content: T, cultureName: string) => Promise<unknown>
+}
+
+/**
+ * Public sayfalarin tasarim modu icin ortak davranis:
+ * dil listesi, panel gorunurlugu, secim, kaydetme ve klavye kisayollari.
+ */
+export function usePageDesigner<T>({
+  pageKey,
+  permission,
+  initialContent,
+  onSave,
+}: UsePageDesignerOptions<T>) {
+  const { translate } = useLocalization()
+  const { setLang } = useStoreActions((actions) => actions.locale)
+  const { getConfig } = useStoreActions((actions) => actions.abpConfig)
+  const isAuthenticated = useStoreState(
+    (state) => state.abpConfig.config?.currentUser?.isAuthenticated,
+  )
+  const { checkPermission } = usePermission()
+  const { currentLanguage, languageOptions, editorLanguages } = useDesignerLanguages()
+
+  // Tasarim modu yalnizca oturum acmis ve ilgili sayfa yetkisi verilmis kullanicilar icin
+  // acilir; anonim ziyaretci ya da yetkisiz kullanici adres cubugundan `?design=1`
+  // ekleyerek paneli acamaz. Asil kontrol sunucuda `PublicAppService.Save*PageAsync`
+  // uzerindeki `[Authorize]` ile yapilir.
+  const canDesign = Boolean(isAuthenticated) && checkPermission(permission)
+
+  const designer = useDesignerState<T>(pageKey, initialContent, {
+    currentLanguage,
+    supportedLanguages: editorLanguages,
+    enabled: canDesign,
+  })
+
+  const [isPanelVisible, setIsPanelVisible] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const {
+    content,
+    isDesignMode,
+    selectedLanguage,
+    setFieldValue,
+    setSelectedBlockId,
+    commitContent,
+    undo,
+    redo,
+  } = designer
+
+  const selectBlock = useCallback(
+    (blockId: string) => {
+      setSelectedBlockId(blockId)
+      setIsPanelVisible(true)
+    },
+    [setSelectedBlockId],
+  )
+
+  const changeLanguage = useCallback(
+    (cultureName: string) => {
+      // Global locale degisimi cevirileri yeniden yukler; designer dili store'u takip eder.
+      setLang(cultureName)
+    },
+    [setLang],
+  )
+
+  const changeField = useCallback(
+    (path: string, value: DesignerFieldValue) => setFieldValue(path, value),
+    [setFieldValue],
+  )
+
+  const save = useCallback(async () => {
+    if (!content || isSaving || !canDesign) {
+      return
+    }
+
+    setIsSaving(true)
+
+    try {
+      await onSave(content, selectedLanguage)
+      await getConfig(false)
+      commitContent()
+      setSelectedBlockId(null)
+
+      toast.push(
+        <Notification type="success" duration={2000}>
+          {translate('::ListForms.FormBilgileriKaydedildi')}
+        </Notification>,
+        { placement: 'bottom-end' },
+      )
+    } catch (error) {
+      console.error(`${pageKey} tasarimi kaydedilemedi:`, error)
+
+      toast.push(
+        <Notification type="danger" duration={4000}>
+          {translateLabel(translate, 'Public.designer.saveFailed', 'Tasarim kaydedilemedi.')}
+        </Notification>,
+        { placement: 'bottom-end' },
+      )
+    } finally {
+      setIsSaving(false)
+    }
+  }, [
+    canDesign,
+    commitContent,
+    content,
+    getConfig,
+    isSaving,
+    onSave,
+    pageKey,
+    selectedLanguage,
+    setSelectedBlockId,
+    translate,
+  ])
+
+  // Tasarim modu kisayollari: Ctrl+S kaydet, Ctrl+Z geri al, Ctrl+Shift+Z ileri al, Esc secimi birak.
+  useEffect(() => {
+    if (!isDesignMode) {
+      return
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isEditingText =
+        event.target instanceof HTMLElement &&
+        ['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName)
+
+      const key = event.key.toLowerCase()
+
+      if ((event.ctrlKey || event.metaKey) && key === 's') {
+        event.preventDefault()
+        void save()
+        return
+      }
+
+      if ((event.ctrlKey || event.metaKey) && key === 'z') {
+        event.preventDefault()
+
+        if (event.shiftKey) {
+          redo()
+        } else {
+          undo()
+        }
+
+        return
+      }
+
+      if (event.key === 'Escape' && !isEditingText) {
+        setSelectedBlockId(null)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isDesignMode, redo, save, setSelectedBlockId, undo])
+
+  return {
+    ...designer,
+    isSaving,
+    isPanelVisible,
+    setIsPanelVisible,
+    selectBlock,
+    changeLanguage,
+    changeField,
+    save,
+    translate,
+    drawerLanguages: resolveDrawerLanguages(languageOptions, designer.supportedLanguages),
+  }
+}
diff --git a/ui/src/views/public/pageStyles.ts b/ui/src/views/public/pageStyles.ts
new file mode 100644
index 00000000..6cd52bc1
--- /dev/null
+++ b/ui/src/views/public/pageStyles.ts
@@ -0,0 +1,20 @@
+/** Public sayfalarda kart ikonlarinin donusumlu renk paleti. */
+const ICON_COLOR_CLASSES = [
+  'text-blue-600',
+  'text-red-600',
+  'text-green-600',
+  'text-purple-600',
+  'text-yellow-600',
+  'text-indigo-600',
+]
+
+export function getIconColor(index: number) {
+  return ICON_COLOR_CLASSES[index % ICON_COLOR_CLASSES.length]
+}
+
+/** Tasarim paneli acikken icerigin panel altinda kalmamasi icin sag bosluk sinifi. */
+export function designerPageClass(isDesignMode: boolean, isPanelVisible: boolean) {
+  return `min-h-screen bg-gray-50 dark:bg-gray-950 ${
+    isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''
+  }`
+}
diff --git a/ui/src/views/public/shared.tsx b/ui/src/views/public/shared.tsx
new file mode 100644
index 00000000..ad82e15e
--- /dev/null
+++ b/ui/src/views/public/shared.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Loading from '@/components/shared/Loading'
+import navigationIcon from '@/proxy/menus/navigation-icon.config'
+
+interface PageIconProps {
+  name?: string
+  className?: string
+  size?: number
+}
+
+/** Ikon anahtari tanimli degilse hicbir sey render etmez. */
+export const PageIcon: React.FC<PageIconProps> = ({ name, className, size }) => {
+  const IconComponent = name ? navigationIcon[name] : undefined
+
+  if (!IconComponent) {
+    return null
+  }
+
+  return <IconComponent className={className} size={size} />
+}
+
+export const PublicPageLoader: React.FC = () => (
+  <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
+    <Loading loading />
+  </div>
+)