diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index 3805014..a5e5a69 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -6864,6 +6864,18 @@
             "tr": "Satış Sipariş Kalemleri",
             "en": "Sales Order Items"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Dark",
+            "tr": "Karanlık",
+            "en": "Dark"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Light",
+            "tr": "Açık",
+            "en": "Light"
+        },
         {
             "resourceName": "Platform",
             "key": "Public.about.description.closing",
diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs b/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
index eece49c..e42e5d7 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
@@ -421,7 +421,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
                             Visible = true,
                             IsActive = true,
                             AllowSearch = true,
-                            ValidationRuleJson = DefaultValidationRuleEmailJson,
+                            ValidationRuleJson = DefaultValidationRuleEmailRequiredJson,
                             ColumnCustomizationJson = DefaultColumnCustomizationJson,
                             PermissionJson = DefaultFieldPermissionJson(TenantManagementPermissions.Tenants.Create, TenantManagementPermissions.Tenants.Default, TenantManagementPermissions.Tenants.Update, true, true, false),
                             PivotSettingsJson = DefaultPivotSettingsJson
diff --git a/ui/src/components/layouts/PublicLayout.tsx b/ui/src/components/layouts/PublicLayout.tsx
index 1505efc..73e001f 100644
--- a/ui/src/components/layouts/PublicLayout.tsx
+++ b/ui/src/components/layouts/PublicLayout.tsx
@@ -1,7 +1,7 @@
 import View from '@/views/Views'
 import React, { useEffect, useState } from 'react'
 import { useLocation, Link } from 'react-router-dom'
-import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa';
+import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa'
 import {
   LuMenu,
   LuX,
@@ -14,13 +14,17 @@ import {
   LuPhone,
   LuMapPin,
   LuMail,
-} from 'react-icons/lu';
+  LuMoon,
+  LuSun,
+} from 'react-icons/lu'
 import Logo from '@/views/public/Logo'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import LanguageSelector from '../template/LanguageSelector'
 import Demo from '@/views/public/Demo'
 import { ScrollContext } from '@/contexts/ScrollContext'
+import useDarkMode from '@/utils/hooks/useDarkmode'
+import { THEME_ENUM } from '@/constants/theme.constant'
 
 interface NavLink {
   resourceKey?: string
@@ -33,6 +37,7 @@ interface NavLink {
 const PublicLayout = () => {
   const location = useLocation()
   const { translate } = useLocalization()
+  const [isDarkMode, setThemeMode] = useDarkMode()
 
   const [isOpen, setIsOpen] = useState(false)
   const [scrolled, setScrolled] = useState(false)
@@ -109,6 +114,38 @@ const PublicLayout = () => {
 
   const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris'
 
+  const themeToggle = (
+    <div className="inline-flex items-center rounded-lg p-0.5 shadow-inner shadow-black/10">
+      <button
+        type="button"
+        onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
+        aria-pressed={!isDarkMode}
+        title="Light mode"
+        className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-l-md ${
+          !isDarkMode
+            ? 'bg-white text-gray-950'
+            : 'text-gray-300 hover:bg-white/10 hover:text-white'
+        }`}
+      >
+        <LuSun size={15} strokeWidth={1.8} />
+        {translate('::App.Light')}
+      </button>
+
+      <button
+        type="button"
+        onClick={() => setThemeMode(THEME_ENUM.MODE_DARK)}
+        aria-pressed={isDarkMode}
+        title="Dark mode"
+        className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-r-md ${
+          isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:bg-white/10 hover:text-white'
+        }`}
+      >
+        <LuMoon size={15} strokeWidth={1.8} />
+        {translate('::App.Dark')}
+      </button>
+    </div>
+  )
+
   const isActiveLink = (path?: string) => {
     if (!path) return false
     if (path === ROUTES_ENUM.public.home) return location.pathname === path
@@ -137,20 +174,18 @@ const PublicLayout = () => {
                   const active = isActiveLink(link.path)
                   const baseClass =
                     'relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 group'
-                  const activeClass = active
-                    ? 'text-white'
-                    : 'text-gray-300 hover:text-white'
+                  const activeClass = active ? 'text-white' : 'text-gray-300 hover:text-white'
                   return link.path ? (
-                    <Link
-                      key={link.path}
-                      to={link.path}
-                      className={`${baseClass} ${activeClass}`}
-                    >
+                    <Link key={link.path} to={link.path} className={`${baseClass} ${activeClass}`}>
                       {link.icon && (
                         <link.icon
                           size={22}
                           strokeWidth={1.75}
-                          className={active ? 'text-blue-400' : 'text-gray-400 group-hover:text-blue-400 transition-colors'}
+                          className={
+                            active
+                              ? 'text-blue-400'
+                              : 'text-gray-400 group-hover:text-blue-400 transition-colors'
+                          }
                         />
                       )}
                       {link.name}
@@ -183,6 +218,7 @@ const PublicLayout = () => {
             {/* Right side: Language + Login */}
             <div className="hidden md:flex items-center gap-3">
               <LanguageSelector />
+              {themeToggle}
               <div className="w-px h-5 bg-white/20" />
               {navLinks
                 .filter((l) => isLoginLink(l.resourceKey))
@@ -262,13 +298,18 @@ const PublicLayout = () => {
                         }}
                         className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
                       >
-                        {link.icon && <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />}
+                        {link.icon && (
+                          <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />
+                        )}
                         {link.name}
                       </button>
                     )
                   })}
                   <div className="pt-2 pb-1 border-t border-white/10 mt-1">
-                    <LanguageSelector />
+                    <div className="flex items-center justify-between gap-3">
+                      <LanguageSelector />
+                      {themeToggle}
+                    </div>
                   </div>
                 </nav>
               </div>
@@ -440,12 +481,14 @@ const PublicLayout = () => {
 
               {/* Contact Info */}
               <div>
-                <h3 className="text-lg font-bold mb-4 text-white">
-                  {translate('::App.Contact')}
-                </h3>
+                <h3 className="text-lg font-bold mb-4 text-white">{translate('::App.Contact')}</h3>
                 <ul className="space-y-3">
                   <li className="flex items-start space-x-3">
-                    <LuMapPin size={18} strokeWidth={1.75} className="text-gray-400 mt-1 flex-shrink-0" />
+                    <LuMapPin
+                      size={18}
+                      strokeWidth={1.75}
+                      className="text-gray-400 mt-1 flex-shrink-0"
+                    />
                     <span className="text-gray-400">{translate('::Public.footer.address')}</span>
                   </li>
                   <li className="flex items-center space-x-3">
diff --git a/ui/src/components/orders/BillingControls.tsx b/ui/src/components/orders/BillingControls.tsx
index 0cee43d..298b09a 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 ${
+      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]'
       }`}
     >
@@ -41,8 +41,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
         <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
           <div className="flex items-center space-x-6">
             <div className="flex items-center space-x-2 rounded-lg">
-              <FaCalendar className="w-5 h-5 text-gray-600" />
-              <span className="font-medium text-gray-900">
+              <FaCalendar className="w-5 h-5 text-gray-600 dark:text-gray-300" />
+              <span className="font-medium text-gray-900 dark:text-gray-100">
                 {translate('::Public.products.billingcycle')}
               </span>
             </div>
@@ -55,8 +55,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
                   globalBillingCycle === 'monthly'
                     ? 'bg-blue-600 text-white shadow-md'
                     : hasCartItems
-                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
                 }`}
                 title={
                   hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
@@ -71,8 +71,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
                   globalBillingCycle === 'yearly'
                     ? 'bg-blue-600 text-white shadow-md'
                     : hasCartItems
-                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
                 }`}
                 title={
                   hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
@@ -86,8 +86,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
           <div className="flex items-center space-x-6">
             <div className="flex items-center space-x-4">
               <div className="flex items-center space-x-2">
-                <FaClock className="w-5 h-5 text-gray-600" />
-                <span className="font-medium text-gray-900">
+                <FaClock className="w-5 h-5 text-gray-600 dark:text-gray-300" />
+                <span className="font-medium text-gray-900 dark:text-gray-100">
                   {translate('::Public.products.period')}
                 </span>
               </div>
@@ -95,10 +95,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
               <div className="flex items-center space-x-2">
                 <button
                   onClick={() => !hasCartItems && setGlobalPeriod(Math.max(1, globalPeriod - 1))}
-                  className={`p-2 rounded-md border border-gray-300 transition-colors ${
+                  className={`p-2 rounded-md border border-gray-300 transition-colors dark:border-gray-700 dark:text-gray-200 ${
                     globalPeriod <= 1 || hasCartItems
-                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                      : 'hover:bg-gray-50'
+                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
                   }`}
                   disabled={globalPeriod <= 1 || hasCartItems}
                   title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined}
@@ -106,9 +106,9 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
                   <FaMinus className="w-4 h-4" />
                 </button>
 
-                <div className="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg">
+                <div className="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg dark:bg-gray-800">
                   <span className="font-bold text-lg text-blue-600">{globalPeriod}</span>
-                  <span className="text-sm text-gray-600">
+                  <span className="text-sm text-gray-600 dark:text-gray-300">
                     {globalBillingCycle === 'monthly'
                       ? translate('::Public.products.billingcycle.month')
                       : translate('::Public.products.billingcycle.year')}
@@ -117,10 +117,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
 
                 <button
                   onClick={() => !hasCartItems && setGlobalPeriod(globalPeriod + 1)}
-                  className={`p-2 rounded-md border border-gray-300 transition-colors ${
+                  className={`p-2 rounded-md border border-gray-300 transition-colors dark:border-gray-700 dark:text-gray-200 ${
                     hasCartItems
-                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                      : 'hover:bg-gray-50'
+                      ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
                   }`}
                   disabled={hasCartItems}
                   title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined}
diff --git a/ui/src/components/orders/Cart.tsx b/ui/src/components/orders/Cart.tsx
index 25a1a01..b6acd5e 100644
--- a/ui/src/components/orders/Cart.tsx
+++ b/ui/src/components/orders/Cart.tsx
@@ -51,17 +51,17 @@ export const Cart: React.FC<CartProps> = ({
     <div className="fixed inset-0 z-50 overflow-hidden">
       <div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} />
 
-      <div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
+      <div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl dark:bg-gray-900">
         <div className="flex flex-col h-full">
-          <div className="flex items-center justify-between p-6 border-b border-gray-200">
-            <h2 className="text-base font-semibold text-gray-900">
+          <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+            <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
               {translate('::Public.cart.title')}
             </h2>
             <div className="flex items-center space-x-2">
               {cartState.items.length > 0 && (
                 <button
                   onClick={handleClearCart}
-                  className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors dark:hover:bg-red-950/40"
                   title={translate('::Public.cart.clear')}
                 >
                   <FaTrash className="w-5 h-5" />
@@ -69,7 +69,7 @@ export const Cart: React.FC<CartProps> = ({
               )}
               <button
                 onClick={onClose}
-                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors dark:text-gray-200 dark:hover:bg-gray-800"
               >
                 <FaTimes className="w-5 h-5" />
               </button>
@@ -78,7 +78,7 @@ export const Cart: React.FC<CartProps> = ({
 
           <div className="flex-1 overflow-y-auto p-6">
             {cartState.items.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-full text-gray-500">
+              <div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
                 <FaShoppingBag className="w-16 h-16 mb-4" />
                 <p className="text-lg font-medium">{translate('::Public.cart.empty.title')}</p>
                 <p className="text-sm">{translate('::Public.cart.empty.subtitle')}</p>
@@ -88,10 +88,10 @@ export const Cart: React.FC<CartProps> = ({
                 {cartState.items.map((item: BasketItem, index: number) => (
                   <div
                     key={`${item.product.id}-${item.billingCycle}-${index}`}
-                    className="border border-gray-200 rounded-lg p-4"
+                    className="border border-gray-200 rounded-lg p-4 dark:border-gray-700 dark:bg-gray-950"
                   >
                     <div className="flex justify-between items-start mb-2">
-                      <h4 className="font-medium text-gray-900 text-sm leading-tight">
+                      <h4 className="font-medium text-gray-900 text-sm leading-tight dark:text-gray-100">
                         {translate('::' + item.product.name)}
                       </h4>
                       <button
@@ -103,9 +103,9 @@ export const Cart: React.FC<CartProps> = ({
                     </div>
 
                     <div className="flex items-center justify-between">
-                      <div className="text-sm text-gray-600">
+                      <div className="text-sm text-gray-600 dark:text-gray-300">
                         {item.product.isQuantityBased && item.quantity > 1 && (
-                          <span className="font-medium text-gray-900">{item.quantity}x - </span>
+                          <span className="font-medium text-gray-900 dark:text-gray-100">{item.quantity}x - </span>
                         )}
                         {item.billingCycle === 'monthly'
                           ? translate('::Public.products.billingcycle.monthly')
@@ -113,7 +113,7 @@ export const Cart: React.FC<CartProps> = ({
                             ? translate('::Public.products.billingcycle.yearly')
                             : translate('::Public.products.billingcycle.monthly')}
                         {cartState.globalPeriod > 1 && item.product.isQuantityBased && (
-                          <span className="text-xs text-gray-500">
+                          <span className="text-xs text-gray-500 dark:text-gray-400">
                             ({cartState.globalPeriod}{' '}
                             {item.billingCycle === 'monthly'
                               ? translate('::Public.products.billingcycle.month')
@@ -127,14 +127,14 @@ export const Cart: React.FC<CartProps> = ({
                         <div className="flex items-center space-x-2">
                           <button
                             onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
-                            className="p-1 rounded border border-gray-300 hover:bg-gray-50"
+                            className="p-1 rounded border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
                           >
                             <FaMinus className="w-3 h-3" />
                           </button>
-                          <span className="w-8 text-center text-sm">{item.quantity}</span>
+                          <span className="w-8 text-center text-sm dark:text-gray-100">{item.quantity}</span>
                           <button
                             onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
-                            className="p-1 rounded border border-gray-300 hover:bg-gray-50"
+                            className="p-1 rounded border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
                           >
                             <FaPlus className="w-3 h-3" />
                           </button>
@@ -152,9 +152,9 @@ export const Cart: React.FC<CartProps> = ({
           </div>
 
           {cartState.items.length > 0 && (
-            <div className="border-t border-gray-200 p-6">
+            <div className="border-t border-gray-200 p-6 dark:border-gray-700">
               <div className="flex justify-between items-center mb-4">
-                <span className="text-lg font-semibold text-gray-900">
+                <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                   {translate('::App.Listform.ListformField.Total')}
                 </span>
                 <span className="text-xl font-bold text-blue-600">
diff --git a/ui/src/components/orders/OrderSuccess.tsx b/ui/src/components/orders/OrderSuccess.tsx
index fe7ee71..eeed79a 100644
--- a/ui/src/components/orders/OrderSuccess.tsx
+++ b/ui/src/components/orders/OrderSuccess.tsx
@@ -15,24 +15,24 @@ export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToSho
 
   return (
     <div className="max-w-2xl mx-auto text-center">
-      <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8">
+      <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
         <div className="mb-6">
           <FaCheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
-          <h2 className="text-xl font-bold text-gray-900">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
             {translate('::Public.order.success.title')}
           </h2>
 
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-300">
             {translate('::Public.order.success.number')}{' '}
             <span className="font-semibold text-blue-600">#{orderId}</span>
           </p>
         </div>
 
-        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
-          <h3 className="font-semibold text-green-800 mb-2">
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6 dark:border-green-900/60 dark:bg-green-950/30">
+          <h3 className="font-semibold text-green-800 mb-2 dark:text-green-300">
             {translate('::Public.order.success.nextSteps')}
           </h3>
-          <ul className="text-sm text-green-700 space-y-1 text-left">
+          <ul className="text-sm text-green-700 space-y-1 text-left dark:text-green-200">
             <li>• {translate('::Public.order.success.step1')}</li>
             <li>• {translate('::Public.order.success.step2')}</li>
             <li>• {translate('::Public.order.success.step3')}</li>
@@ -42,7 +42,7 @@ export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToSho
         <div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
           <button
             onClick={() => navigate(ROUTES_ENUM.public.home)}
-            className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
           >
             <FaArrowLeft className="w-4 h-4 mr-2" />
             {translate('::Public.notFound.button')}
diff --git a/ui/src/components/orders/PaymentForm.tsx b/ui/src/components/orders/PaymentForm.tsx
index 9c04e96..19425e5 100644
--- a/ui/src/components/orders/PaymentForm.tsx
+++ b/ui/src/components/orders/PaymentForm.tsx
@@ -127,15 +127,15 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
         <form onSubmit={handleSubmit} className="flex flex-col lg:flex-row gap-6">
           {/* 3 Sütun: Ödeme Yöntemi | Taksit Seçenekleri | Sipariş Özeti */}
           <div className="w-full lg:w-1/3 flex flex-col gap-6">
-            <div className="bg-white rounded-xl shadow border p-6">
+            <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
               {tenant && (
                 <>
                   <h2 className="text-lg font-semibold mb-4 flex items-center">
                     <FaUser className="w-5 h-5 text-green-600 mr-2" />{' '}
                     {translate('::Public.payment.customerInfo')}
                   </h2>
-                  <div className="pt-4 border-t border-gray-200">
-                    <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700">
+                  <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 dark:text-gray-300">
                       <div className="flex items-center gap-2">
                         <FaUser className="w-4 h-4 text-gray-500" />
                         <span className="font-medium">
@@ -252,7 +252,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
 
           <div className="w-full lg:w-1/3 flex flex-col gap-6">
             {/* 1. Sütun: Ödeme Yöntemi */}
-            <div className="bg-white rounded-xl shadow border p-6">
+            <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
               <h2 className="text-lg font-semibold mb-4 flex items-center">
                 <FaLock className="w-5 h-5 text-green-600 mr-2" />{' '}
                 {translate('::Public.payment.method.title')}
@@ -264,7 +264,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                     className={`flex items-center p-3 border-2 rounded-lg cursor-pointer transition-all ${
                       selectedPaymentMethod === method.name
                         ? 'border-blue-500 bg-blue-50'
-                        : 'border-gray-200 hover:border-gray-300'
+                        : 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-500'
                     }`}
                   >
                     <input
@@ -279,8 +279,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                     />
                     <span className="text-2xl mr-3">{method.logo}</span>
                     <div>
-                      <div className="font-medium text-gray-900">{method.name}</div>
-                      <div className="text-sm text-gray-600">
+                      <div className="font-medium text-gray-900 dark:text-gray-100">{method.name}</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-300">
                         {method.name === defaultPaymentMethod
                           ? translate('::Public.payment.method.installmentsAvailable')
                           : translate('::Public.payment.method.noCommission')}
@@ -293,8 +293,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
 
             {/* Taksit Seçenekleri */}
             {selectedPaymentMethod === defaultPaymentMethod && (
-              <div className="bg-white rounded-xl shadow border p-4">
-                <h3 className="text-md font-medium text-gray-800 mb-2">
+              <div className="bg-white rounded-xl shadow border p-4 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
+                <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-2">
                   {translate('::App.Orders.InstallmentOptions')}
                 </h3>
                 <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
@@ -304,7 +304,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                       className={`flex flex-col items-center justify-center h-full p-4 border-2 rounded-xl cursor-pointer transition-all text-xs md:text-sm text-center select-none ${
                         selectedInstallment?.installment === option.installment
                           ? 'border-blue-500 bg-blue-50 shadow-md scale-105'
-                          : 'border-gray-200 hover:border-blue-200'
+                          : 'border-gray-200 hover:border-blue-200 dark:border-gray-700 dark:hover:border-blue-500'
                       }`}
                     >
                       <input
@@ -327,7 +327,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                           ? `${option.installment} ${translate('::Public.payment.installments.monthly')}`
                           : translate('::Public.payment.installments.single')}
                       </div>
-                      <div className="font-extrabold text-lg text-gray-900 mt-1">
+                      <div className="font-extrabold text-lg text-gray-900 dark:text-gray-100 mt-1">
                         {formatPrice(
                           (cartState.total + cartState.total * option.commission) /
                             option.installment,
@@ -344,8 +344,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
           <div className="w-full lg:w-1/3 flex flex-col gap-6">
             {/* Kart Bilgileri */}
             {selectedPaymentMethod === defaultPaymentMethod && (
-              <div className="bg-white rounded-xl shadow border p-6 space-y-3">
-                <h3 className="text-md font-medium text-gray-800 mb-3">
+              <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40 space-y-3">
+                <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-3">
                   {translate('::Public.payment.card.title')}
                 </h3>
                 <input
@@ -353,7 +353,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                   required
                   value={paymentData.cardName}
                   onChange={(e) => handleInputChange('cardName', e.target.value)}
-                  className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                   placeholder={translate('::Public.payment.card.name')}
                 />
                 <input
@@ -361,7 +361,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                   required
                   value={paymentData.cardNumber}
                   onChange={(e) => handleInputChange('cardNumber', e.target.value)}
-                  className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                   placeholder={translate('::Public.payment.card.number')}
                   maxLength={19}
                 />
@@ -371,7 +371,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                     required
                     value={paymentData.expiryDate}
                     onChange={(e) => handleInputChange('expiryDate', e.target.value)}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                     placeholder="MM/YY"
                     maxLength={5}
                   />
@@ -380,7 +380,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                     required
                     value={paymentData.cvv}
                     onChange={(e) => handleInputChange('cvv', e.target.value)}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg"
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                     placeholder="CVV"
                     maxLength={4}
                   />
@@ -389,8 +389,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
             )}
 
             {/* Sipariş Özeti ve Butonlar */}
-            <div className="bg-white rounded-xl shadow border p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                 {translate('::Public.payment.summary.title')}
               </h3>
 
@@ -415,7 +415,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                 ))}
               </div>
 
-              <div className="space-y-1 text-sm border-t border-gray-200 pt-4 text-gray-600">
+              <div className="space-y-1 text-sm border-t border-gray-200 dark:border-gray-700 pt-4 text-gray-600 dark:text-gray-300">
                 <div className="flex justify-between">
                   <span>{translate('::Public.payment.summary.subtotal')}</span>
                   <span>{formatPrice(cartState.total)}</span>
@@ -435,7 +435,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                       </span>
                     </div>
                   )}
-                <div className="flex justify-between text-base font-bold pt-2 text-gray-900">
+                <div className="flex justify-between text-base font-bold pt-2 text-gray-900 dark:text-gray-100">
                   <span>{translate('::App.Listform.ListformField.Total')}</span>
                   <span className="text-blue-600">{formatPrice(finalTotal)}</span>
                 </div>
@@ -446,7 +446,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                 <button
                   type="button"
                   onClick={onBack}
-                  className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg"
+                  className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 dark:text-gray-300 rounded-lg"
                 >
                   <FaArrowLeft className="w-4 h-4 mr-2" />
                   {translate('::Back')}
@@ -468,3 +468,4 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
     </div>
   )
 }
+
diff --git a/ui/src/components/orders/ProductCard.tsx b/ui/src/components/orders/ProductCard.tsx
index 1c3e9eb..359ac70 100644
--- a/ui/src/components/orders/ProductCard.tsx
+++ b/ui/src/components/orders/ProductCard.tsx
@@ -89,7 +89,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   }
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group flex flex-col h-full">
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group flex flex-col h-full dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
       {product.imageUrl && (
         <div className="aspect-video overflow-hidden">
           <img
@@ -107,28 +107,28 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           </span>
         </div>
 
-        <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">{translate('::' + product.name)}</h3>
+        <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 dark:text-gray-100">{translate('::' + product.name)}</h3>
 
-        <p className="text-gray-600 text-sm mb-4 line-clamp-3">{translate('::' + product.description)}</p>
+        <p className="text-gray-600 text-sm mb-4 line-clamp-3 dark:text-gray-300">{translate('::' + product.description)}</p>
 
         {/* Quantity and Yearly Savings above price */}
         <div className="mb-4 space-y-3">
           {product.isQuantityBased && (
             <div className="flex items-center space-x-3">
-              <span className="text-sm font-medium text-gray-700">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                 {translate('::Public.products.quantity')}
               </span>
               <div className="flex items-center space-x-2">
                 <button
                   onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                  className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
+                  className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
                 >
                   <FaMinus className="w-4 h-4" />
                 </button>
-                <span className="w-12 text-center font-medium">{quantity}</span>
+                <span className="w-12 text-center font-medium dark:text-gray-100">{quantity}</span>
                 <button
                   onClick={() => setQuantity(quantity + 1)}
-                  className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
+                  className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
                 >
                   <FaPlus className="w-4 h-4" />
                 </button>
@@ -148,14 +148,14 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         {/* Bottom section with consistent height */}
         <div className="mt-auto">
           <div className="mb-4">
-            <div className="text-2xl font-bold text-gray-900">
+            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
               {formatPrice(getCurrentPrice())}
-              <span className="text-sm font-normal text-gray-500 ml-1">{getUnitText()}</span>
+              <span className="text-sm font-normal text-gray-500 ml-1 dark:text-gray-400">{getUnitText()}</span>
             </div>
             {globalPeriod > 1 && (
               <div className="text-lg font-semibold text-blue-600 mt-1">
                 {translate('::App.Listform.ListformField.Total')} {formatPrice(getTotalPrice())}
-                <span className="text-sm font-normal text-gray-500 ml-1">{getPeriodText()}</span>
+                <span className="text-sm font-normal text-gray-500 ml-1 dark:text-gray-400">{getPeriodText()}</span>
               </div>
             )}
           </div>
@@ -170,7 +170,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                 disabled={isDisabled}
                 className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform ${
                   isDisabled
-                    ? 'bg-gray-400 text-gray-700 cursor-not-allowed'
+                    ? 'bg-gray-400 text-gray-700 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400'
                     : 'bg-blue-600 hover:bg-blue-700 text-white hover:scale-[1.02] active:scale-[0.98]'
                 }`}
               >
diff --git a/ui/src/components/orders/ProductCatalog.tsx b/ui/src/components/orders/ProductCatalog.tsx
index be464d1..51db000 100644
--- a/ui/src/components/orders/ProductCatalog.tsx
+++ b/ui/src/components/orders/ProductCatalog.tsx
@@ -88,10 +88,10 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
   return (
     <div className="flex flex-col lg:flex-row gap-8">
       <aside className="lg:w-64 flex-shrink-0">
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40">
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
           <div className="flex items-center space-x-2 mb-4">
-            <FaFilter className="w-5 h-5 text-gray-600" />
-            <h3 className="font-semibold text-gray-900">
+            <FaFilter className="w-5 h-5 text-gray-600 dark:text-gray-300" />
+            <h3 className="font-semibold text-gray-900 dark:text-gray-100">
               {translate('::Public.products.categories')}
             </h3>
           </div>
@@ -103,7 +103,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                 className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-between ${
                   selectedCategory === category
                     ? 'bg-blue-100 text-blue-800 border border-blue-200'
-                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100'
                 }`}
               >
                 <span>
@@ -115,7 +115,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                   className={`text-xs px-2 py-1 rounded-full ${
                     selectedCategory === category
                       ? 'bg-blue-200 text-blue-800'
-                      : 'bg-gray-200 text-gray-600'
+                      : 'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
                   }`}
                 >
                   {getCategoryCount(category)}
@@ -127,8 +127,8 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
           {/* Search input moved here */}
           <div className="mt-6">
             <div className="flex items-center space-x-2 mb-3">
-              <FaSearch className="w-5 h-5 text-gray-600" />
-              <h3 className="font-semibold text-gray-900">
+              <FaSearch className="w-5 h-5 text-gray-600 dark:text-gray-300" />
+              <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                 {translate('::ListForms.ListFormEdit.TabSearch')}
               </h3>
             </div>
@@ -139,7 +139,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                 placeholder={translate('::Public.products.search.placeholder')}
                 value={searchQuery}
                 onChange={(e) => onSearchChange(e.target.value)}
-                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
               />
             </div>
           </div>
@@ -148,7 +148,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
 
       <main className="flex-1">
         {loading ? (
-          <div className="flex items-center justify-center min-h-screen bg-gray-50">
+          <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>
@@ -172,10 +172,10 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                 <div className="text-gray-400 mb-2">
                   <FaFilter className="w-12 h-12 mx-auto" />
                 </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-2">
+                <h2 className="text-2xl font-bold text-gray-900 mb-2 dark:text-gray-100">
                   {translate('::App.NoResults')}
                 </h2>
-                <p className="text-gray-600">{translate('::Public.products.empty.description')}</p>
+                <p className="text-gray-600 dark:text-gray-300">{translate('::Public.products.empty.description')}</p>
               </div>
             )}
           </>
diff --git a/ui/src/components/orders/TenantForm.tsx b/ui/src/components/orders/TenantForm.tsx
index 769e4e1..0b10233 100644
--- a/ui/src/components/orders/TenantForm.tsx
+++ b/ui/src/components/orders/TenantForm.tsx
@@ -74,7 +74,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
 
   return (
     <div className="flex flex-col lg:flex-row gap-6 mb-6">
-      <div className="w-full lg:w-1/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6">
+      <div className="w-full lg:w-1/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
         <div className="mb-6">
           <h2 className="text-lg font-semibold mb-4 flex items-center">
             <FaUser className="w-5 h-5 text-green-600 mr-2" />{' '}
@@ -88,14 +88,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
               onClick={() => setIsExisting(true)}
               className={`p-4 border-2 rounded-xl transition-all text-left select-none ${
                 isExisting === true
-                  ? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02]'
-                  : 'border-gray-200 hover:border-blue-300'
+                  ? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02] dark:bg-blue-950/30'
+                  : 'border-gray-200 hover:border-blue-300 dark:border-gray-700 dark:hover:border-blue-500'
               }`}
             >
-              <div className="font-semibold text-gray-900 mb-2">
+              <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                 {translate('::Public.products.tenantForm.existing.title')}
               </div>
-              <div className="text-sm text-gray-600">
+              <div className="text-sm text-gray-600 dark:text-gray-400">
                 {translate('::Public.products.tenantForm.existing.desc')}
               </div>
             </button>
@@ -104,14 +104,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
               onClick={() => setIsExisting(false)}
               className={`p-4 border-2 rounded-xl transition-all text-left select-none ${
                 isExisting === false
-                  ? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02]'
-                  : 'border-gray-200 hover:border-blue-300'
+                  ? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02] dark:bg-blue-950/30'
+                  : 'border-gray-200 hover:border-blue-300 dark:border-gray-700 dark:hover:border-blue-500'
               }`}
             >
-              <div className="font-semibold text-gray-900 mb-2">
+              <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                 {translate('::Public.products.tenantForm.new.title')}
               </div>
-              <div className="text-sm text-gray-600">
+              <div className="text-sm text-gray-600 dark:text-gray-400">
                 {translate('::Public.products.tenantForm.new.desc')}
               </div>
             </button>
@@ -119,12 +119,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
         </div>
       </div>
 
-      <div className="w-full lg:w-2/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6">
+      <div className="w-full lg:w-2/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
         {isExisting !== null && (
           <form onSubmit={handleSubmit} className="space-y-6">
             {isExisting ? (
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   {translate('::Public.payment.customer.code')}
                 </label>
                 <div className="relative flex flex-col sm:flex-row sm:items-stretch">
@@ -143,7 +143,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                           await getTenantInfo()
                         }
                       }}
-                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg sm:rounded-l-lg sm:rounded-r-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 sm:rounded-l-lg sm:rounded-r-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                     />
                   </div>
                   <button
@@ -157,7 +157,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                 </div>
 
                 {formData.organizationName && (
-                  <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 p-3">
+                  <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 dark:text-gray-300 p-3">
                     <div className="flex items-center gap-2">
                       <FaUser className="w-4 h-4 text-gray-500" />
                       <span className="font-medium">
@@ -264,7 +264,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
               <div className="space-y-4">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                       {translate('::Public.products.tenantForm.orgName')}
                     </label>
                     <div className="relative">
@@ -276,12 +276,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="Enter your organization name"
                         value={formData.organizationName || ''}
                         onChange={(e) => handleInputChange('organizationName', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                       />
                     </div>
                   </div>
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::LoginPanel.Profil')}
                     </label>
                     <div className="relative">
@@ -292,7 +292,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="Enter founder's name"
                         value={formData.founder || ''}
                         onChange={(e) => handleInputChange('founder', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
@@ -300,7 +300,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Abp.Identity.User.UserInformation.PhoneNumber')}
                     </label>
                     <div className="relative">
@@ -311,12 +311,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="+90 (___) ___-____"
                         value={formData.phoneNumber || ''}
                         onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Abp.Account.EmailAddress')}
                     </label>
                     <div className="relative">
@@ -327,14 +327,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="sample@email.com"
                         value={formData.email || ''}
                         onChange={(e) => handleInputChange('email', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
                 </div>
 
                 <div>
-                  <label className="text-sm font-medium text-gray-700">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                     {translate('::App.Address')}
                   </label>
                   <div className="relative">
@@ -345,14 +345,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                       value={formData.address1 || ''}
                       onChange={(e) => handleInputChange('address1', e.target.value)}
                       rows={3}
-                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
                   </div>
                 </div>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Public.payment.customer.country')}
                     </label>
                     <div className="relative">
@@ -362,12 +362,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="Türkiye"
                         value={formData.country || ''}
                         onChange={(e) => handleInputChange('country', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Public.common.city')}
                     </label>
                     <div className="relative">
@@ -378,7 +378,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="İstanbul"
                         value={formData.city || ''}
                         onChange={(e) => handleInputChange('city', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
@@ -386,7 +386,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Public.payment.customer.district')}
                     </label>
                     <div className="relative">
@@ -397,12 +397,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="Çekmeköy"
                         value={formData.district || ''}
                         onChange={(e) => handleInputChange('district', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Public.payment.customer.postalCode')}
                     </label>
                     <div className="relative">
@@ -413,7 +413,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="34782"
                         value={formData.postalCode || ''}
                         onChange={(e) => handleInputChange('postalCode', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
@@ -421,7 +421,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Public.contact.taxOffice')}
                     </label>
                     <div className="relative">
@@ -432,12 +432,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="Kozyatağı"
                         value={formData.taxOffice}
                         onChange={(e) => handleInputChange('taxOffice', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
                   <div>
-                    <label className="text-sm font-medium text-gray-700">
+                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {translate('::Public.contact.taxNumber')}
                     </label>
                     <div className="relative">
@@ -448,14 +448,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                         placeholder="1234567890"
                         value={formData.vknTckn}
                         onChange={(e) => handleInputChange('vknTckn', e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                     </div>
                   </div>
                 </div>
 
                 <div>
-                  <label className="text-sm font-medium text-gray-700">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                     {translate('::Public.payment.customer.reference')}
                   </label>
                   <div className="relative">
@@ -465,7 +465,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                       placeholder={translate('::Public.payment.customer.reference')}
                       value={formData.reference || ''}
                       onChange={(e) => handleInputChange('reference', e.target.value)}
-                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
                   </div>
                 </div>
@@ -476,7 +476,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
               <button
                 type="button"
                 onClick={() => navigate(ROUTES_ENUM.public.products)}
-                className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg"
+                className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 dark:text-gray-300 rounded-lg"
               >
                 <FaArrowLeft className="w-4 h-4 mr-2" />
                 {translate('::Back')}
@@ -495,3 +495,4 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
     </div>
   )
 }
+
diff --git a/ui/src/views/public/About.tsx b/ui/src/views/public/About.tsx
index ee91d98..bea45f0 100644
--- a/ui/src/views/public/About.tsx
+++ b/ui/src/views/public/About.tsx
@@ -218,7 +218,7 @@ function buildAboutContent(
     descriptionsContainerStyleClass: resolveLocalizedValue(
       translate,
       ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY,
-      'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600',
+      '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',
     ),
     stats:
       about?.statsDto.map((stat, index) => ({
@@ -232,13 +232,13 @@ function buildAboutContent(
         valueStyleClass: resolveLocalizedValue(
           translate,
           `Public.about.dynamic.stat.${index + 1}.valueStyleClass`,
-          'text-4xl font-bold text-gray-900 mb-2',
+          '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',
+          'text-gray-600 dark:text-gray-300',
         ),
         icon: stat.icon || '',
         value: stat.value,
@@ -278,19 +278,19 @@ function buildAboutContent(
         cardStyleClass: resolveLocalizedValue(
           translate,
           `Public.about.dynamic.section.${section.key}.cardStyleClass`,
-          'bg-white p-8 rounded-xl shadow-lg',
+          'bg-white dark:bg-gray-900 p-8 rounded-xl shadow-lg dark:shadow-gray-950/40',
         ),
         titleStyleClassKey: `Public.about.dynamic.section.${section.key}.titleStyleClass`,
         titleStyleClass: resolveLocalizedValue(
           translate,
           `Public.about.dynamic.section.${section.key}.titleStyleClass`,
-          'text-2xl font-bold text-gray-900 mb-4',
+          'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
         ),
         descriptionStyleClassKey: `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
         descriptionStyleClass: resolveLocalizedValue(
           translate,
           `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
-          'text-gray-700',
+          'text-gray-700 dark:text-gray-300',
         ),
       })) ?? [],
   }
@@ -764,7 +764,7 @@ const About: FC = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -780,7 +780,7 @@ const About: FC = () => {
         defaultTitle={APP_NAME}
       ></Helmet>
 
-      <div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+      <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
         {isDesignMode && !isPanelVisible && (
           <Button
             type="button"
@@ -798,15 +798,16 @@ const About: FC = () => {
           isDesignMode={isDesignMode}
           onSelect={handleSelectBlock}
         >
-          <div className={content?.heroSectionStyleClass || 'relative bg-blue-900 text-white py-12'}>
+          <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
             <div
-              className="absolute inset-0 opacity-20"
+              className="absolute inset-0 opacity-20 dark:opacity-35"
               style={{
                 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'}>
                 {content?.heroTitle}
@@ -817,7 +818,7 @@ const About: FC = () => {
         </SelectableBlock>
 
         {/* Stats Section */}
-        <div className="py-10 bg-white">
+        <div className="py-10 bg-white 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) => {
@@ -837,10 +838,10 @@ const About: FC = () => {
                           className={`w-12 h-12 mx-auto mb-4 ${getIconColor(index)}`}
                         />
                       )}
-                      <div className={stat.valueStyleClass || 'text-4xl font-bold text-gray-900 mb-2'}>
+                      <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'}>{stat.label}</div>
+                      <div className={`${stat.labelStyleClass || 'text-gray-600'} dark:text-gray-300`}>{stat.label}</div>
                     </div>
                   </SelectableBlock>
                 )
@@ -859,7 +860,7 @@ const About: FC = () => {
                 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'}>
+                <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}
@@ -878,9 +879,9 @@ const About: FC = () => {
                   isDesignMode={isDesignMode}
                   onSelect={handleSelectBlock}
                 >
-                  <div className={section.cardStyleClass || 'bg-white p-8 rounded-xl shadow-lg'}>
-                    <h3 className={section.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'}>{section.title}</h3>
-                    <p className={section.descriptionStyleClass || 'text-gray-700'}>{section.description}</p>
+                  <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>
                 </SelectableBlock>
               ))}
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index ac81280..b55a755 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -67,7 +67,7 @@ const Blog = () => {
 
   if (loading && posts.length === 0) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -76,16 +76,16 @@ const Blog = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'App.BlogManagement')}
         defaultTitle={APP_NAME}
       ></Helmet>
       {/* Hero Section */}
-      <div className="relative bg-blue-900 text-white py-12">
+      <div className="relative bg-blue-900 text-white py-12 dark:bg-gray-950">
         <div
-          className="absolute inset-0 opacity-20"
+          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")',
@@ -93,6 +93,7 @@ const Blog = () => {
             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">
             {translate('::App.BlogManagement')}
@@ -101,9 +102,14 @@ const Blog = () => {
         </div>
       </div>
 
+      
+
+      {/* Blog Posts Grid */}
+      <div className="container mx-auto px-4 py-6">
+
       {/* Search and Filter Section */}
-      <div className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-6">
+      <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">
@@ -113,7 +119,7 @@ const Blog = () => {
                   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 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  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>
@@ -126,7 +132,7 @@ const Blog = () => {
                 className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
                   selectedCategory === ''
                     ? 'bg-blue-600 text-white'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    : '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')}
@@ -138,7 +144,7 @@ const Blog = () => {
                   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'
+                      : '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})
@@ -149,17 +155,15 @@ const Blog = () => {
         </div>
       </div>
 
-      {/* Blog Posts Grid */}
-      <div className="container mx-auto px-4 py-16">
         {!Array.isArray(posts) || posts.length === 0 ? (
           <div className="text-center py-12">
-            <p className="text-gray-600 text-lg">Henüz blog yazısı bulunmuyor.</p>
+            <p className="text-gray-600 text-lg dark:text-gray-300">Henüz blog yazısı bulunmuyor.</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {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">
+                <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}
@@ -171,10 +175,10 @@ const Blog = () => {
                     </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">
+                    <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">
                       {translate('::Public.' + post.title)}
                     </h2>
-                    <p className="text-gray-600 mb-4 flex-1">
+                    <p className="text-gray-600 mb-4 flex-1 dark:text-gray-300">
                       {translate('::Public.' + post.summary)}
                     </p>
 
@@ -184,7 +188,7 @@ const Blog = () => {
                         {post.tags.slice(0, 3).map((tag, index) => (
                           <span
                             key={index}
-                            className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
+                            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"
                           >
                             <FaTag className="w-3 h-3 mr-1" />
                             {tag}
@@ -193,7 +197,7 @@ const Blog = () => {
                       </div>
                     )}
 
-                    <div className="flex items-center text-sm text-gray-500 space-x-4">
+                    <div className="flex items-center text-sm text-gray-500 space-x-4 dark:text-gray-400">
                       <div className="flex items-center">
                         <FaUser size={16} className="mr-1" />
                         {post.author}
@@ -217,7 +221,7 @@ const Blog = () => {
               <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"
+                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>
@@ -229,7 +233,7 @@ const Blog = () => {
                   className={`px-4 py-2 rounded-lg ${
                     currentPage === i + 1
                       ? 'bg-blue-600 text-white'
-                      : 'border border-gray-300 hover:bg-gray-50'
+                      : 'border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800'
                   }`}
                 >
                   {i + 1}
@@ -239,7 +243,7 @@ const Blog = () => {
               <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"
+                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>
@@ -249,19 +253,19 @@ const Blog = () => {
       </div>
 
       {/* Newsletter Section */}
-      <div className="bg-white py-16">
+      <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">
+          <h2 className="text-3xl font-bold text-gray-900 mb-4 dark:text-gray-100">
             {translate('::Public.blog.subscribe')}
           </h2>
-          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
+          <p className="text-gray-600 mb-8 max-w-2xl mx-auto dark:text-gray-300">
             {translate('::Public.blog.subscribe.desc')}
           </p>
           <div className="max-w-md mx-auto flex gap-4">
             <input
               type="email"
               placeholder={translate('::Abp.Account.EmailAddress')}
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 px-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"
             />
             <Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
               {translate('::Public.common.subscribe')}
diff --git a/ui/src/views/public/BlogDetail.tsx b/ui/src/views/public/BlogDetail.tsx
index 00d7e23..d49e283 100644
--- a/ui/src/views/public/BlogDetail.tsx
+++ b/ui/src/views/public/BlogDetail.tsx
@@ -52,7 +52,7 @@ const BlogDetail: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -62,22 +62,22 @@ const BlogDetail: React.FC = () => {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <h1 className="text-2xl font-bold text-gray-900">Error: {error}</h1>
+      <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>
     )
   }
 
   if (!blogPost || !postData) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <h1 className="text-2xl font-bold text-gray-900">{translate('::Public.blog.notFound')}</h1>
+      <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>
     )
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'App.BlogManagement')}
@@ -87,7 +87,7 @@ const BlogDetail: React.FC = () => {
       <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"
+          className="text-blue-600 hover:underline mt-4 mb-4 inline-block dark:text-blue-400"
         >
           &larr; {translate('::App.BlogManagement')}
         </Link>
@@ -98,10 +98,10 @@ const BlogDetail: React.FC = () => {
             className="w-full h-96 object-cover rounded-lg mb-8"
           />
         )}
-        <h1 className="text-4xl font-bold text-gray-900 mb-6">
+        <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">
+        <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>
@@ -110,7 +110,7 @@ const BlogDetail: React.FC = () => {
           </div>
         </div>
         <div
-          className="prose max-w-none text-gray-800"
+          className="prose max-w-none text-gray-800 dark:prose-invert dark:text-gray-200"
           dangerouslySetInnerHTML={{
             __html:
               currentLang == 'tr'
diff --git a/ui/src/views/public/Checkout.tsx b/ui/src/views/public/Checkout.tsx
index 4c43971..2cf64c5 100644
--- a/ui/src/views/public/Checkout.tsx
+++ b/ui/src/views/public/Checkout.tsx
@@ -56,7 +56,7 @@ const Checkout: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'Public.nav.checkout')}
diff --git a/ui/src/views/public/Contact.tsx b/ui/src/views/public/Contact.tsx
index 7f6e6cd..4f252dd 100644
--- a/ui/src/views/public/Contact.tsx
+++ b/ui/src/views/public/Contact.tsx
@@ -120,7 +120,7 @@ function buildContactContent(
     heroSectionStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_HERO_SECTION_STYLE_KEY,
-      'relative bg-blue-900 py-12 text-white',
+      'relative bg-blue-900 py-12 text-white dark:bg-gray-950',
     ),
     heroSectionStyleClassKey: CONTACT_HERO_SECTION_STYLE_KEY,
     heroTitleStyleClass: resolveLocalizedValue(
@@ -144,13 +144,13 @@ function buildContactContent(
     contactInfoCardStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_INFO_CARD_STYLE_KEY,
-      'rounded-xl bg-white p-8 shadow-lg',
+      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
     ),
     contactInfoCardStyleClassKey: CONTACT_INFO_CARD_STYLE_KEY,
     contactInfoTitleStyleClass: resolveLocalizedValue(
       translate,
       CONTACT_INFO_TITLE_STYLE_KEY,
-      'mb-6 text-2xl font-bold text-gray-900',
+      'mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100',
     ),
     contactInfoTitleStyleClassKey: CONTACT_INFO_TITLE_STYLE_KEY,
     address: resolveLocalizedValue(translate, contact?.address, ''),
@@ -165,7 +165,9 @@ 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',
+    bankStyleClass:
+      contact?.bankDto?.styleClass ||
+      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
     workHoursTitle: resolveLocalizedValue(translate, CONTACT_WORK_HOURS_TITLE_KEY),
     workHoursTitleKey: CONTACT_WORK_HOURS_TITLE_KEY,
     workWeekday: resolveLocalizedValue(translate, contact?.workHoursDto?.weekday, ''),
@@ -174,7 +176,9 @@ 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',
+    workHoursStyleClass:
+      contact?.workHoursDto?.styleClass ||
+      'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
     mapTitle: resolveLocalizedValue(translate, contact?.mapDto?.title, ''),
     mapTitleKey: contact?.mapDto?.title || '',
     mapSrc: contact?.mapDto?.src || '',
@@ -183,9 +187,12 @@ function buildContactContent(
     mapAllowFullScreen: String(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',
+    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',
+      contact?.mapDto?.frameStyleClass ||
+      'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800',
   }
 }
 
@@ -636,7 +643,7 @@ const Contact: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -645,7 +652,7 @@ const Contact: React.FC = () => {
   }
 
   return (
-    <div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::App.Contact')}
@@ -674,15 +681,16 @@ const Contact: React.FC = () => {
         isDesignMode={isDesignMode}
         onSelect={handleSelectBlock}
       >
-        <div className={content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'}>
+        <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
           <div
-            className="absolute inset-0 opacity-20"
+            className="absolute inset-0 opacity-20 dark:opacity-35"
             style={{
               backgroundImage: `url("${content?.heroImage || CONTACT_HERO_IMAGE_DEFAULT}")`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
             }}
           ></div>
+          <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
           <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>
@@ -690,7 +698,7 @@ const Contact: React.FC = () => {
         </div>
       </SelectableBlock>
 
-      <div className="py-16">
+      <div className="py-6">
         <div className="container mx-auto px-4">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
             <div className="space-y-4">
@@ -700,41 +708,41 @@ const Contact: React.FC = () => {
                 isDesignMode={isDesignMode}
                 onSelect={handleSelectBlock}
               >
-                <div className={content?.contactInfoCardStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
-                  <h2 className={content?.contactInfoTitleStyleClass || 'mb-6 text-2xl font-bold text-gray-900'}>{content?.contactInfoTitle}</h2>
+                <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="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" />
+                      <FaMapMarkerAlt className="mt-1 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
                       <div>
-                        <p className="text-gray-600">{content?.address}</p>
+                        <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" />
+                      <FaPhone className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
                       <div>
-                        <p className="text-gray-600">{content?.phoneNumber}</p>
+                        <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" />
+                      <FaEnvelope className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
                       <div>
-                        <p className="text-gray-600">
-                          <a href={`mailto:${content?.email}`} className="text-blue-600 hover:underline">
+                        <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" />
+                      <FaBuilding className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
                       <div>
-                        <p className="text-gray-600">{content?.location}</p>
+                        <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" />
+                      <FaIdCard className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
                       <div>
-                        <p className="text-gray-600">{content?.taxNumber}</p>
+                        <p className="text-gray-600 dark:text-gray-300">{content?.taxNumber}</p>
                       </div>
                     </div>
                   </div>
@@ -747,8 +755,8 @@ const Contact: React.FC = () => {
                 isDesignMode={isDesignMode}
                 onSelect={handleSelectBlock}
               >
-                <div className={content?.bankStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
-                  <h2 className="mb-6 text-2xl font-bold text-gray-900">{content?.bankTitle}</h2>
+                <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"
@@ -756,10 +764,10 @@ const Contact: React.FC = () => {
                       className="mt-1 w-24 flex-shrink-0 object-contain"
                     />
                     <div>
-                      <h3 className="mb-1 font-semibold text-gray-900">{content?.bankAccountHolder}</h3>
-                      <p className="mb-1 ml-1 text-gray-600">{content?.bankBranch}</p>
-                      <p className="mb-1 ml-1 text-gray-600">{content?.bankAccountNumber}</p>
-                      <p className="mb-1 ml-1 text-gray-600">{content?.bankIban}</p>
+                      <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>
@@ -771,20 +779,20 @@ const Contact: React.FC = () => {
                 isDesignMode={isDesignMode}
                 onSelect={handleSelectBlock}
               >
-                <div className={content?.workHoursStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
-                  <h2 className="mb-6 text-2xl font-bold text-gray-900">{content?.workHoursTitle}</h2>
+                <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="space-y-2">
                     <div className="flex items-center space-x-2">
-                      <FaCalendarAlt className="h-5 w-5 text-blue-500" />
-                      <p className="text-gray-600">{content?.workWeekday}</p>
+                      <FaCalendarAlt className="h-5 w-5 text-blue-500 dark:text-blue-400" />
+                      <p className="text-gray-600 dark:text-gray-300">{content?.workWeekday}</p>
                     </div>
                     <div className="flex items-center space-x-2">
-                      <FaCalendarCheck className="h-5 w-5 text-blue-500" />
-                      <p className="text-gray-600">{content?.workWeekend}</p>
+                      <FaCalendarCheck className="h-5 w-5 text-blue-500 dark:text-blue-400" />
+                      <p className="text-gray-600 dark:text-gray-300">{content?.workWeekend}</p>
                     </div>
                     <div className="flex items-center space-x-2">
-                      <FaRegComment className="h-5 w-5 text-green-500" />
-                      <p className="text-gray-600">{content?.workWhatsapp}</p>
+                      <FaRegComment className="h-5 w-5 text-green-500 dark:text-green-400" />
+                      <p className="text-gray-600 dark:text-gray-300">{content?.workWhatsapp}</p>
                     </div>
                   </div>
                 </div>
@@ -797,9 +805,9 @@ const Contact: React.FC = () => {
               isDesignMode={isDesignMode}
               onSelect={handleSelectBlock}
             >
-              <div className={content?.mapContainerStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}>
-                <h2 className="mb-2 text-center text-2xl font-bold text-gray-900">{content?.mapTitle}</h2>
-                <div className={content?.mapFrameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200'}>
+              <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}
diff --git a/ui/src/views/public/Demo.tsx b/ui/src/views/public/Demo.tsx
index 3b8fe87..5f0d8f1 100644
--- a/ui/src/views/public/Demo.tsx
+++ b/ui/src/views/public/Demo.tsx
@@ -108,13 +108,13 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
   // 🎉 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">
-        <div className="mx-auto bg-white rounded-xl shadow-lg max-w-md w-full relative">
-          <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">
+      <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 */}
             <button
               onClick={() => setIsSubmitted(false)}
-              className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl"
+              className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
             >
               &times;
             </button>
@@ -122,10 +122,10 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
             <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>
-            <h2 className="text-2xl font-bold text-gray-800 mb-4">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4 dark:text-gray-100">
               Teşekkürler!
             </h2>
-            <p className="text-gray-600 mb-6">
+            <p className="text-gray-600 mb-6 dark:text-gray-300">
               Demo talebiniz başarıyla gönderildi. 24 saat içinde size geri
               dönüş yapacağız.
             </p>
@@ -159,23 +159,23 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
 
   // 🎯 Normal form ekranı
   return (
-    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50">
-      <div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative">
+    <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">
         <button
           onClick={onClose}
-          className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl"
+          className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
         >
           &times;
         </button>
 
         <form
           onSubmit={handleSubmit}
-          className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100"
+          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="space-y-3">
             {/* Organization Name */}
             <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2">
+              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                 {translate('::Public.common.company')} *
               </label>
               <div className="relative">
@@ -189,8 +189,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                   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"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                      : "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>
@@ -198,7 +198,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
 
             {/* Full Name */}
             <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2">
+              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                 {translate('::Public.common.fullName')} *
               </label>
               <div className="relative">
@@ -211,8 +211,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                   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"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                      : "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>
@@ -220,7 +220,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
 
             <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">
+                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                   {translate('::Abp.Account.EmailAddress')} *
                 </label>
                 <div className="relative">
@@ -233,15 +233,15 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                     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"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                        : "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>
 
               <div>
-                <label className="block text-gray-700 text-sm font-medium mb-2">
+                <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">
@@ -254,8 +254,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                     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"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                        : "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>
@@ -264,7 +264,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
 
             {/* Address */}
             <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2">
+              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                 {translate('::App.Address')} *
               </label>
               <div className="relative">
@@ -277,8 +277,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                   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"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                      : "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>
@@ -287,7 +287,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
             {/* 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">
+                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                   {translate('::Public.common.branchCount')} *
                 </label>
                 <div className="relative">
@@ -300,8 +300,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                     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"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                        : "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"
                   />
@@ -309,7 +309,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
               </div>
 
               <div>
-                <label className="block text-gray-700 text-sm font-medium mb-2">
+                <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                   {translate('::Public.common.userCount')} *
                 </label>
                 <div className="relative">
@@ -322,8 +322,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                     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"
-                    } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`}
+                        : "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"
                   />
@@ -333,7 +333,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
 
             {/* Message */}
             <div>
-              <label className="block text-gray-700 text-sm font-medium mb-2">
+              <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
                 {translate('::Public.common.message')} *
               </label>
               <div className="relative">
@@ -346,8 +346,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                   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"
-                  } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 resize-none`}
+                      : "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>
diff --git a/ui/src/views/public/Home.tsx b/ui/src/views/public/Home.tsx
index ce10784..c9a15b5 100644
--- a/ui/src/views/public/Home.tsx
+++ b/ui/src/views/public/Home.tsx
@@ -116,10 +116,10 @@ const HOME_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 =
   '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 mb-4'
-const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 max-w-2xl mx-auto'
-const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 mb-4'
-const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 max-w-2xl mx-auto'
+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 =
@@ -128,7 +128,7 @@ const HOME_SLIDE_STYLE_DEFAULT = 'max-w-4xl mx-auto text-center'
 const HOME_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 =
-  'p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow'
+  '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) {
@@ -903,7 +903,7 @@ const Home: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -912,7 +912,7 @@ const Home: React.FC = () => {
   }
 
   return (
-    <div className={`min-h-screen ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'App.Home')}
@@ -942,16 +942,17 @@ const Home: React.FC = () => {
         isDesignMode={isDesignMode}
         onSelect={handleSelectBlock}
       >
-      <div className="relative min-h-screen p-20 overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div>
+      <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"
+          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">
@@ -1081,7 +1082,7 @@ const Home: React.FC = () => {
       </SelectableBlock>
 
       {/* Features */}
-      <section className="py-20 bg-white">
+      <section className="py-20 bg-white dark:bg-gray-950">
         <div className="container mx-auto px-4">
           <SelectableBlock
             id="features-heading"
@@ -1090,10 +1091,10 @@ const Home: React.FC = () => {
             onSelect={handleSelectBlock}
           >
           <div className="text-center mb-16">
-            <h2 className={content?.featuresTitleStyle}>
+            <h2 className={`${content?.featuresTitleStyle || HOME_FEATURES_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
               {content?.featuresTitle}
             </h2>
-            <p className={content?.featuresSubtitleStyle}>
+            <p className={`${content?.featuresSubtitleStyle || HOME_FEATURES_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
               {content?.featuresSubtitle}
             </p>
           </div>
@@ -1109,10 +1110,7 @@ const Home: React.FC = () => {
                 onSelect={handleSelectBlock}
               >
               <div
-                className={
-                  feature.styleClass ||
-                  'p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow'
-                }
+                className={`${feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT} dark:bg-gray-900 dark:shadow-gray-950/40`}
               >
                 <div className="mb-6">
                   {(() => {
@@ -1120,8 +1118,8 @@ const Home: React.FC = () => {
                     return IconComponent ? <IconComponent className="w-12 h-12 text-blue-500" /> : null
                   })()}
                 </div>
-                <h2 className="text-2xl font-bold text-gray-900">{feature.title}</h2>
-                <p className="text-gray-600">{feature.description}</p>
+                <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>
             ))}
@@ -1130,7 +1128,7 @@ const Home: React.FC = () => {
       </section>
 
       {/* Solutions */}
-      <section className="py-20 bg-gray-50">
+      <section className="py-20 bg-gray-50 dark:bg-gray-900">
         <div className="container mx-auto px-4">
           <SelectableBlock
             id="solutions-heading"
@@ -1139,10 +1137,10 @@ const Home: React.FC = () => {
             onSelect={handleSelectBlock}
           >
           <div className="text-center mb-16">
-            <h2 className={content?.solutionsTitleStyle}>
+            <h2 className={`${content?.solutionsTitleStyle || HOME_SOLUTIONS_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
               {content?.solutionsTitle}
             </h2>
-            <p className={content?.solutionsSubtitleStyle}>
+            <p className={`${content?.solutionsSubtitleStyle || HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
               {content?.solutionsSubtitle}
             </p>
           </div>
diff --git a/ui/src/views/public/NotFound.tsx b/ui/src/views/public/NotFound.tsx
index ebf49f2..af84928 100644
--- a/ui/src/views/public/NotFound.tsx
+++ b/ui/src/views/public/NotFound.tsx
@@ -7,10 +7,10 @@ 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"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */}
+    <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">404</h1> {/* Başlık boyutu ve rengi güncellendi */}
-      <p className="text-xl text-gray-600 mb-8 text-center max-w-md"> {/* Metin rengi, margin ve max-width 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 */}
         {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 */}
diff --git a/ui/src/views/public/Payment.tsx b/ui/src/views/public/Payment.tsx
index 1a66d53..15299ef 100644
--- a/ui/src/views/public/Payment.tsx
+++ b/ui/src/views/public/Payment.tsx
@@ -107,7 +107,7 @@ const Payment: React.FC = () => {
 
   if (!tenant) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -116,7 +116,7 @@ const Payment: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'Public.nav.payment')}
diff --git a/ui/src/views/public/Products.tsx b/ui/src/views/public/Products.tsx
index ce80aa7..ce254e3 100644
--- a/ui/src/views/public/Products.tsx
+++ b/ui/src/views/public/Products.tsx
@@ -75,7 +75,7 @@ const Products: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::App.Orders')}
@@ -83,15 +83,7 @@ const Products: 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>
 
       <div className="container mx-auto px-4 pt-4">
         <BillingControls
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index b200eeb..1d50bcd 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -176,25 +176,25 @@ function buildServicesContent(
         cardStyleClass: resolveLocalizedValue(
           translate,
           `Public.services.dynamic.service.${index + 1}.cardStyleClass`,
-          'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow',
+          '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 mb-4',
+          '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 mb-6',
+          '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',
+          'flex items-center text-gray-700 dark:text-gray-300',
         ),
         features: (item.features ?? []).map((feature, featureIndex) => ({
           key:
@@ -229,7 +229,7 @@ function buildServicesContent(
         cardStyleClass: resolveLocalizedValue(
           translate,
           `Public.services.dynamic.support.${index + 1}.cardStyleClass`,
-          'bg-white rounded-xl shadow-lg p-8 border border-gray-200',
+          '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(
@@ -888,7 +888,7 @@ const Services: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -897,7 +897,7 @@ const Services: React.FC = () => {
   }
 
   return (
-    <div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
+    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::App.Services')}
@@ -921,15 +921,16 @@ const Services: React.FC = () => {
         isDesignMode={isDesignMode}
         onSelect={handleSelectBlock}
       >
-        <div className={content?.heroSectionStyleClass || 'relative bg-blue-900 text-white py-12'}>
+        <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
           <div
-            className="absolute inset-0 opacity-20"
+            className="absolute inset-0 opacity-20 dark:opacity-35"
             style={{
               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>
@@ -938,7 +939,7 @@ const Services: React.FC = () => {
       </SelectableBlock>
 
       {/* Services Grid */}
-      <div className="py-16">
+      <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) => {
@@ -951,17 +952,17 @@ const Services: React.FC = () => {
                     isDesignMode={isDesignMode}
                     onSelect={handleSelectBlock}
                   >
-                    <div className={service.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow'}>
+                    <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'}>{service.title}</h3>
-                      <p className={service.descriptionStyleClass || 'text-gray-600 mb-6'}>{service.description}</p>
+                      <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'}>
+                          <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>
@@ -976,7 +977,7 @@ const Services: React.FC = () => {
       </div>
 
       {/* Support Plans */}
-      <div className="bg-white py-10">
+      <div className="bg-white py-10 dark:bg-gray-900">
         <div className="container mx-auto px-4">
           <SelectableBlock
             id="support-heading"
@@ -984,7 +985,7 @@ const Services: React.FC = () => {
             isDesignMode={isDesignMode}
             onSelect={handleSelectBlock}
           >
-            <h2 className={content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'}>{content?.supportTitle}</h2>
+            <h2 className={`${content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'} dark:text-gray-100`}>{content?.supportTitle}</h2>
           </SelectableBlock>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {content?.supportItems.map((plan, index) => {
@@ -998,16 +999,16 @@ const Services: React.FC = () => {
                     isDesignMode={isDesignMode}
                     onSelect={handleSelectBlock}
                   >
-                    <div className={plan.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 border border-gray-200'}>
+                    <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'}>{plan.title}</h3>
+                      <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">
+                          <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>
diff --git a/ui/src/views/public/Success.tsx b/ui/src/views/public/Success.tsx
index 453a9ea..58a1ce2 100644
--- a/ui/src/views/public/Success.tsx
+++ b/ui/src/views/public/Success.tsx
@@ -30,7 +30,7 @@ const Success: React.FC = () => {
 
   if (!orderId) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <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>
@@ -39,7 +39,7 @@ const Success: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'App.Platform.Success')}
diff --git a/ui/src/views/public/designer/SelectableBlock.tsx b/ui/src/views/public/designer/SelectableBlock.tsx
index 76781b9..b4d93f1 100644
--- a/ui/src/views/public/designer/SelectableBlock.tsx
+++ b/ui/src/views/public/designer/SelectableBlock.tsx
@@ -26,8 +26,8 @@ const SelectableBlock: React.FC<SelectableBlockProps> = ({
       className={classNames(
         'relative rounded-xl transition-all cursor-pointer',
         isActive
-          ? 'ring-2 ring-sky-500 ring-offset-4 ring-offset-white'
-          : 'ring-1 ring-sky-200/80 hover:ring-sky-400',
+          ? '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) => {