From 08a2297a66e598f428caed006248b2280a2d5eb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Tue, 19 May 2026 23:22:25 +0300
Subject: [PATCH] =?UTF-8?q?Dark=20mod=20t=C3=BCm=20komponentlere=20eklendi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Seeds/LanguagesData.json                  |   6 +
 .../Queries/QueryManager.cs                   |   1 -
 .../Seeds/TenantData.json                     |   2 +-
 .../codeLayout/ComponentSelector.tsx          |   8 +-
 ui/src/components/codeLayout/PanelManager.tsx |  24 +--
 .../components/codeLayout/PropertyPanel.tsx   |  58 +++----
 ui/src/components/codeLayout/Splitter.tsx     |   8 +-
 ui/src/components/common/Widget.tsx           |  40 +++--
 .../componentEditor/ComponentPreview.tsx      |   6 +-
 .../componentEditor/DynamicRenderer.tsx       |   2 +-
 ui/src/components/ui/Widget/Widget.tsx        |  40 +++--
 .../views/admin/activityLog/ActivityLog.tsx   |  12 +-
 .../admin/activityLog/components/Log.tsx      |  11 +-
 .../activityLog/components/LogFilter.tsx      |   8 +-
 .../views/admin/auditLog/AuditLogDetail.tsx   | 108 ++++++------
 ui/src/views/admin/hr/OrgChart.tsx            |  28 ++--
 ui/src/views/admin/listForm/edit/FormEdit.tsx |   4 +-
 ui/src/views/admin/listForm/wizard/Wizard.tsx |   1 -
 .../admin/listForm/wizard/WizardStep1.tsx     |   8 +-
 .../admin/listForm/wizard/WizardStep3.tsx     |   6 +-
 .../admin/role-management/RolesPermission.tsx |   6 +-
 .../admin/user-management/UsersPermission.tsx |   6 +-
 ui/src/views/admin/videoroom/Dashboard.tsx    |  22 +--
 ui/src/views/admin/videoroom/RoomList.tsx     |  95 +++++------
 ui/src/views/auth/Login.tsx                   |   5 +-
 .../developerKit/ComponentCodeLayout.tsx      |  14 +-
 ui/src/views/developerKit/ComponentEditor.tsx |  74 +++++----
 .../views/developerKit/ComponentManager.tsx   |  36 ++--
 .../developerKit/CrudEndpointManager.tsx      | 112 ++++++-------
 .../developerKit/DynamicServiceEditor.tsx     | 155 ++++++++++++------
 .../developerKit/DynamicServiceManager.tsx    |  40 ++---
 .../views/developerKit/SqlObjectExplorer.tsx  |   4 +-
 ui/src/views/developerKit/SqlQueryManager.tsx |   2 +-
 ui/src/views/developerKit/SqlResultsGrid.tsx  |   2 +-
 .../developerKit/SqlTableDesignerDialog.tsx   |   2 +-
 ui/src/views/forum/Forum.tsx                  |   4 +-
 ui/src/views/forum/Management.tsx             |   4 +-
 ui/src/views/forum/admin/AdminView.tsx        |  12 +-
 .../views/forum/admin/CategoryManagement.tsx  |  50 +++---
 ui/src/views/forum/admin/Dashboard.tsx        |  10 +-
 ui/src/views/forum/admin/PostManagement.tsx   |  38 ++---
 ui/src/views/forum/admin/TopicManagement.tsx  |  52 +++---
 ui/src/views/forum/forum/CreatePostModal.tsx  |   8 +-
 ui/src/views/forum/forum/CreateTopicModal.tsx |  10 +-
 .../views/forum/forum/ForumCategoryCard.tsx   |  14 +-
 ui/src/views/forum/forum/ForumPostCard.tsx    |  16 +-
 ui/src/views/forum/forum/ForumTopicCard.tsx   |  18 +-
 ui/src/views/forum/forum/ForumView.tsx        |  34 ++--
 ui/src/views/forum/forum/SearchModal.tsx      |  50 +++---
 .../views/intranet/SocialWall/CreatePost.tsx  |  13 +-
 .../intranet/SocialWall/LocationPicker.tsx    |   8 +-
 ui/src/views/intranet/widgets/Surveys.tsx     |  52 +++---
 ui/src/views/menu/MenuItemComponent.tsx       |  50 +++---
 ui/src/views/menu/MenuManager.tsx             |  34 ++--
 ui/src/views/menu/SortableMenuTree.tsx        |  22 +--
 .../views/public/designer/DesignerDrawer.tsx  |  24 +--
 56 files changed, 782 insertions(+), 697 deletions(-)

diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index e35b670..9a804e6 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -18188,6 +18188,12 @@
             "en": "Data Source",
             "tr": "Veri Kaynağı"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.CrudEndpoints.DataSourceDescription",
+            "en": "Data source of the CRUD endpoints",
+            "tr": "CRUD endpointlerinin veri kaynağı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.CrudEndpoints.Loading",
diff --git a/api/src/Sozsoft.Platform.Domain/Queries/QueryManager.cs b/api/src/Sozsoft.Platform.Domain/Queries/QueryManager.cs
index b15cb16..4c8dca5 100644
--- a/api/src/Sozsoft.Platform.Domain/Queries/QueryManager.cs
+++ b/api/src/Sozsoft.Platform.Domain/Queries/QueryManager.cs
@@ -226,7 +226,6 @@ public class QueryManager : PlatformDomainService, IQueryManager
                     };
                 }
                 sql = $"DELETE FROM \"{listForm.SelectCommand}\" WHERE {where}";
-                Console.WriteLine(sql);
             }
         }
 
diff --git a/api/src/Sozsoft.Platform.EntityFrameworkCore/Seeds/TenantData.json b/api/src/Sozsoft.Platform.EntityFrameworkCore/Seeds/TenantData.json
index 07cfce9..f77fc50 100644
--- a/api/src/Sozsoft.Platform.EntityFrameworkCore/Seeds/TenantData.json
+++ b/api/src/Sozsoft.Platform.EntityFrameworkCore/Seeds/TenantData.json
@@ -349,7 +349,7 @@
     "CustomComponents": [
         {
             "name": "DynamicEntityComponent",
-            "code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n  title: string;\n}\n\nconst api = axios.create({\n  baseURL: \"https://localhost:44344\", // defaults'ı her seferinde set etme\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n  const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        const res = await api.get(`/api/app/crudendpoint/${title}`);\n        const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n        const filtered = raw.map((item: any) => ({\n          id: item.Id ?? item.id,\n          name: item.Name ?? item.name,\n        }));\n\n        setData(filtered);\n      } catch (err: any) {\n        setError(err.message || \"Failed to fetch data\");\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (title) fetchData();\n  }, [title]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div className=\"text-red-600\">Error: {error}</div>;\n  if (!data.length) return <div>No records found</div>;\n\n  const headers = [\"id\", \"name\", \"actions\"];\n\n  return (\n    <div className=\"overflow-auto\">\n      <table className=\"min-w-full bg-white border border-slate-200 shadow-sm rounded-lg\">\n        <thead className=\"bg-slate-100\">\n          <tr>\n            {headers.map((key) => (\n              <th\n                key={key}\n                className=\"text-left px-4 py-2 border-b border-slate-200 text-sm font-medium text-slate-700\"\n              >\n                {key === \"actions\" ? \"Actions\" : key}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((item, rowIndex) => (\n            <tr key={rowIndex} className=\"hover:bg-slate-50\">\n              <td className=\"px-4 py-2 border-b border-slate-100 text-sm text-slate-800\">\n                {item.id}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 text-sm text-slate-800\">\n                {item.name}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100\">\n                <button\n     type=\"button\"\n             onClick={() => alert(item.name)}\n                  className=\"bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1 rounded-lg shadow-sm transition\"\n                >\n                  Show Name\n                </button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n\nexport default DynamicEntityComponent;",
+            "code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n  title: string;\n}\n\nconst api = axios.create({\n  baseURL: \"https://localhost:44344\",\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n  const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        const res = await api.get(`/api/app/crudendpoint/${title}`);\n        const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n        const filtered = raw.map((item: any) => ({\n          id: item.Id ?? item.id,\n          name: item.Name ?? item.name,\n        }));\n\n        setData(filtered);\n      } catch (err: any) {\n        setError(err.message || \"Failed to fetch data\");\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (title) fetchData();\n  }, [title]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div className=\"text-red-600 dark:text-red-400\">Error: {error}</div>;\n  if (!data.length) return <div>No records found</div>;\n\n  const headers = [\"id\", \"name\", \"actions\"];\n\n  return (\n    <div className=\"overflow-auto\">\n      <table className=\"min-w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm rounded-lg\">\n        <thead className=\"bg-slate-100 dark:bg-slate-800\">\n          <tr>\n            {headers.map((key) => (\n              <th\n                key={key}\n                className=\"text-left px-4 py-2 border-b border-slate-200 dark:border-slate-700 text-sm font-medium text-slate-700 dark:text-slate-200\"\n              >\n                {key === \"actions\" ? \"Actions\" : key}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((item, rowIndex) => (\n            <tr key={rowIndex} className=\"hover:bg-slate-50 dark:hover:bg-slate-800\">\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n                {item.id}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n                {item.name}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800\">\n                <button\n                  type=\"button\"\n                  onClick={() => alert(item.name)}\n                  className=\"bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-900 text-white text-sm px-3 py-1 rounded-lg shadow-sm transition\"\n                >\n                  Show Name\n                </button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n\nexport default DynamicEntityComponent;",
             "props": null,
             "description": null,
             "isActive": true,
diff --git a/ui/src/components/codeLayout/ComponentSelector.tsx b/ui/src/components/codeLayout/ComponentSelector.tsx
index bb96056..434c876 100644
--- a/ui/src/components/codeLayout/ComponentSelector.tsx
+++ b/ui/src/components/codeLayout/ComponentSelector.tsx
@@ -16,16 +16,16 @@ const ComponentSelector: React.FC<ComponentSelectorProps> = ({
   onRefresh
 }) => {
   return (
-    <div className="p-4 bg-white border-b">
+    <div className="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
       <div className="flex items-center justify-between mb-2">
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-200">
           Select Component
         </label>
         <Button
           variant='solid'
           size="sm"
           onClick={onRefresh}
-          className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors"
+          className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white transition-colors"
           title="Refresh component list"
         >
           Refresh
@@ -34,7 +34,7 @@ const ComponentSelector: React.FC<ComponentSelectorProps> = ({
       <select
         value={selectedComponentId || ''}
         onChange={(e) => onSelectComponent(e.target.value || null)}
-        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
       >
         <option value="">No component selected</option>
         {components.map(component => (
diff --git a/ui/src/components/codeLayout/PanelManager.tsx b/ui/src/components/codeLayout/PanelManager.tsx
index 3cc0e2f..72d9a4f 100644
--- a/ui/src/components/codeLayout/PanelManager.tsx
+++ b/ui/src/components/codeLayout/PanelManager.tsx
@@ -31,33 +31,33 @@ export const PanelManager: React.FC<PanelManagerProps> = ({
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
-      <div className="bg-white rounded-lg shadow-xl w-96 max-w-full mx-4">
-        <div className="flex items-center justify-between p-4 border-b border-gray-200">
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl w-96 max-w-full mx-4">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center space-x-2">
-            <FaBars className="w-5 h-5 text-blue-600" />
-            <h2 className="text-base font-semibold text-gray-900">Panel Manager</h2>
+            <FaBars className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+            <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Panel Manager</h2>
           </div>
           <button
             onClick={onClose}
-            className="p-1 hover:bg-gray-100 rounded transition-colors"
+            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
             title="Kapat"
           >
-            <FaTimes className="w-5 h-5 text-gray-500" />
+            <FaTimes className="w-5 h-5 text-gray-500 dark:text-gray-400" />
           </button>
         </div>
         <div className="p-4">
-          <p className="text-sm text-gray-600 mb-4">Customize Workspace</p>
+          <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">Customize Workspace</p>
           <div className="space-y-3">
-            <h3 className="text-sm font-medium text-gray-900">Panels</h3>
+            <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">Panels</h3>
             {paneller.map(({ key, label, icon: Icon }) => (
-              <div key={key} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div key={key} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                 <div className="flex items-center space-x-3">
-                  <Icon className="w-4 h-4 text-gray-600" />
-                  <span className="text-sm font-medium text-gray-700">{label}</span>
+                  <Icon className="w-4 h-4 text-gray-600 dark:text-gray-300" />
+                  <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{label}</span>
                 </div>
                 <button
                   onClick={() => onPanelToggle(key)}
-                  className={`p-1 rounded transition-colors ${panelState[key] ? "text-blue-600 hover:bg-blue-100" : "text-gray-400 hover:bg-gray-200"}`}
+                  className={`p-1 rounded transition-colors ${panelState[key] ? "text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900" : "text-gray-400 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                   title={panelState[key] ? "Hide" : "Show"}
                 >
                   {panelState[key] ? <FaEye className="w-4 h-4" /> : <FaEyeSlash className="w-4 h-4" />}
diff --git a/ui/src/components/codeLayout/PropertyPanel.tsx b/ui/src/components/codeLayout/PropertyPanel.tsx
index 84a620e..811f693 100644
--- a/ui/src/components/codeLayout/PropertyPanel.tsx
+++ b/ui/src/components/codeLayout/PropertyPanel.tsx
@@ -228,10 +228,10 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
     }
     return (
       <div key={property.name} className="mb-4">
-        <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-200 mb-2">
           {property.name}
           {property.description && (
-            <span className="text-gray-500 text-xs ml-1">
+            <span className="text-gray-500 dark:text-gray-400 text-xs ml-1">
               ({property.description})
             </span>
           )}
@@ -251,7 +251,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                 }
                 className="mr-2"
               />
-              <span className="text-sm text-gray-600">{property.name}</span>
+              <span className="text-sm text-gray-600 dark:text-gray-300">{property.name}</span>
             </label>
           )}
 
@@ -261,7 +261,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
               onChange={(e) =>
                 handleLocalPropertyChange(property.name, e.target.value)
               }
-              className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
             >
               <option value="">Select {property.name}</option>
               {property.options.map((option) => (
@@ -280,13 +280,13 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                 onChange={(e) =>
                   handleLocalPropertyChange(property.name, e.target.value)
                 }
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                 placeholder={`Enter ${property.name}`}
               />
               {isTailwindProperty && (
                 <button
                   onClick={() => openTailwindModal(property.name)}
-                  className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm"
+                  className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white transition-colors text-sm"
                   title="Select Tailwind Classes"
                 >
                   TW
@@ -299,7 +299,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                   onChange={(e) =>
                     handleLocalPropertyChange(property.name, e.target.value)
                   }
-                  className="w-10 h-10 border border-gray-300 rounded-md"
+                  className="w-10 h-10 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800"
                 />
               )}
             </>
@@ -313,13 +313,13 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                 onChange={(e) =>
                   handleLocalPropertyChange(property.name, e.target.value)
                 }
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                 placeholder={`Enter ${property.name}`}
               />
               {isTailwindProperty && (
                 <button
                   onClick={() => openTailwindModal(property.name)}
-                  className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm"
+                  className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white transition-colors text-sm"
                   title="Select Tailwind Classes"
                 >
                   TW
@@ -332,7 +332,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                   onChange={(e) =>
                     handleLocalPropertyChange(property.name, e.target.value)
                   }
-                  className="w-10 h-10 border border-gray-300 rounded-md"
+                  className="w-10 h-10 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800"
                 />
               )}
             </>
@@ -345,14 +345,14 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
               onChange={(e) =>
                 handleLocalPropertyChange(property.name, Number(e.target.value))
               }
-              className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
             />
           )}
 
           {property.type === "array" && (
             <>
               <textarea
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md font-mono text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md font-mono text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                 rows={Math.max(3, arrayInputValue.split('\n').length)}
                 value={arrayInputValue}
                 onChange={(e) => {
@@ -406,11 +406,11 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
 
   if (!selectedComponent) {
     return (
-      <div className="h-full bg-gray-50 p-4">
-        <div className="text-center text-gray-500 mt-8">
+      <div className="h-full bg-gray-50 dark:bg-gray-900 p-4">
+        <div className="text-center text-gray-500 dark:text-gray-400 mt-8">
           <div className="text-4xl mb-4">🎯</div>
-          <h3 className="text-lg font-medium mb-2">No Component Selected</h3>
-          <p className="text-sm">
+          <h3 className="text-lg font-medium mb-2 text-gray-700 dark:text-gray-200">No Component Selected</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             Select a component from the editor to edit its properties
           </p>
         </div>
@@ -480,7 +480,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
   return (
     <div className="w-full text-white flex flex-col h-full">
       {/* Header */}
-      <div className="border-b bg-gray-50 flex items-center justify-between">
+      <div className="border-b bg-gray-50 dark:bg-gray-900 flex items-center justify-between dark:border-gray-700">
         <div>
           {(hasChanges || hasHookChanges) && (
             <p className="text-sm text-orange-600 mt-1">
@@ -488,22 +488,22 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
             </p>
           )}
           {/* Tabs */}
-          <div className="flex gap-2 mt-4">
+          <div className="flex gap-2 p-1">
             <button
-              className={`px-3 py-1 rounded-t-md font-medium border-b-2 transition-colors ${
+              className={`px-3 py-1  font-medium border-b-2 transition-colors ${
                 activeTab === "props"
-                  ? "border-blue-500 text-blue-700 bg-white"
-                  : "border-transparent text-gray-500 bg-gray-100"
+                  ? "border-blue-500 text-blue-700 bg-white dark:bg-gray-900 dark:text-blue-400 dark:border-blue-400"
+                  : "border-transparent text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-transparent"
               }`}
               onClick={() => setActiveTab("props")}
             >
               Properties
             </button>
             <button
-              className={`px-3 py-1 rounded-t-md font-medium border-b-2 transition-colors ${
+              className={`px-3 py-1 font-medium border-b-2 transition-colors ${
                 activeTab === "hooks"
-                  ? "border-blue-500 text-blue-700 bg-white"
-                  : "border-transparent text-gray-500 bg-gray-100"
+                  ? "border-blue-500 text-blue-700 bg-white dark:bg-gray-900 dark:text-blue-400 dark:border-blue-400"
+                  : "border-transparent text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-transparent"
               }`}
               onClick={() => setActiveTab("hooks")}
             >
@@ -515,7 +515,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
         <Button
           variant="solid"
           size="sm"
-          className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 transition-colors text-sm"
+          className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 dark:text-white transition-colors text-sm"
           onClick={() => {
             if (selectedComponent) {
               if (
@@ -578,8 +578,8 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
 
       {/* Content */}
       {activeTab === "props" && (
-        <div className="flex-1 text-black overflow-y-auto p-4 max-h-[calc(100vh-200px)]">
-          <h3 className="text-md font-medium text-gray-800 mb-4">Properties</h3>
+        <div className="flex-1 text-black dark:text-gray-200 overflow-y-auto p-4 max-h-[calc(100vh-200px)] bg-white dark:bg-gray-900">
+          <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-4">Properties</h3>
           {/* Properties */}
           {properties.length > 0 && (
             <div>{properties.map(renderPropertyControl)}</div>
@@ -587,7 +587,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
           {/* Events */}
           {events.length > 0 && (
             <div>
-              <h3 className="text-md font-medium text-gray-800 mb-4 mt-6">
+              <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-4 mt-6">
                 Events
               </h3>
               {events.map(renderPropertyControl)}
@@ -596,7 +596,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
           {/* Styling */}
           {styling.length > 0 && (
             <div>
-              <h3 className="text-md font-medium text-gray-800 mb-4 mt-6">
+              <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-4 mt-6">
                 Styling
               </h3>
               {styling.map(renderPropertyControl)}
diff --git a/ui/src/components/codeLayout/Splitter.tsx b/ui/src/components/codeLayout/Splitter.tsx
index ae311b2..1167687 100644
--- a/ui/src/components/codeLayout/Splitter.tsx
+++ b/ui/src/components/codeLayout/Splitter.tsx
@@ -88,8 +88,8 @@ export const Splitter: React.FC<SplitterProps> = ({
               ${
                 isHorizontal ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize"
               }
-              bg-gray-300 hover:bg-blue-500 transition-colors duration-200 flex-shrink-0
-              ${isDragging ? "bg-blue-500" : ""}
+              bg-gray-300 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200 flex-shrink-0
+              ${isDragging ? "bg-blue-500 dark:bg-blue-600" : ""}
             `}
             onMouseDown={handleMouseDown}
           />
@@ -124,8 +124,8 @@ export const Splitter: React.FC<SplitterProps> = ({
               ${
                 isHorizontal ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize"
               }
-              bg-gray-300 hover:bg-blue-500 transition-colors duration-200 flex-shrink-0
-              ${isDragging ? "bg-blue-500" : ""}
+              bg-gray-300 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200 flex-shrink-0
+              ${isDragging ? "bg-blue-500 dark:bg-blue-600" : ""}
             `}
             onMouseDown={handleMouseDown}
           />
diff --git a/ui/src/components/common/Widget.tsx b/ui/src/components/common/Widget.tsx
index 67e8d96..03e4a81 100644
--- a/ui/src/components/common/Widget.tsx
+++ b/ui/src/components/common/Widget.tsx
@@ -51,17 +51,17 @@ export default function Widget({
     };
   }, [icon]);
 
-  const colorMap: Record<string, { bg: string; text: string }> = {
-    blue: { bg: "from-blue-100 to-blue-200", text: "text-blue-600" },
-    green: { bg: "from-green-100 to-green-200", text: "text-green-600" },
-    purple: { bg: "from-purple-100 to-purple-200", text: "text-purple-600" },
-    gray: { bg: "from-gray-100 to-gray-200", text: "text-gray-600" },
-    red: { bg: "from-red-100 to-red-200", text: "text-red-600" },
-    yellow: { bg: "from-yellow-100 to-yellow-200", text: "text-yellow-600" },
-    pink: { bg: "from-pink-100 to-pink-200", text: "text-pink-600" },
-    indigo: { bg: "from-indigo-100 to-indigo-200", text: "text-indigo-600" },
-    teal: { bg: "from-teal-100 to-teal-200", text: "text-teal-600" },
-    orange: { bg: "from-orange-100 to-orange-200", text: "text-orange-600" },
+  const colorMap: Record<string, { bg: string; text: string; darkBg: string; darkText: string }> = {
+    blue:   { bg: 'from-blue-100 to-blue-200',   text: 'text-blue-600',   darkBg: 'from-blue-900 to-blue-800',   darkText: 'text-blue-300' },
+    green:  { bg: 'from-green-100 to-green-200', text: 'text-green-600',  darkBg: 'from-green-900 to-green-800', darkText: 'text-green-300' },
+    purple: { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600', darkBg: 'from-purple-900 to-purple-800', darkText: 'text-purple-300' },
+    gray:   { bg: 'from-gray-100 to-gray-200',   text: 'text-gray-600',   darkBg: 'from-gray-800 to-gray-700',   darkText: 'text-gray-300' },
+    red:    { bg: 'from-red-100 to-red-200',     text: 'text-red-600',    darkBg: 'from-red-900 to-red-800',     darkText: 'text-red-300' },
+    yellow: { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600', darkBg: 'from-yellow-900 to-yellow-800', darkText: 'text-yellow-300' },
+    pink:   { bg: 'from-pink-100 to-pink-200',   text: 'text-pink-600',   darkBg: 'from-pink-900 to-pink-800',   darkText: 'text-pink-300' },
+    indigo: { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600', darkBg: 'from-indigo-900 to-indigo-800', darkText: 'text-indigo-300' },
+    teal:   { bg: 'from-teal-100 to-teal-200',   text: 'text-teal-600',   darkBg: 'from-teal-900 to-teal-800',   darkText: 'text-teal-300' },
+    orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600', darkBg: 'from-orange-900 to-orange-800', darkText: 'text-orange-300' },
   };
 
   const safeColor = color && colorMap[color] ? color : "green";
@@ -70,28 +70,32 @@ export default function Widget({
     <div
       onClick={onClick}
       className={classNames(
-        "bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex flex-col justify-between",
-        onClick && "cursor-pointer hover:bg-gray-50",
+        'bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 flex flex-col justify-between',
+        onClick && 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800',
         className
       )}
     >
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm font-semibold text-gray-600 tracking-wide">
+          <p className="text-sm font-semibold text-gray-600 dark:text-gray-300 tracking-wide">
             {title}
           </p>
           <p
-            className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}
+            className={classNames(valueClassName, 'font-bold mt-1', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)}
           >
             {value}
           </p>
-          <p className="text-sm text-gray-500 mt-1">{subTitle}</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{subTitle}</p>
         </div>
         <div
-          className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
+          className={classNames(
+            'w-12 h-12 bg-gradient-to-br rounded-xl flex items-center justify-center shadow-sm',
+            colorMap[safeColor].bg,
+            'dark:' + colorMap[safeColor].darkBg
+          )}
         >
           {IconComponent ? (
-            <IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
+            <IconComponent className={classNames('w-6 h-6', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)} />
           ) : null}
         </div>
       </div>
diff --git a/ui/src/components/componentEditor/ComponentPreview.tsx b/ui/src/components/componentEditor/ComponentPreview.tsx
index c006121..61c606a 100644
--- a/ui/src/components/componentEditor/ComponentPreview.tsx
+++ b/ui/src/components/componentEditor/ComponentPreview.tsx
@@ -12,13 +12,13 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, clas
   const { components, loading } = useComponents()
 
   if (!componentName) {
-    return <div className="text-sm text-gray-500">Bileşen ismi yok.</div>
+    return <div className="text-sm text-gray-500 dark:text-gray-400">Bileşen ismi yok.</div>
   }
 
   // components dizisinin varlığını kontrol et
   if (loading || !components || !Array.isArray(components)) {
     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-900">
         <div className="text-center">
           <Loading loading={true} />
         </div>
@@ -47,7 +47,7 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, clas
   }
 
   return (
-    <div className={`bg-white ${className}`}>
+    <div className={`bg-white dark:bg-gray-900 ${className}`}>
       <DynamicRenderer componentName={componentName} dependencies={dependencies} />
     </div>
   )
diff --git a/ui/src/components/componentEditor/DynamicRenderer.tsx b/ui/src/components/componentEditor/DynamicRenderer.tsx
index e56272e..26387d5 100644
--- a/ui/src/components/componentEditor/DynamicRenderer.tsx
+++ b/ui/src/components/componentEditor/DynamicRenderer.tsx
@@ -193,7 +193,7 @@ const DynamicRenderer: React.FC<DynamicRendererProps> = ({
 
   if (!Component)
     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-900">
         <div className="text-center">
           <Loading loading={!Component} />
         </div>
diff --git a/ui/src/components/ui/Widget/Widget.tsx b/ui/src/components/ui/Widget/Widget.tsx
index 9db29fb..da09e9c 100644
--- a/ui/src/components/ui/Widget/Widget.tsx
+++ b/ui/src/components/ui/Widget/Widget.tsx
@@ -51,17 +51,17 @@ export default function Widget({
     }
   }, [icon])
 
-  const colorMap: Record<string, { bg: string; text: string }> = {
-    blue: { bg: 'from-blue-100 to-blue-200', text: 'text-blue-600' },
-    green: { bg: 'from-green-100 to-green-200', text: 'text-green-600' },
-    purple: { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600' },
-    gray: { bg: 'from-gray-100 to-gray-200', text: 'text-gray-600' },
-    red: { bg: 'from-red-100 to-red-200', text: 'text-red-600' },
-    yellow: { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600' },
-    pink: { bg: 'from-pink-100 to-pink-200', text: 'text-pink-600' },
-    indigo: { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600' },
-    teal: { bg: 'from-teal-100 to-teal-200', text: 'text-teal-600' },
-    orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600' },
+  const colorMap: Record<string, { bg: string; text: string; darkBg: string; darkText: string }> = {
+    blue:   { bg: 'from-blue-100 to-blue-200',   text: 'text-blue-600',   darkBg: 'from-blue-900 to-blue-800',   darkText: 'text-blue-300' },
+    green:  { bg: 'from-green-100 to-green-200', text: 'text-green-600',  darkBg: 'from-green-900 to-green-800', darkText: 'text-green-300' },
+    purple: { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600', darkBg: 'from-purple-900 to-purple-800', darkText: 'text-purple-300' },
+    gray:   { bg: 'from-gray-100 to-gray-200',   text: 'text-gray-600',   darkBg: 'from-gray-800 to-gray-700',   darkText: 'text-gray-300' },
+    red:    { bg: 'from-red-100 to-red-200',     text: 'text-red-600',    darkBg: 'from-red-900 to-red-800',     darkText: 'text-red-300' },
+    yellow: { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600', darkBg: 'from-yellow-900 to-yellow-800', darkText: 'text-yellow-300' },
+    pink:   { bg: 'from-pink-100 to-pink-200',   text: 'text-pink-600',   darkBg: 'from-pink-900 to-pink-800',   darkText: 'text-pink-300' },
+    indigo: { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600', darkBg: 'from-indigo-900 to-indigo-800', darkText: 'text-indigo-300' },
+    teal:   { bg: 'from-teal-100 to-teal-200',   text: 'text-teal-600',   darkBg: 'from-teal-900 to-teal-800',   darkText: 'text-teal-300' },
+    orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600', darkBg: 'from-orange-900 to-orange-800', darkText: 'text-orange-300' },
   }
 
   const safeColor = color && colorMap[color] ? color : 'green'
@@ -70,22 +70,26 @@ export default function Widget({
     <div
       onClick={onClick}
       className={classNames(
-        'bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex flex-col justify-between',
-        onClick && 'cursor-pointer hover:bg-gray-50',
+        'bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 flex flex-col justify-between',
+        onClick && 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800',
         className,
       )}
     >
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm font-semibold text-gray-600">{title}</p>
-          <p className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}>{value}</p>
-          <p className="text-sm text-gray-500 mt-1">{subTitle}</p>
+          <p className="text-sm font-semibold text-gray-600 dark:text-gray-300">{title}</p>
+          <p className={classNames(valueClassName, 'font-bold mt-1', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)}>{value}</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{subTitle}</p>
         </div>
         <div
-          className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
+          className={classNames(
+            'w-12 h-12 bg-gradient-to-br rounded-xl flex items-center justify-center shadow-sm',
+            colorMap[safeColor].bg,
+            'dark:' + colorMap[safeColor].darkBg
+          )}
         >
           {IconComponent ? (
-            <IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
+            <IconComponent className={classNames('w-6 h-6', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)} />
           ) : null}
         </div>
       </div>
diff --git a/ui/src/views/admin/activityLog/ActivityLog.tsx b/ui/src/views/admin/activityLog/ActivityLog.tsx
index 4946711..f8437dd 100644
--- a/ui/src/views/admin/activityLog/ActivityLog.tsx
+++ b/ui/src/views/admin/activityLog/ActivityLog.tsx
@@ -90,14 +90,14 @@ const ActivityLog = () => {
         defaultTitle={APP_NAME}
       ></Helmet>
 
-      <AdaptableCard className="overflow-hidden">
+      <AdaptableCard className="overflow-hidden bg-white dark:bg-gray-800">
         <div className="w-full">
           <div className="mb-5 flex items-center justify-between gap-3">
-            <h3 className="text-xl font-semibold md:text-2xl">
+            <h3 className="text-xl font-semibold md:text-2xl text-gray-900 dark:text-white">
               {translate('::Abp.Identity.ActivityLogs')}
             </h3>
             <Button
-              className="lg:hidden"
+              className="lg:hidden dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
               size="sm"
               variant="twoTone"
               onClick={() => setIsFilterDrawerOpen(true)}
@@ -107,7 +107,7 @@ const ActivityLog = () => {
           </div>
 
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
-            <div className="min-w-0 rounded-xl border border-gray-200 bg-white p-4 lg:p-6">
+            <div className="min-w-0 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 lg:p-6">
               <Log
                 notifications={notifications}
                 isLoading={loading}
@@ -117,7 +117,7 @@ const ActivityLog = () => {
             </div>
 
             <div className="hidden lg:block">
-              <LogFilter filter={filter} onFilterChange={handleFilterChange} useAffix />
+              <LogFilter filter={filter} onFilterChange={handleFilterChange} useAffix className="dark:bg-gray-800" />
             </div>
           </div>
         </div>
@@ -134,7 +134,7 @@ const ActivityLog = () => {
             filter={filter}
             onFilterChange={handleFilterChange}
             useAffix={false}
-            className="border-none p-0"
+            className="border-none p-0 dark:bg-gray-800"
           />
         </Drawer>
       </AdaptableCard>
diff --git a/ui/src/views/admin/activityLog/components/Log.tsx b/ui/src/views/admin/activityLog/components/Log.tsx
index 56a888b..f3de4f9 100644
--- a/ui/src/views/admin/activityLog/components/Log.tsx
+++ b/ui/src/views/admin/activityLog/components/Log.tsx
@@ -31,12 +31,12 @@ const Log = ({
       <div className="w-full">
         {keys(notifications).map((group) => (
           <div key={group} className="mb-8">
-            <div className="mb-4 font-semibold uppercase">
+            <div className="mb-4 font-semibold uppercase text-gray-700 dark:text-gray-300">
               {dayjs(group).locale(currentLocale).format('LL')}
             </div>
-            <Timeline>
+            <Timeline className="dark:bg-gray-800">
               {isEmpty(notifications[group]) ? (
-                <Timeline.Item>Bildirim yok</Timeline.Item>
+                <Timeline.Item className="dark:text-gray-400">Bildirim yok</Timeline.Item>
               ) : (
                 notifications[group].map((notification, i) => (
                   <Timeline.Item
@@ -46,6 +46,7 @@ const Log = ({
                         userImg={AVATAR_URL(notification.creatorId, notification.tenantId)}
                       />
                     }
+                    className="dark:bg-gray-800"
                   >
                     <Event data={notification} compact={false} />
                   </Timeline.Item>
@@ -56,11 +57,11 @@ const Log = ({
         ))}
         <div className="text-center">
           {loadable ? (
-            <Button loading={isLoading} onClick={onLoadMore}>
+            <Button loading={isLoading} onClick={onLoadMore} className="dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
               {translate('::Abp.Identity.ActivityLogs.LoadMore')}
             </Button>
           ) : (
-            translate('::Abp.Identity.ActivityLogs.ReceivedAllNotifications')
+            <span className="dark:text-gray-400">{translate('::Abp.Identity.ActivityLogs.ReceivedAllNotifications')}</span>
           )}
         </div>
       </div>
diff --git a/ui/src/views/admin/activityLog/components/LogFilter.tsx b/ui/src/views/admin/activityLog/components/LogFilter.tsx
index 31aa21f..ff950f9 100644
--- a/ui/src/views/admin/activityLog/components/LogFilter.tsx
+++ b/ui/src/views/admin/activityLog/components/LogFilter.tsx
@@ -44,8 +44,8 @@ const LogFilter = ({
   const { translate } = useLocalization()
 
   const content = (
-    <div className={classNames('rounded-xl border border-gray-200 bg-white p-4', className)}>
-      <h5 className="mb-4 text-base font-semibold">{translate('::Abp.Identity.ActivityLogs.Filters')}</h5>
+    <div className={classNames('rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4', className)}>
+      <h5 className="mb-4 text-base font-semibold text-gray-900 dark:text-white">{translate('::Abp.Identity.ActivityLogs.Filters')}</h5>
       <Checkbox.Group
         vertical
         value={filter}
@@ -53,11 +53,11 @@ const LogFilter = ({
           onFilterChange(value as string[])
         }}
       >
-        <CategoryTitle className="mb-3 text-gray-500">
+        <CategoryTitle className="mb-3 text-gray-500 dark:text-gray-400">
           {translate('::Abp.Identity.ActivityLogs.Channels')}
         </CategoryTitle>
         {ticketCheckboxes.map((checkbox) => (
-          <Checkbox key={checkbox.value} className="mb-3" value={checkbox.value}>
+          <Checkbox key={checkbox.value} className="mb-3 dark:text-white" value={checkbox.value}>
             {checkbox.label}
           </Checkbox>
         ))}
diff --git a/ui/src/views/admin/auditLog/AuditLogDetail.tsx b/ui/src/views/admin/auditLog/AuditLogDetail.tsx
index eb8a10b..bc3f49b 100644
--- a/ui/src/views/admin/auditLog/AuditLogDetail.tsx
+++ b/ui/src/views/admin/auditLog/AuditLogDetail.tsx
@@ -86,16 +86,16 @@ function AuditLogs({
   return (
     <Dialog width="90%" isOpen={open} onClose={onDialogClose} onRequestClose={onDialogClose}>
       {/* Header */}
-      <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
+      <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-200 dark:border-gray-700">
         <div>
-          <h4 className="text-xl font-bold text-gray-800">Audit Log Details</h4>
-          {selectedLog?.id && <p className="text-sm text-gray-500 mt-1">ID: {selectedLog.id}</p>}
+          <h4 className="text-xl font-bold text-gray-800 dark:text-gray-100">Audit Log Details</h4>
+          {selectedLog?.id && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">ID: {selectedLog.id}</p>}
         </div>
         {selectedLog?.httpStatusCode && (
           <div className="flex items-center gap-2">
             {getStatusBadge(selectedLog.httpStatusCode)}
             <Badge
-              className="border border-gray-300 bg-white text-gray-700"
+              className="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"
               content={selectedLog.applicationName}
             ></Badge>
           </div>
@@ -108,32 +108,32 @@ function AuditLogs({
         </div>
       ) : !selectedLog ? (
         <div className="text-center py-16">
-          <FaExclamationCircle className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-          <p className="text-gray-500">No audit log found</p>
+          <FaExclamationCircle className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
+          <p className="text-gray-500 dark:text-gray-400">No audit log found</p>
         </div>
       ) : (
         <Tabs defaultValue="log" variant="pill">
-          <TabList className="mb-6 bg-gray-50 p-1 rounded-lg">
+          <TabList className="mb-6 bg-gray-50 dark:bg-gray-800 p-1 rounded-lg">
             <TabNav value="log">
               <FaRegFileAlt className="w-4 h-4 mr-2" />
-              Overview
+              <span className="text-gray-700 dark:text-gray-200">Overview</span>
             </TabNav>
             <TabNav value="actions">
               <FaCode className="w-4 h-4 mr-2" />
-              Actions
+              <span className="text-gray-700 dark:text-gray-200">Actions</span>
               {selectedLog.actions?.length > 0 && (
                 <Badge
-                  className="ml-2 bg-blue-500"
+                  className="ml-2 bg-blue-500 dark:bg-blue-700"
                   content={`${selectedLog.actions.length}`}
                 ></Badge>
               )}
             </TabNav>
             <TabNav value="changes">
               <FaRegCheckCircle className="w-4 h-4 mr-2" />
-              Entity Changes
+              <span className="text-gray-700 dark:text-gray-200">Entity Changes</span>
               {selectedLog.entityChanges?.length > 0 && (
                 <Badge
-                  className="ml-2 bg-purple-500"
+                  className="ml-2 bg-purple-500 dark:bg-purple-700"
                   content={`${selectedLog.entityChanges.length}`}
                 ></Badge>
               )}
@@ -144,9 +144,9 @@ function AuditLogs({
           <TabContent value="log">
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               {/* Request Information */}
-              <AdaptableCard className="shadow-sm">
-                <h6 className="font-semibold text-gray-700 mb-4 flex items-center gap-2">
-                  <FaGlobe className="w-5 h-5 text-blue-500" />
+              <AdaptableCard className="shadow-sm dark:bg-gray-900 dark:border-gray-700">
+                <h6 className="font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
+                  <FaGlobe className="w-5 h-5 text-blue-500 dark:text-blue-400" />
                   Request Information
                 </h6>
                 <div className="space-y-1">
@@ -154,7 +154,7 @@ function AuditLogs({
                     icon={FaUser}
                     label="User"
                     value={selectedLog.userName || 'Anonymous'}
-                    valueClassName="font-medium text-gray-800"
+                    valueClassName="font-medium text-gray-800 dark:text-gray-100"
                   />
                   <InfoRow
                     icon={FaRegClock}
@@ -187,9 +187,9 @@ function AuditLogs({
               </AdaptableCard>
 
               {/* HTTP Details */}
-              <AdaptableCard className="shadow-sm">
-                <h6 className="font-semibold text-gray-700 mb-4 flex items-center gap-2">
-                  <FaCode className="w-5 h-5 text-green-500" />
+              <AdaptableCard className="shadow-sm dark:bg-gray-900 dark:border-gray-700">
+                <h6 className="font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
+                  <FaCode className="w-5 h-5 text-green-500 dark:text-green-400" />
                   HTTP Details
                 </h6>
                 <div className="space-y-1">
@@ -222,13 +222,13 @@ function AuditLogs({
                     icon={FaGlobe}
                     label="URL"
                     value={selectedLog.url}
-                    valueClassName="text-blue-600 font-mono text-xs"
+                    valueClassName="text-blue-600 dark:text-blue-400 font-mono text-xs"
                   />
                   <InfoRow
                     icon={FaRegFileAlt}
                     label="Browser"
                     value={
-                      <span className="text-xs text-gray-600 line-clamp-2">
+                      <span className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2">
                         {selectedLog.browserInfo || 'Unknown'}
                       </span>
                     }
@@ -238,12 +238,12 @@ function AuditLogs({
 
               {/* Exceptions (Full Width) */}
               {selectedLog.exceptions && (
-                <AdaptableCard className="lg:col-span-2 shadow-sm border-l-4 border-red-500">
-                  <h6 className="font-semibold text-red-600 mb-3 flex items-center gap-2">
+                <AdaptableCard className="lg:col-span-2 shadow-sm border-l-4 border-red-500 dark:bg-gray-900 dark:border-gray-700">
+                  <h6 className="font-semibold text-red-600 dark:text-red-400 mb-3 flex items-center gap-2">
                     <FaExclamationCircle className="w-5 h-5" />
                     Exceptions
                   </h6>
-                  <pre className="bg-red-50 text-red-700 p-4 rounded-lg text-xs whitespace-pre-wrap leading-relaxed font-mono overflow-x-auto">
+                  <pre className="bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300 p-4 rounded-lg text-xs whitespace-pre-wrap leading-relaxed font-mono overflow-x-auto">
                     {selectedLog.exceptions}
                   </pre>
                 </AdaptableCard>
@@ -251,12 +251,12 @@ function AuditLogs({
 
               {/* Comments */}
               {selectedLog.comments && (
-                <AdaptableCard className="lg:col-span-2 shadow-sm bg-blue-50">
-                  <h6 className="font-semibold text-blue-700 mb-2 flex items-center gap-2">
+                <AdaptableCard className="lg:col-span-2 shadow-sm bg-blue-50 dark:bg-blue-950 dark:border-gray-700">
+                  <h6 className="font-semibold text-blue-700 dark:text-blue-300 mb-2 flex items-center gap-2">
                     <FaRegFileAlt className="w-5 h-5" />
                     Comments
                   </h6>
-                  <p className="text-sm text-blue-800">{selectedLog.comments}</p>
+                  <p className="text-sm text-blue-800 dark:text-blue-200">{selectedLog.comments}</p>
                 </AdaptableCard>
               )}
             </div>
@@ -266,37 +266,37 @@ function AuditLogs({
           <TabContent value="actions">
             {!selectedLog.actions || selectedLog.actions.length === 0 ? (
               <div className="text-center py-16">
-                <FaCode className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-                <p className="text-gray-500">No actions recorded</p>
+                <FaCode className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400">No actions recorded</p>
               </div>
             ) : (
               <div className="space-y-4">
                 {selectedLog.actions.map((action, index) => (
                   <AdaptableCard
                     key={index}
-                    className="shadow-sm hover:shadow-md transition-shadow"
+                    className="shadow-sm hover:shadow-md transition-shadow dark:bg-gray-900 dark:border-gray-700"
                   >
                     <div className="flex items-start justify-between mb-4">
-                      <h6 className="font-semibold text-gray-700 flex items-center gap-2">
-                        <Badge className="bg-indigo-500" content={`#${index + 1}`}></Badge>
+                      <h6 className="font-semibold text-gray-700 dark:text-gray-200 flex items-center gap-2">
+                        <Badge className="bg-indigo-500 dark:bg-indigo-700" content={`#${index + 1}`}></Badge>
                         <span className="text-sm">{action.methodName}</span>
                       </h6>
                       <Badge
-                        className="border border-gray-300 bg-white text-gray-700 text-xs"
+                        className="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-xs"
                         content={formatDuration(action.executionDuration)}
                       ></Badge>
                     </div>
 
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                       <div>
-                        <p className="text-xs text-gray-500 mb-1">Service Name</p>
-                        <p className="text-sm font-mono text-gray-700 break-all">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Service Name</p>
+                        <p className="text-sm font-mono text-gray-700 dark:text-gray-200 break-all">
                           {action.serviceName}
                         </p>
                       </div>
                       <div>
-                        <p className="text-xs text-gray-500 mb-1">Execution Time</p>
-                        <p className="text-sm text-gray-700">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Execution Time</p>
+                        <p className="text-sm text-gray-700 dark:text-gray-200">
                           {new Date(action.executionTime).toLocaleString('tr-TR')}
                         </p>
                       </div>
@@ -304,8 +304,8 @@ function AuditLogs({
 
                     {action.parameters && (
                       <div>
-                        <p className="text-xs text-gray-500 mb-2">Parameters</p>
-                        <pre className="bg-gray-50 border border-gray-200 p-3 rounded-lg text-xs overflow-x-auto">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Parameters</p>
+                        <pre className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-3 rounded-lg text-xs overflow-x-auto text-gray-700 dark:text-gray-200">
                           {JSON.stringify(JSON.parse(action.parameters), null, 2)}
                         </pre>
                       </div>
@@ -320,29 +320,29 @@ function AuditLogs({
           <TabContent value="changes">
             {!selectedLog.entityChanges || selectedLog.entityChanges.length === 0 ? (
               <div className="text-center py-16">
-                <FaRegCheckCircle className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-                <p className="text-gray-500">No entity changes recorded</p>
+                <FaRegCheckCircle className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400">No entity changes recorded</p>
               </div>
             ) : (
               <div className="space-y-4">
                 {selectedLog.entityChanges.map((change, index) => (
                   <AdaptableCard
                     key={index}
-                    className="shadow-sm hover:shadow-md transition-shadow"
+                    className="shadow-sm hover:shadow-md transition-shadow dark:bg-gray-900 dark:border-gray-700"
                   >
                     <div className="flex items-start justify-between mb-4">
                       <div className="flex items-center gap-3">
-                        <Badge className="bg-purple-500" content={`#${index + 1}`}></Badge>
+                        <Badge className="bg-purple-500 dark:bg-purple-700" content={`#${index + 1}`}></Badge>
                         <div>
-                          <h6 className="font-semibold text-gray-700">
+                          <h6 className="font-semibold text-gray-700 dark:text-gray-200">
                             {change.entityTypeFullName}
                           </h6>
-                          <p className="text-xs text-gray-500">ID: {change.entityId}</p>
+                          <p className="text-xs text-gray-500 dark:text-gray-400">ID: {change.entityId}</p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
                         {getChangeTypeBadge(change.changeType)}
-                        <span className="text-xs text-gray-500">
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
                           {new Date(change.changeTime).toLocaleTimeString('tr-TR')}
                         </span>
                       </div>
@@ -350,16 +350,16 @@ function AuditLogs({
 
                     {change.propertyChanges && change.propertyChanges.length > 0 && (
                       <div>
-                        <p className="text-xs font-medium text-gray-600 mb-3">Property Changes</p>
+                        <p className="text-xs font-medium text-gray-600 dark:text-gray-300 mb-3">Property Changes</p>
                         <div className="space-y-2">
                           {change.propertyChanges.map((prop, i) => (
-                            <div key={i} className="bg-gray-50 p-3 rounded-lg">
+                            <div key={i} className="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
                               <div className="flex items-start justify-between gap-4">
                                 <div className="flex-1">
-                                  <code className="text-sm font-semibold text-indigo-600">
+                                  <code className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                     {prop.propertyName}
                                   </code>
-                                  <span className="text-xs text-gray-500 ml-2">
+                                  <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">
                                     ({prop.propertyTypeFullName?.split('.').pop()})
                                   </span>
                                 </div>
@@ -367,16 +367,16 @@ function AuditLogs({
                                   {!prop.originalValue ||
                                   prop.originalValue === 'null' ||
                                   prop.originalValue === '[Not Tracked]' ? (
-                                    <span className="px-3 py-1 bg-green-100 text-green-700 rounded-md font-medium">
+                                    <span className="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-md font-medium">
                                       {prop.newValue || 'null'}
                                     </span>
                                   ) : (
                                     <>
-                                      <span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-md">
+                                      <span className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md">
                                         {prop.originalValue}
                                       </span>
-                                      <span className="text-gray-400">→</span>
-                                      <span className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-md font-medium">
+                                      <span className="text-gray-400 dark:text-gray-500">→</span>
+                                      <span className="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 rounded-md font-medium">
                                         {prop.newValue || 'null'}
                                       </span>
                                     </>
diff --git a/ui/src/views/admin/hr/OrgChart.tsx b/ui/src/views/admin/hr/OrgChart.tsx
index 08286e6..dc03fbd 100644
--- a/ui/src/views/admin/hr/OrgChart.tsx
+++ b/ui/src/views/admin/hr/OrgChart.tsx
@@ -804,22 +804,22 @@ const OrgChart = () => {
 
       <div className="flex flex-col h-full">
         {/* Toolbar */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pb-1 border-b">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pb-1 border-b border-slate-200 dark:border-gray-700">
           <div className="flex items-center gap-3 min-w-0">
             {MenuIcon}
-            <h4 className="text-sm font-medium truncate">
+            <h4 className="text-sm font-medium truncate text-gray-900 dark:text-white">
               {translate('::App.Definitions.OrgChart') || 'Organizasyon Şeması'}
             </h4>
           </div>
 
           <div className="flex flex-wrap items-center gap-2">
-            <div className="flex items-center bg-slate-100 rounded-lg p-1 gap-1">
+            <div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
               <button
                 onClick={() => setMode('department')}
                 className={`flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors ${
                   mode === 'department'
                     ? 'bg-blue-600 text-white shadow-sm'
-                    : 'text-slate-600 hover:text-slate-800'
+                    : 'text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white'
                 }`}
               >
                 <FaBuilding className="w-3.5 h-3.5 flex-shrink-0" />
@@ -830,7 +830,7 @@ const OrgChart = () => {
                 className={`flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors ${
                   mode === 'jobPosition'
                     ? 'bg-purple-600 text-white shadow-sm'
-                    : 'text-slate-600 hover:text-slate-800'
+                    : 'text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white'
                 }`}
               >
                 <FaBriefcase className="w-3.5 h-3.5 flex-shrink-0" />
@@ -838,39 +838,39 @@ const OrgChart = () => {
               </button>
             </div>
 
-            <div className="flex items-center bg-slate-100 rounded-lg p-1 gap-1">
-              <label className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs sm:text-sm text-slate-600 select-none cursor-pointer">
+            <div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
+              <label className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs sm:text-sm text-slate-600 dark:text-gray-300 select-none cursor-pointer">
                 <input
                   type="checkbox"
                   checked={showUsers}
                   onChange={(e) => setShowUsers(e.target.checked)}
-                  className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                  className="h-4 w-4 rounded border-slate-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
                 />
                 <span className="hidden sm:inline">{translate('::App.Definitions.OrgChart.ShowUsers') || 'Kullanıcılar'}</span>
               </label>
             </div>
 
-            <div className="flex items-center bg-slate-100 rounded-lg p-1 gap-1">
+            <div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
               <button
                 onClick={handleZoomOut}
-                className="p-1.5 sm:p-2 rounded-md text-slate-600 hover:text-slate-800 hover:bg-white"
+                className="p-1.5 sm:p-2 rounded-md text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700"
                 title="Zoom Out"
               >
                 <FaSearchMinus className="w-3.5 h-3.5" />
               </button>
-              <span className="text-xs font-medium text-slate-600 px-1 min-w-[36px] sm:min-w-[46px] text-center">
+              <span className="text-xs font-medium text-slate-600 dark:text-gray-300 px-1 min-w-[36px] sm:min-w-[46px] text-center">
                 {Math.round(zoom * 100)}%
               </span>
               <button
                 onClick={handleZoomIn}
-                className="p-1.5 sm:p-2 rounded-md text-slate-600 hover:text-slate-800 hover:bg-white"
+                className="p-1.5 sm:p-2 rounded-md text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700"
                 title="Zoom In"
               >
                 <FaSearchPlus className="w-3.5 h-3.5" />
               </button>
               <button
                 onClick={handleZoomReset}
-                className="p-1.5 sm:p-2 rounded-md text-slate-600 hover:text-slate-800 hover:bg-white"
+                className="p-1.5 sm:p-2 rounded-md text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700"
                 title="Reset Zoom"
               >
                 <FaUndo className="w-3.5 h-3.5" />
@@ -880,7 +880,7 @@ const OrgChart = () => {
             <button
               onClick={handleExportJpg}
               disabled={exporting || loading}
-              className="flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs sm:text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200 disabled:opacity-50 transition-colors"
+              className="flex items-center gap-1.5 p-1.5 sm:p-2 rounded-lg text-xs sm:text-sm font-medium bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-gray-300 hover:bg-slate-200 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors"
               title="JPG olarak indir"
             >
               <FaFileImage className="w-3.5 h-3.5 flex-shrink-0" />
diff --git a/ui/src/views/admin/listForm/edit/FormEdit.tsx b/ui/src/views/admin/listForm/edit/FormEdit.tsx
index 52ee3d2..2647d3f 100644
--- a/ui/src/views/admin/listForm/edit/FormEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormEdit.tsx
@@ -193,8 +193,8 @@ const FormEdit = () => {
           </Badge>
         )}
       </div>
-      <Tabs defaultValue="details" variant="pill">
-        <TabList className="flex-wrap border-b mb-2 bg-slate-50">
+      <Tabs defaultValue="details" variant="underline">
+        <TabList className="flex-wrap border-b mb-2 bg-slate-50 dark:bg-slate-800">
           {visibleTabs.includes('details') && (
             <TabNav value="details">{translate('::ListForms.ListFormEdit.TabDetails')}</TabNav>
           )}
diff --git a/ui/src/views/admin/listForm/wizard/Wizard.tsx b/ui/src/views/admin/listForm/wizard/Wizard.tsx
index 0abe19d..2d8e345 100644
--- a/ui/src/views/admin/listForm/wizard/Wizard.tsx
+++ b/ui/src/views/admin/listForm/wizard/Wizard.tsx
@@ -87,7 +87,6 @@ const step1ValidationSchema = Yup.object().shape({
   wizardName: Yup.string().required(),
   menuCode: Yup.string().required(),
   permissionGroupName: Yup.string().required(),
-  menuParentCode: Yup.string().required(),
   languageTextMenuEn: Yup.string().required(),
   languageTextMenuTr: Yup.string().required(),
 })
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep1.tsx b/ui/src/views/admin/listForm/wizard/WizardStep1.tsx
index e61607b..c7bbb94 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep1.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep1.tsx
@@ -452,7 +452,6 @@ const WizardStep1 = ({
 
   const step1Missing = [
     !wizardName && translate('::ListForms.Wizard.Step1.WizardName'),
-    !values.menuParentCode && translate('::ListForms.Wizard.Step1.MenuParent'),
     !values.permissionGroupName && translate('::ListForms.Wizard.Step1.PermissionGroupName'),
     !values.languageTextMenuEn && translate('::ListForms.Wizard.Step4.MenuEn'),
     !values.languageTextMenuTr && translate('::ListForms.Wizard.Step4.MenuTr'),
@@ -489,9 +488,8 @@ const WizardStep1 = ({
           {/* Menu Parent */}
           <FormItem
             label={translate('::ListForms.Wizard.Step1.MenuParent')}
-            invalid={errors.menuParentCode && touched.menuParentCode}
-            errorMessage={errors.menuParentCode}
-            asterisk={true}
+            invalid={false}
+            errorMessage={undefined}
             extra={
               <div className="flex items-center gap-2 ml-3">
                 <button
@@ -532,7 +530,7 @@ const WizardStep1 = ({
                   nodes={menuTree}
                   rawItems={rawMenuItems}
                   isLoading={isLoadingMenu}
-                  invalid={!!(errors.menuParentCode && touched.menuParentCode)}
+                  invalid={false}
                   onReload={onReloadMenu}
                   initialExpanded={values.menuParentCode ? getAncestorCodes(rawMenuItems, values.menuParentCode) : undefined}
                 />
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep3.tsx b/ui/src/views/admin/listForm/wizard/WizardStep3.tsx
index 29d54e2..a3e6ee4 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep3.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep3.tsx
@@ -632,7 +632,7 @@ function GroupCard({
       className={`rounded-xl border-2 transition-all ${
         isOver
           ? 'border-indigo-400 bg-indigo-50/60 dark:bg-indigo-900/20'
-          : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850'
+          : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900'
       }`}
     >
       {/* Group Header */}
@@ -642,7 +642,7 @@ function GroupCard({
           value={group.caption}
           onChange={(e) => onCaptionChange(e.target.value)}
           placeholder="Group caption…"
-          className="flex-1 min-w-[120px] text-sm font-semibold h-7 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:border-indigo-400"
+          className="flex-1 min-w-[120px] text-sm font-semibold h-7 px-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:border-indigo-400"
         />
         {/* ColCount */}
         <div className="flex items-center gap-1 shrink-0">
@@ -694,7 +694,7 @@ function GroupCard({
           isOver
             ? 'bg-indigo-100/60 dark:bg-indigo-900/30 border border-dashed border-indigo-400'
             : group.items.length === 0
-              ? 'border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
+              ? 'border border-dashed border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800'
               : ''
         }`}
       >
diff --git a/ui/src/views/admin/role-management/RolesPermission.tsx b/ui/src/views/admin/role-management/RolesPermission.tsx
index 602a88d..0730645 100644
--- a/ui/src/views/admin/role-management/RolesPermission.tsx
+++ b/ui/src/views/admin/role-management/RolesPermission.tsx
@@ -125,14 +125,14 @@ function PermissionDialogContent({
               const permKey = permission.name || ''
               return (
                 <div key={permission.name} className={`ml-${permission.level * 4} group`}>
-                  <div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
+                  <div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all dark:hover:bg-gray-700">
                     {isParentPerm ? (
                       <button
                         onClick={(e) => {
                           e.stopPropagation()
                           togglePermission(permKey)
                         }}
-                        className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
+                        className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition"
                       >
                         {openPermissions[permKey] || searchTerm ? (
                           <FaChevronDown className="text-gray-500 text-xs" />
@@ -148,7 +148,7 @@ function PermissionDialogContent({
                       checked={permission.isGranted}
                       onChange={() => onClickCheckbox(permission)}
                     >
-                      <span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
+                      <span className="text-sm text-gray-700 group-hover:text-gray-900 transition dark:text-gray-300 dark:group-hover:text-gray-100">
                         {translate('::' + permission.displayName)}
                       </span>
                     </Checkbox>
diff --git a/ui/src/views/admin/user-management/UsersPermission.tsx b/ui/src/views/admin/user-management/UsersPermission.tsx
index eec8b1a..73b0bb9 100644
--- a/ui/src/views/admin/user-management/UsersPermission.tsx
+++ b/ui/src/views/admin/user-management/UsersPermission.tsx
@@ -119,14 +119,14 @@ function UserPermissionDialogContent({
               const permKey = permission.name || ''
               return (
                 <div key={permission.name} className={`ml-${permission.level * 4} group`}>
-                  <div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
+                  <div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all dark:hover:bg-gray-700">
                     {isParentPerm ? (
                       <button
                         onClick={(e) => {
                           e.stopPropagation()
                           togglePermission(permKey)
                         }}
-                        className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
+                        className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition"
                       >
                         {openPermissions[permKey] || searchTerm ? (
                           <FaChevronDown className="text-gray-500 text-xs" />
@@ -145,7 +145,7 @@ function UserPermissionDialogContent({
                         (provider: any) => provider.providerName === 'R',
                       )}
                     >
-                      <span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
+                      <span className="text-sm text-gray-700 group-hover:text-gray-900 transition dark:text-gray-300 dark:group-hover:text-gray-100">
                         {translate('::' + permission.displayName)}
                         {permission.grantedProviders.map((provider: any) => {
                           const badgeContent =
diff --git a/ui/src/views/admin/videoroom/Dashboard.tsx b/ui/src/views/admin/videoroom/Dashboard.tsx
index 6eb4fb5..e3ce1c5 100644
--- a/ui/src/views/admin/videoroom/Dashboard.tsx
+++ b/ui/src/views/admin/videoroom/Dashboard.tsx
@@ -30,13 +30,13 @@ const Dashboard: React.FC = () => {
         title={translate('::' + 'App.Videoroom.Dashboard')}
         defaultTitle="Erp Platform"
       ></Helmet>
-      <div className="flex items-center justify-center p-4">
+      <div className="flex items-center justify-center p-4 bg-white dark:bg-gray-900 min-h-screen">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center w-full max-w-4xl"
         >
-          <p className="text-lg sm:text-xl text-gray-600 mb-8 sm:mb-12">
+          <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-8 sm:mb-12">
             {translate('::' + 'App.Videoroom.RoleSelector')}
           </p>
 
@@ -45,13 +45,13 @@ const Dashboard: React.FC = () => {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               onClick={() => handleRoleSelect('teacher')}
-              className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500"
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400"
             >
               <FaCrown size={48} className="mx-auto text-blue-600 mb-4 sm:mb-4" />
-              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
+              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-2">
                 {translate('::' + 'App.Videoroom.Host')}
               </h2>
-              <p className="text-gray-600 text-sm sm:text-base">
+              <p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
                 {translate('::' + 'App.Videoroom.HostDescription')}
               </p>
             </motion.button>
@@ -60,13 +60,13 @@ const Dashboard: React.FC = () => {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               onClick={() => handleRoleSelect('student')}
-              className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500"
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500 dark:hover:border-green-400"
             >
               <FaUsers size={48} className="mx-auto text-green-600 mb-4 sm:mb-4" />
-              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
+              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-2">
                 {translate('::' + 'App.Videoroom.Participant')}
               </h2>
-              <p className="text-gray-600 text-sm sm:text-base">
+              <p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
                 {translate('::' + 'App.Videoroom.ParticipantDescription')}
               </p>
             </motion.button>
@@ -75,13 +75,13 @@ const Dashboard: React.FC = () => {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               onClick={() => handleRoleSelect('observer')}
-              className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 md:col-span-2 lg:col-span-1"
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 dark:hover:border-purple-400 md:col-span-2 lg:col-span-1"
             >
               <FaEye size={48} className="mx-auto text-purple-600 mb-4 sm:mb-4" />
-              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
+              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-2">
                 {translate('::' + 'App.Videoroom.Observer')}
               </h2>
-              <p className="text-gray-600 text-sm sm:text-base">
+              <p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
                 {translate('::' + 'App.Videoroom.ObserverDescription')}
               </p>
             </motion.button>
diff --git a/ui/src/views/admin/videoroom/RoomList.tsx b/ui/src/views/admin/videoroom/RoomList.tsx
index 28bbd81..6e7430a 100644
--- a/ui/src/views/admin/videoroom/RoomList.tsx
+++ b/ui/src/views/admin/videoroom/RoomList.tsx
@@ -274,19 +274,20 @@ const RoomList: React.FC = () => {
         <div
           className={classNames(
             'flex items-center gap-2 pb-1 border-b',
-            mode === 'light' ? 'border-gray-200' : 'border-neutral-700',
+            mode === 'light' ? 'border-gray-200' : 'border-neutral-700 dark:border-gray-700',
+            'bg-white dark:bg-gray-900'
           )}
         >
           <FcVideoCall size={24} />
-          <h4 className="text-sm font-medium">{translate('::App.Videoroom.List')}</h4>
+          <h4 className="text-sm font-medium text-gray-900 dark:text-white">{translate('::App.Videoroom.List')}</h4>
 
           <div className="flex gap-1 ml-auto items-center">
             <div className="flex-1 relative">
-              <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
+              <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400 dark:text-gray-500" />
               <Input
                 size="sm"
                 type="text"
-                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                 placeholder="Search..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
@@ -352,11 +353,11 @@ const RoomList: React.FC = () => {
         </div>
 
         {/* Scheduled Classes */}
-        <div className="bg-white rounded-lg shadow-md">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
           {videoList.length === 0 ? (
             <div className="text-center py-12">
-              <FaCalendarAlt size={48} className="mx-auto text-gray-400 mb-4" />
-              <p className="text-sm text-gray-400 text-center py-4">
+              <FaCalendarAlt size={48} className="mx-auto text-gray-400 dark:text-gray-600 mb-4" />
+              <p className="text-sm text-gray-400 dark:text-gray-500 text-center py-4">
                 {translate('::App.Videoroom.NoScheduledRooms') ||
                   'No scheduled classes found. Please create a new class.'}
               </p>
@@ -379,17 +380,17 @@ const RoomList: React.FC = () => {
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: index * 0.05 }}
-                    className={`bg-white border border-gray-100 border-l-4 ${accentColor} rounded-xl shadow-sm hover:shadow-md transition-all duration-200`}
+                    className={`bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700 border-l-4 ${accentColor.replace('border-l-', 'dark:border-l-')} rounded-xl shadow-sm hover:shadow-md transition-all duration-200`}
                   >
                     {/* Card Header */}
                     <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 p-4 pb-3">
                       <div className="flex flex-col gap-1 min-w-0">
                         <div className="flex items-center gap-2 flex-wrap">
-                          <h3 className="text-sm font-semibold text-gray-900 truncate">
+                          <h3 className="text-sm font-semibold text-gray-900 dark:text-white truncate">
                             {classSession.name}
                           </h3>
                           <span
-                            className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${className}`}
+                            className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${className} dark:bg-opacity-80`}
                           >
                             {status}
                           </span>
@@ -397,12 +398,12 @@ const RoomList: React.FC = () => {
                         {(classSession.subject || classSession.description) && (
                           <div className="flex flex-col gap-0.5">
                             {classSession.subject && (
-                              <span className="text-xs font-medium text-indigo-600">
+                              <span className="text-xs font-medium text-indigo-600 dark:text-indigo-400">
                                 {classSession.subject}
                               </span>
                             )}
                             {classSession.description && (
-                              <p className="text-xs text-gray-400 line-clamp-1">
+                              <p className="text-xs text-gray-400 dark:text-gray-500 line-clamp-1">
                                 {classSession.description}
                               </p>
                             )}
@@ -523,13 +524,13 @@ const RoomList: React.FC = () => {
         >
           <form
             onSubmit={showCreateModal ? handleCreateClass : handleEditClass}
-            className="flex flex-col h-full"
+            className="flex flex-col h-full p-0"
           >
-            <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+            <Dialog.Body className="flex flex-col gap-2 overflow-hidden bg-white dark:bg-gray-800">
               {/* Header */}
-              <div className="flex items-center gap-3 border-b pb-3 flex-shrink-0">
+              <div className="flex items-center gap-3 border-b pb-3 flex-shrink-0 border-gray-200 dark:border-gray-700">
                 <FcVideoCall className="text-2xl" />
-                <h5 className="font-bold">
+                <h5 className="font-bold text-gray-900 dark:text-white">
                   {showCreateModal
                     ? translate('::App.Videoroom.CreateRoom') || 'Yeni Oda Oluştur'
                     : translate('::App.Videoroom.EditRoom') || 'Odayı Düzenle'}
@@ -538,7 +539,7 @@ const RoomList: React.FC = () => {
 
               <div className="flex-1 overflow-y-auto p-1 space-y-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('::App.Listform.ListformField.RoomName') || 'Room Name'} *
                   </label>
                   <input
@@ -547,7 +548,7 @@ const RoomList: React.FC = () => {
                     autoFocus={showCreateModal}
                     value={videoroom.name}
                     onChange={(e) => setVideoroom({ ...videoroom, name: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     placeholder={
                       translate('::App.Listform.ListformField.RoomNamePlaceholder') ||
                       'Enter room name...'
@@ -556,14 +557,14 @@ const RoomList: React.FC = () => {
                 </div>
 
                 <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('::App.Listform.ListformField.Description') || 'Description'}
                   </label>
                   <textarea
                     value={videoroom.description}
                     onChange={(e) => setVideoroom({ ...videoroom, description: e.target.value })}
                     rows={3}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     placeholder={
                       translate('::App.Listform.ListformField.DescriptionPlaceholder') ||
                       'Ders hakkında kısa açıklama...'
@@ -573,14 +574,14 @@ const RoomList: React.FC = () => {
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <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('::App.Listform.ListformField.Subject') || 'Subject'}
                     </label>
                     <input
                       type="text"
                       value={videoroom.subject}
                       onChange={(e) => setVideoroom({ ...videoroom, subject: e.target.value })}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder={
                         translate('::App.Listform.ListformField.SubjectPlaceholder') ||
                         'E.g. Math, Physics, Chemistry'
@@ -589,7 +590,7 @@ const RoomList: React.FC = () => {
                   </div>
 
                   <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('::App.Listform.ListformField.StartDateTime') ||
                         'Start Date and Time'}{' '}
                       *
@@ -608,14 +609,14 @@ const RoomList: React.FC = () => {
                           scheduledStartTime: e.target.value,
                         })
                       }
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
                   </div>
                 </div>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <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('::App.Listform.ListformField.Duration') || 'Duration'} (
                       {translate('::App.Listform.ListformField.Minutes') || 'minutes'})
                     </label>
@@ -630,12 +631,12 @@ const RoomList: React.FC = () => {
                           duration: parseInt(e.target.value),
                         })
                       }
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
                   </div>
 
                   <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('::App.Listform.ListformField.MaxParticipants') ||
                         'Maximum Participants'}
                     </label>
@@ -650,20 +651,20 @@ const RoomList: React.FC = () => {
                           maxParticipants: parseInt(e.target.value),
                         })
                       }
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
                   </div>
                 </div>
 
                 {/* Sınıf Ayarları */}
                 <div>
-                  <h3 className="text-lg font-semibold text-gray-800 mb-2">
+                  <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">
                     {translate('::App.Videoroom.RoomSettings') || 'Sınıf Ayarları'}
                   </h3>
 
                   <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                     <div className="space-y-4">
-                      <h4 className="font-medium text-gray-700">
+                      <h4 className="font-medium text-gray-700 dark:text-gray-300">
                         {translate('::App.Videoroom.ParticipantPermissions') ||
                           'Katılımcı İzinleri'}
                       </h4>{' '}
@@ -680,9 +681,9 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="rounded"
+                          className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
                         />
-                        <span className="text-sm">
+                        <span className="text-sm text-gray-700 dark:text-gray-300">
                           {translate('::App.Videoroom.AllowHandRaise') || 'Parmak kaldırma izni'}
                         </span>
                       </label>
@@ -699,9 +700,9 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="rounded"
+                          className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
                         />
-                        <span className="text-sm">
+                        <span className="text-sm text-gray-700 dark:text-gray-300">
                           {translate('::App.Videoroom.AllowStudentChat') || 'Öğrenci sohbet izni'}
                         </span>
                       </label>
@@ -718,9 +719,9 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="rounded"
+                          className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
                         />
-                        <span className="text-sm">
+                        <span className="text-sm text-gray-700 dark:text-gray-300">
                           {translate('::App.Videoroom.AllowPrivateMessages') || 'Özel mesaj izni'}
                         </span>
                       </label>
@@ -737,9 +738,9 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="rounded"
+                          className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
                         />
-                        <span className="text-sm">
+                        <span className="text-sm text-gray-700 dark:text-gray-300">
                           {translate('::App.Videoroom.AllowStudentScreenShare') ||
                             'Öğrenci ekran paylaşımı'}
                         </span>
@@ -747,12 +748,12 @@ const RoomList: React.FC = () => {
                     </div>
 
                     <div className="space-y-4">
-                      <h4 className="font-medium text-gray-700">
+                      <h4 className="font-medium text-gray-700 dark:text-gray-300">
                         {translate('::App.Videoroom.DefaultSettings') || 'Varsayılan Ayarlar'}
                       </h4>
 
                       <div className="flex items-center justify-between">
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                           {translate('::App.Videoroom.DefaultMicrophoneState') ||
                             'Varsayılan mikrofon durumu'}
                         </label>
@@ -767,7 +768,7 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          className="border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         >
                           <option value="muted">
                             {translate('::App.Videoroom.MicrophoneMuted') || 'Kapalı'}
@@ -779,7 +780,7 @@ const RoomList: React.FC = () => {
                       </div>
 
                       <div className="flex items-center justify-between">
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                           {translate('::App.Videoroom.DefaultCameraState') ||
                             'Varsayılan kamera durumu'}
                         </label>
@@ -794,7 +795,7 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          className="border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         >
                           <option value="on">
                             {translate('::App.Videoroom.CameraOn') || 'Açık'}
@@ -806,7 +807,7 @@ const RoomList: React.FC = () => {
                       </div>
 
                       <div className="flex items-center justify-between">
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                           {translate('::App.Videoroom.DefaultLayout') || 'Varsayılan layout'}
                         </label>
                         <select
@@ -820,7 +821,7 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          className="border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         >
                           <option value="grid">
                             {translate('::App.Videoroom.LayoutGridView') || 'Izgara Görünümü'}
@@ -850,9 +851,9 @@ const RoomList: React.FC = () => {
                               },
                             })
                           }
-                          className="rounded"
+                          className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
                         />
-                        <span className="text-sm">
+                        <span className="text-sm text-gray-700 dark:text-gray-300">
                           {translate('::App.Videoroom.AutomaticallyMuteNewParticipants') ||
                             'Yeni katılımcıları otomatik sustur'}
                         </span>
diff --git a/ui/src/views/auth/Login.tsx b/ui/src/views/auth/Login.tsx
index d6fcd39..5ec6054 100644
--- a/ui/src/views/auth/Login.tsx
+++ b/ui/src/views/auth/Login.tsx
@@ -289,6 +289,7 @@ const Login = () => {
                         name="userName"
                         placeholder={translate('::Abp.Account.EmailAddress')}
                         component={Input}
+                        inputClassName="dark:bg-gray-900 dark:text-gray-100"
                       />
                     </FormItem>
                   )}
@@ -352,12 +353,12 @@ const Login = () => {
                   <Button block loading={isSubmitting} variant="solid" type="submit">
                     {isSubmitting ? 'Signing in...' : 'Sign In'}
                   </Button>
-                  <div className="mt-4 text-center">
+                  {/* <div className="mt-4 text-center">
                     <span>{translate('::Abp.Account.SignUp.Message')} </span>
                     <ActionLink to={ROUTES_ENUM.authenticated.register}>
                       {translate('::Abp.Account.Register')}
                     </ActionLink>
-                  </div>
+                  </div> */}
                 </FormContainer>
               </Form>
             )}
diff --git a/ui/src/views/developerKit/ComponentCodeLayout.tsx b/ui/src/views/developerKit/ComponentCodeLayout.tsx
index d64e3f5..9d8ce61 100644
--- a/ui/src/views/developerKit/ComponentCodeLayout.tsx
+++ b/ui/src/views/developerKit/ComponentCodeLayout.tsx
@@ -620,21 +620,21 @@ function ComponentCodeLayout() {
   const mainContent = (
     <div className="flex-1 flex flex-col min-h-0 h-full">
       {/* Top Header */}
-      <div className="bg-white border-b border-gray-200 px-3 py-3">
+      <div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-3 py-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-4">
-            <h1 className="text-lg font-semibold text-gray-900">{name}</h1>
-            <p className="text-xs text-gray-500">{dependencies.join(', ')}</p>
+            <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{name}</h1>
+            <p className="text-xs text-gray-500 dark:text-gray-400">{dependencies.join(', ')}</p>
           </div>
 
           <div className="flex items-center space-x-3">
             <button
               onClick={() => setShowPanelManager(true)}
-              className="flex items-center space-x-2 px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+              className="flex items-center space-x-2 px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
               title="Panel Manager"
             >
-              <FaThLarge className="w-4 h-4 text-gray-600" />
-              <span className="text-sm text-gray-600">Panels</span>
+              <FaThLarge className="w-4 h-4 text-gray-600 dark:text-gray-300" />
+              <span className="text-sm text-gray-600 dark:text-gray-300">Panels</span>
             </button>
           </div>
         </div>
@@ -657,7 +657,7 @@ function ComponentCodeLayout() {
 
   return (
     <div
-      className="flex h-screen bg-gray-50"
+      className="flex h-screen bg-gray-50 dark:bg-gray-950"
       onDragOver={handleAppDragOver}
       onDrop={(e) => {
         e.preventDefault()
diff --git a/ui/src/views/developerKit/ComponentEditor.tsx b/ui/src/views/developerKit/ComponentEditor.tsx
index c8e53b0..3e25992 100644
--- a/ui/src/views/developerKit/ComponentEditor.tsx
+++ b/ui/src/views/developerKit/ComponentEditor.tsx
@@ -189,9 +189,7 @@ export default ${pascalCaseName}Component;`
       <div className="h-screen flex items-center justify-center">
         <div className="text-center">
           <FaSync className="w-8 h-8 text-blue-500 animate-spin mx-auto mb-3" />
-          <p className="text-slate-600">
-            {translate('::App.Loading')}
-          </p>
+          <p className="text-slate-600">{translate('::App.Loading')}</p>
         </div>
       </div>
     )
@@ -207,29 +205,21 @@ export default ${pascalCaseName}Component;`
       {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
         <>
           {/* Enhanced Header */}
-          <div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
-            <div className="px-4 py-3">
+          <div className="bg-white dark:bg-gray-900 shadow-lg border-b border-slate-200 dark:border-gray-700 sticky top-0 z-10">
+            <div className="px-1 py-3">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-4">
-                  <Link
-                    to={ROUTES_ENUM.protected.saas.developerKit.components}
-                    className="flex items-center gap-2 text-slate-600 text-black px-4 py-2 rounded-lg hover:text-slate-700 transition-colors"
-                  >
-                    <FaArrowLeft className="w-3.5 h-3.5" />
-                    {translate('::App.DeveloperKit.ComponentEditor.Back')}
-                  </Link>
-                  <div className="h-6 w-px bg-slate-300"></div>
                   <div className="flex items-center gap-3">
                     <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
                       <FaCode className="w-5 h-5 text-white" />
                     </div>
                     <div>
-                      <h1 className="font-semibold text-slate-800 text-sm leading-tight">
+                      <h1 className="font-semibold text-slate-800 dark:text-gray-100 text-sm leading-tight">
                         {isEditing
                           ? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
                           : translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
                       </h1>
-                      <p className="text-xs text-slate-500 leading-tight">
+                      <p className="text-xs text-slate-500 dark:text-gray-400 leading-tight">
                         {isEditing ? 'Modify your React component' : 'Create a new React component'}
                       </p>
                     </div>
@@ -238,11 +228,20 @@ export default ${pascalCaseName}Component;`
 
                 {/* Save Button in Header */}
                 <div className="flex items-center gap-3">
+                  <Link
+                    to={ROUTES_ENUM.protected.saas.developerKit.components}
+                    className="flex items-center gap-2 text-slate-600 dark:text-gray-300 text-black dark:text-white px-4 py-2 rounded-lg hover:text-slate-700 dark:hover:text-gray-100 transition-colors"
+                  >
+                    <FaArrowLeft className="w-3.5 h-3.5" />
+                    {translate('::App.DeveloperKit.ComponentEditor.Back')}
+                  </Link>
+                  <div className="h-6 w-px bg-slate-300 dark:bg-gray-700"></div>
+
                   <button
                     type="button"
                     onClick={submitForm}
                     disabled={isSubmitting || !values.name.trim() || !isValid}
-                    className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                   >
                     <FaRegSave className="w-4 h-4" />
                     {isSubmitting
@@ -255,14 +254,15 @@ export default ${pascalCaseName}Component;`
           </div>
 
           <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 py-3">
-            {/* Left Side - Component Settings */}
             <div className="space-y-3 col-span-1">
-              <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-slate-200 dark:border-gray-700 p-3">
                 <div className="flex items-center gap-2 mb-3">
-                  <div className="bg-blue-100 p-1.5 rounded-lg">
-                    <FaCog className="w-4 h-4 text-blue-600" />
+                  <div className="bg-blue-100 dark:bg-blue-900/20 p-1.5 rounded-lg">
+                    <FaCog className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                   </div>
-                  <h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
+                  <h2 className="text-base font-semibold text-slate-900 dark:text-gray-100">
+                    Component Settings
+                  </h2>
                 </div>
 
                 <FormContainer size="sm">
@@ -275,6 +275,7 @@ export default ${pascalCaseName}Component;`
                       name="name"
                       type="text"
                       component={Input}
+                      autoFocus
                       placeholder="e.g., Button, Card, Modal"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         const newName = e.target.value
@@ -367,24 +368,27 @@ export default ${pascalCaseName}Component;`
             <div className="space-y-4 col-span-2">
               {/* Validation Errors */}
               {validationErrors.length > 0 && (
-                <div className="bg-red-50 border border-red-200 rounded-lg p-3 shadow-sm">
+                <div className="bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-700 rounded-lg p-3 shadow-sm">
                   <div className="flex items-start gap-2">
-                    <div className="bg-red-100 rounded-full p-1.5">
-                      <FaExclamationCircle className="w-4 h-4 text-red-600" />
+                    <div className="bg-red-100 dark:bg-red-900 rounded-full p-1.5">
+                      <FaExclamationCircle className="w-4 h-4 text-red-600 dark:text-red-400" />
                     </div>
                     <div className="flex-1">
-                      <h3 className="text-base font-semibold text-red-800 mb-1">
+                      <h3 className="text-base font-semibold text-red-800 dark:text-red-300 mb-1">
                         Validation Issues
                       </h3>
-                      <p className="text-xs text-red-700 mb-3">
+                      <p className="text-xs text-red-700 dark:text-red-400 mb-3">
                         {validationErrors.length} issue
                         {validationErrors.length !== 1 ? 's' : ''} found in your code
                       </p>
                       <div className="space-y-1.5 max-h-32 overflow-y-auto">
                         {validationErrors.slice(0, 5).map((error, index) => (
-                          <div key={index} className="bg-white p-2 rounded border border-red-100">
-                            <div className="text-xs text-red-800">
-                              <span className="font-medium bg-red-100 px-1.5 py-0.5 rounded text-xs">
+                          <div
+                            key={index}
+                            className="bg-white dark:bg-gray-900 p-2 rounded border border-red-100 dark:border-red-700"
+                          >
+                            <div className="text-xs text-red-800 dark:text-red-300">
+                              <span className="font-medium bg-red-100 dark:bg-red-900 px-1.5 py-0.5 rounded text-xs">
                                 Line {error.startLineNumber}
                               </span>
                               <span className="ml-2">{error.message}</span>
@@ -392,7 +396,7 @@ export default ${pascalCaseName}Component;`
                           </div>
                         ))}
                         {validationErrors.length > 5 && (
-                          <div className="text-xs text-red-600 italic text-center py-1">
+                          <div className="text-xs text-red-600 dark:text-red-400 italic text-center py-1">
                             ... and {validationErrors.length - 5} more issue
                             {validationErrors.length - 5 !== 1 ? 's' : ''}
                           </div>
@@ -404,12 +408,14 @@ export default ${pascalCaseName}Component;`
               )}
 
               {/* Component Preview */}
-              <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-slate-200 dark:border-gray-700 p-3">
                 <div className="flex items-center gap-2 mb-3">
-                  <div className="bg-purple-100 p-1.5 rounded-lg">
-                    <FaEye className="w-4 h-4 text-purple-600" />
+                  <div className="bg-purple-100 dark:bg-purple-900/20 p-1.5 rounded-lg">
+                    <FaEye className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                   </div>
-                  <h2 className="text-base font-semibold text-slate-900">Preview</h2>
+                  <h2 className="text-base font-semibold text-slate-900 dark:text-gray-100">
+                    Preview
+                  </h2>
                 </div>
                 <ComponentPreview componentName={values.name} />
               </div>
diff --git a/ui/src/views/developerKit/ComponentManager.tsx b/ui/src/views/developerKit/ComponentManager.tsx
index 07b2e3b..53616ac 100644
--- a/ui/src/views/developerKit/ComponentManager.tsx
+++ b/ui/src/views/developerKit/ComponentManager.tsx
@@ -107,15 +107,15 @@ const ComponentManager: React.FC = () => {
             placeholder={translate('::App.DeveloperKit.Component.SearchPlaceholder')}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           />
         </div>
         <div className="flex items-center gap-2">
-          <FaFilter className="w-5 h-5 text-slate-500" />
+          <FaFilter className="w-5 h-5 text-slate-500 dark:text-gray-400" />
           <select
             value={filterActive}
             onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
-            className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           >
             <option value="all">{translate('::App.DeveloperKit.Component.Filter.All')}</option>
             <option value="active">
@@ -129,7 +129,7 @@ const ComponentManager: React.FC = () => {
         <div>
           <Link
             to={ROUTES_ENUM.protected.saas.developerKit.componentsNew}
-            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+            className="flex items-center gap-2 bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
           >
             <FaPlus className="w-4 h-4" />
             {translate('::App.DeveloperKit.Component.New')}
@@ -149,22 +149,22 @@ const ComponentManager: React.FC = () => {
           {filteredComponents.map((component) => (
             <div
               key={component.id}
-              className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
+              className="bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
             >
               <div className="p-6">
                 <div className="flex items-start justify-between">
                   {/* Sol taraf */}
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-1">
-                      <h3 className="text-lg font-semibold text-slate-900">{component.name}</h3>
+                      <h3 className="text-lg font-semibold text-slate-900 dark:text-gray-100">{component.name}</h3>
                       <div
                         className={`w-2 h-2 rounded-full ${
-                          component.isActive ? 'bg-green-500' : 'bg-slate-300'
+                          component.isActive ? 'bg-green-500' : 'bg-slate-300 dark:bg-gray-700'
                         }`}
                       />
                     </div>
 
-                    <p className="text-slate-600 text-sm mb-3">
+                    <p className="text-slate-600 dark:text-gray-300 text-sm mb-3">
                       {(() => {
                         try {
                           const parsed = JSON.parse(component.dependencies ?? '[]')
@@ -178,13 +178,13 @@ const ComponentManager: React.FC = () => {
                     </p>
 
                     {component.description && (
-                      <p className="text-slate-600 text-sm mb-3">{component.description}</p>
+                      <p className="text-slate-600 dark:text-gray-300 text-sm mb-3">{component.description}</p>
                     )}
                   </div>
 
                   {/* Sağ taraf */}
                   {component.lastModificationTime && (
-                    <div className="flex items-center gap-1 text-xs text-slate-500 ml-4 whitespace-nowrap">
+                    <div className="flex items-center gap-1 text-xs text-slate-500 dark:text-gray-400 ml-4 whitespace-nowrap">
                       <FaCalendarAlt className="w-3 h-3" />
                       <span>
                         {new Date(component.lastModificationTime).toLocaleDateString() ?? ''}
@@ -196,24 +196,24 @@ const ComponentManager: React.FC = () => {
                 {/* Props Preview */}
                 {component.props && (
                   <div className="mb-4">
-                    <p className="text-xs font-medium text-slate-700 mb-1">
+                    <p className="text-xs font-medium text-slate-700 dark:text-gray-400 mb-1">
                       {translate('::App.DeveloperKit.Component.PropsLabel')}
                     </p>
-                    <code className="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded">
+                    <code className="text-xs bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-gray-300 px-2 py-1 rounded">
                       {component.props}
                     </code>
                   </div>
                 )}
 
                 {/* Actions */}
-                <div className="flex items-center justify-between pt-2 border-t border-slate-100">
+                <div className="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-gray-700">
                   <div className="flex items-center gap-2">
                     <button
                       onClick={() => handleToggleActive(component.id, !component.isActive)}
                       className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors ${
                         component.isActive
-                          ? 'bg-green-100 text-green-700 hover:bg-green-200'
-                          : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+                          ? 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-800'
+                          : 'bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-gray-400 hover:bg-slate-200 dark:hover:bg-gray-700'
                       }`}
                     >
                       {component.isActive ? (
@@ -236,7 +236,7 @@ const ComponentManager: React.FC = () => {
                         component.id,
                       )}
                       target="_blank"
-                      className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                      className="p-2 text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
                       title={translate('::App.DeveloperKit.Component.Edit')}
                     >
                       <FaRegEdit className="w-4 h-4" />
@@ -246,14 +246,14 @@ const ComponentManager: React.FC = () => {
                         ':id',
                         component.id,
                       )}
-                      className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                      className="p-2 text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
                       title={translate('::App.DeveloperKit.Component.View')}
                     >
                       <FaEye className="w-4 h-4" />
                     </Link>
                     <button
                       onClick={() => handleDelete(component.id, component.name)}
-                      className="p-2 text-slate-600 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                      className="p-2 text-slate-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 rounded transition-colors"
                       title={translate('::App.DeveloperKit.Component.Delete')}
                     >
                       <FaTrashAlt className="w-4 h-4" />
diff --git a/ui/src/views/developerKit/CrudEndpointManager.tsx b/ui/src/views/developerKit/CrudEndpointManager.tsx
index f679a92..859426b 100644
--- a/ui/src/views/developerKit/CrudEndpointManager.tsx
+++ b/ui/src/views/developerKit/CrudEndpointManager.tsx
@@ -317,7 +317,7 @@ const CrudEndpointManager: React.FC = () => {
   const selectedTableEndpoints = selectedTable ? getEndpointsForTable(selectedTable.tableName) : []
 
   return (
-    <div className="flex flex-col h-full gap-4">
+    <div className="flex flex-col h-full gap-4 bg-gray-50 dark:bg-gray-950">
       <Helmet
         titleTemplate={`%s | ${APP_NAME}`}
         title={translate('::' + 'App.DeveloperKit.CrudEndpoints')}
@@ -362,17 +362,17 @@ const CrudEndpointManager: React.FC = () => {
 
       {/* Main two-panel layout */}
       <div
-        className="flex flex-col gap-4 lg:flex-row"
+        className="flex flex-col gap-4 lg:flex-row bg-gray-50 dark:bg-gray-950"
         style={{ minHeight: 400, height: 'calc(100vh - 250px)' }}
       >
         {/* Left Panel: Table List */}
-        <div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
+        <div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
           {/* DataSource selector */}
-          <div className="p-3 border-b border-slate-200 bg-slate-50">
+          <div className="p-3 border-b border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800">
             <select
               value={selectedDataSource || ''}
               onChange={(e) => setSelectedDataSource(e.target.value)}
-              className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
+              className="w-full px-2 py-1.5 text-sm border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
             >
               {dataSources.map((ds) => (
                 <option key={ds.id} value={ds.code ?? ''}>
@@ -384,7 +384,7 @@ const CrudEndpointManager: React.FC = () => {
           </div>
 
           {/* Search + CRUD filter */}
-          <div className="p-3 border-b border-slate-200 space-y-2">
+          <div className="p-3 border-b border-slate-200 dark:border-gray-700 space-y-2">
             <div className="relative">
               <FaSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs" />
               <input
@@ -392,10 +392,10 @@ const CrudEndpointManager: React.FC = () => {
                 placeholder={translate('::App.DeveloperKit.CrudEndpoints.SearchTable')}
                 value={tableSearch}
                 onChange={(e) => setTableSearch(e.target.value)}
-                className="w-full pl-7 pr-3 py-1.5 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full pl-7 pr-3 py-1.5 text-sm border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
               />
             </div>
-            <div className="flex rounded-lg border border-slate-200 overflow-hidden text-xs font-medium">
+            <div className="flex rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden text-xs font-medium">
               {(['all', 'with', 'without'] as const).map((f) => {
                 const labels = {
                   all: `${translate('::App.DeveloperKit.CrudEndpoints.FilterAll')} (${dbTables.length})`,
@@ -414,7 +414,7 @@ const CrudEndpointManager: React.FC = () => {
                           : f === 'without'
                             ? 'bg-slate-500 text-white'
                             : 'bg-blue-500 text-white'
-                        : 'bg-white text-slate-500 hover:bg-slate-50'
+                        : 'bg-white dark:bg-gray-900 text-slate-500 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-gray-800'
                     }`}
                   >
                     {labels[f]}
@@ -438,7 +438,7 @@ const CrudEndpointManager: React.FC = () => {
             ) : (
               Object.entries(tablesBySchema).map(([schema, tables]) => (
                 <div key={schema}>
-                  <div className="px-3 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wide bg-slate-50 border-b border-slate-100 sticky top-0">
+                  <div className="px-3 py-1.5 text-xs font-semibold text-slate-400 dark:text-gray-400 uppercase tracking-wide bg-slate-50 dark:bg-gray-800 border-b border-slate-100 dark:border-gray-700 sticky top-0">
                     {schema}
                   </div>
                   {tables.map((table) => {
@@ -450,8 +450,8 @@ const CrudEndpointManager: React.FC = () => {
                       <button
                         key={table.fullName}
                         onClick={() => setSelectedTable(table)}
-                        className={`w-full flex items-center justify-between px-3 py-1 text-left hover:bg-slate-50 transition-colors border-b border-slate-50 ${
-                          isSelected ? 'bg-blue-50 border-l-2 border-l-blue-500' : ''
+                        className={`w-full flex items-center justify-between px-3 py-1 text-left hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors border-b border-slate-50 dark:border-gray-800 ${
+                          isSelected ? 'bg-blue-50 dark:bg-blue-900/20 border-l-2 border-l-blue-500 dark:border-l-blue-400' : ''
                         }`}
                       >
                         <div className="flex items-center gap-2 min-w-0">
@@ -460,14 +460,14 @@ const CrudEndpointManager: React.FC = () => {
                               hasEndpoints ? 'text-green-500' : 'text-slate-300'
                             }`}
                           />
-                          <span className="text-sm text-slate-700 truncate">{table.tableName}</span>
+                          <span className="text-sm text-slate-700 dark:text-gray-100 truncate">{table.tableName}</span>
                         </div>
                         {hasEndpoints && (
                           <span
                             className={`flex-shrink-0 text-xs px-1.5 py-0.5 rounded-full font-medium ${
                               active > 0
-                                ? 'bg-green-100 text-green-700'
-                                : 'bg-slate-100 text-slate-500'
+                                ? 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400'
+                                : 'bg-slate-100 dark:bg-gray-800 text-slate-500 dark:text-gray-400'
                             }`}
                           >
                             {active}/{total}
@@ -486,33 +486,33 @@ const CrudEndpointManager: React.FC = () => {
         </div>
 
         {/* Right Panel: Endpoint Management */}
-        <div className="flex-1 min-w-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden min-h-0">
+        <div className="flex-1 min-w-0 flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden min-h-0">
           {!selectedTable ? (
-            <div className="flex-1 flex flex-col items-center justify-center text-slate-400 p-8">
-              <FaDatabase className="text-4xl mb-3 text-slate-200" />
-              <p className="text-base font-medium">{translate('::App.DeveloperKit.CrudEndpoints.SelectTablePrompt')}</p>
-              <p className="text-sm mt-1">
+            <div className="flex-1 flex flex-col items-center justify-center text-slate-400 dark:text-gray-500 p-8">
+              <FaDatabase className="text-4xl mb-3 text-slate-200 dark:text-gray-700" />
+              <p className="text-base font-medium dark:text-gray-300">{translate('::App.DeveloperKit.CrudEndpoints.SelectTablePrompt')}</p>
+              <p className="text-sm mt-1 dark:text-gray-400">
                 {translate('::App.DeveloperKit.CrudEndpoints.SelectTableDescription')}
               </p>
             </div>
           ) : (
             <div className="flex flex-col h-full overflow-hidden">
               {/* Table header */}
-              <div className="flex flex-col gap-3 p-4 border-b border-slate-200 bg-slate-50 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
-                    <FaTable />
+              <div className="flex flex-col gap-3 p-4 border-b border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 p-2 rounded-lg">
+                      <FaTable />
+                    </div>
+                    <div>
+                      <h4 className="text-slate-900 dark:text-gray-100">{selectedTable.schemaName}.{selectedTable.tableName}</h4>
+                    </div>
                   </div>
-                  <div>
-                    <h4 className="text-slate-900">{selectedTable.schemaName}.{selectedTable.tableName}</h4>
-                  </div>
-                </div>
                 <div className="flex flex-wrap items-center gap-2">
                   {selectedTableEndpoints.length > 0 && (
                     <button
                       onClick={() => handleDeleteAll(selectedTable)}
                       disabled={deletingAll === selectedTable.fullName}
-                      className="flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 transition-colors"
+                      className="flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 border border-red-200 dark:border-red-700 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50 transition-colors"
                     >
                       {deletingAll === selectedTable.fullName ? (
                         <FaSyncAlt className="animate-spin" />
@@ -525,7 +525,7 @@ const CrudEndpointManager: React.FC = () => {
                   <button
                     onClick={() => handleGenerate(selectedTable)}
                     disabled={generatingFor === selectedTable.fullName}
-                    className="flex items-center gap-2 px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                    className="flex items-center gap-2 px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 disabled:opacity-50 transition-colors"
                   >
                     {generatingFor === selectedTable.fullName ? (
                       <FaSyncAlt className="animate-spin" />
@@ -542,10 +542,10 @@ const CrudEndpointManager: React.FC = () => {
               {/* Endpoints list */}
               <div className="flex-1 overflow-y-auto p-4">
                 {selectedTableEndpoints.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-slate-400">
-                    <FaBolt className="text-3xl mb-3 text-slate-200" />
-                    <p className="font-medium">{translate('::App.DeveloperKit.CrudEndpoints.NoEndpointsYet')}</p>
-                    <p className="text-sm mt-1">
+                  <div className="flex flex-col items-center justify-center py-16 text-slate-400 dark:text-gray-500">
+                    <FaBolt className="text-3xl mb-3 text-slate-200 dark:text-gray-700" />
+                    <p className="font-medium dark:text-gray-300">{translate('::App.DeveloperKit.CrudEndpoints.NoEndpointsYet')}</p>
+                    <p className="text-sm mt-1 dark:text-gray-400">
                       {translate('::App.DeveloperKit.CrudEndpoints.ClickToCreate')}
                     </p>
                   </div>
@@ -557,10 +557,10 @@ const CrudEndpointManager: React.FC = () => {
                       return (
                         <div
                           key={ep.id}
-                          className="border border-slate-200 rounded-lg overflow-hidden"
+                          className="border border-slate-200 dark:border-gray-700 rounded-lg overflow-hidden"
                         >
                           {/* Endpoint row */}
-                          <div className="flex items-center gap-3 p-3 bg-white hover:bg-slate-50 transition-colors">
+                          <div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-900 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors">
                             {/* Toggle */}
                             <button
                               onClick={() => handleToggle(ep.id)}
@@ -585,7 +585,7 @@ const CrudEndpointManager: React.FC = () => {
                             <span
                               className={`flex-shrink-0 px-2 py-0.5 text-xs font-bold rounded border ${
                                 METHOD_COLOR[ep.method] ||
-                                'bg-slate-100 text-slate-700 border-slate-200'
+                                'bg-slate-100 dark:bg-gray-800 text-slate-700 dark:text-gray-300 border-slate-200 dark:border-gray-700'
                               }`}
                             >
                               {ep.method}
@@ -593,10 +593,10 @@ const CrudEndpointManager: React.FC = () => {
 
                             {/* Operation */}
                             <div className="flex-1 min-w-0">
-                              <span className="font-medium text-slate-800 text-sm">
+                              <span className="font-medium text-slate-800 dark:text-gray-100 text-sm">
                                 {ep.operationType}
                               </span>
-                              <code className="ml-3 text-xs text-slate-500 bg-slate-100 px-2 py-0.5 rounded">
+                              <code className="ml-3 text-xs text-slate-500 dark:text-gray-400 bg-slate-100 dark:bg-gray-800 px-2 py-0.5 rounded">
                                 {ep.path}
                               </code>
                             </div>
@@ -604,7 +604,7 @@ const CrudEndpointManager: React.FC = () => {
                             {/* Expand */}
                             <button
                               onClick={() => setExpandedEndpoint(isExpanded ? null : ep.id)}
-                              className="p-1.5 text-slate-400 hover:text-slate-700 transition-colors"
+                              className="p-1.5 text-slate-400 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200 transition-colors"
                               title={translate('::App.DeveloperKit.CrudEndpoints.TestDetails')}
                             >
                               {isExpanded ? (
@@ -617,11 +617,11 @@ const CrudEndpointManager: React.FC = () => {
 
                           {/* Expanded detail + test */}
                           {isExpanded && (
-                            <div className="border-t border-slate-200 bg-slate-50 p-4 space-y-4">
+                            <div className="border-t border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 p-4 space-y-4">
                               {/* Parameters */}
                               {getEndpointParameters(ep).length > 0 && (
                                 <div>
-                                  <p className="text-xs font-semibold text-slate-600 mb-2">
+                                  <p className="text-xs font-semibold text-slate-600 dark:text-gray-300 mb-2">
                                     {translate('::App.DeveloperKit.CrudEndpoints.Parameters')}
                                   </p>
                                   <div className="space-y-2">
@@ -650,7 +650,7 @@ const CrudEndpointManager: React.FC = () => {
                                               },
                                             }))
                                           }
-                                          className="flex-1 px-2 py-1 text-xs border border-slate-300 rounded focus:ring-1 focus:ring-blue-500"
+                                          className="flex-1 px-2 py-1 text-xs border border-slate-300 dark:border-gray-700 rounded focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                                         />
                                       </div>
                                     ))}
@@ -661,7 +661,7 @@ const CrudEndpointManager: React.FC = () => {
                               {/* Request body */}
                               {needsBody(ep) && (
                                 <div>
-                                  <p className="text-xs font-semibold text-slate-600 mb-2">
+                                  <p className="text-xs font-semibold text-slate-600 dark:text-gray-300 mb-2">
                                     {translate('::App.DeveloperKit.CrudEndpoints.RequestBody')}
                                   </p>
                                   <textarea
@@ -673,7 +673,7 @@ const CrudEndpointManager: React.FC = () => {
                                       }))
                                     }
                                     rows={5}
-                                    className="w-full px-2 py-1.5 text-xs border border-slate-300 rounded font-mono focus:ring-1 focus:ring-blue-500 bg-white"
+                                    className="w-full px-2 py-1.5 text-xs border border-slate-300 dark:border-gray-700 rounded font-mono focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                                   />
                                 </div>
                               )}
@@ -713,25 +713,25 @@ const CrudEndpointManager: React.FC = () => {
                                 <div
                                   className={`rounded-lg border p-3 ${
                                     testResult.success
-                                      ? 'border-green-200 bg-green-50'
-                                      : 'border-red-200 bg-red-50'
+                                      ? 'border-green-200 dark:border-green-700 bg-green-50 dark:bg-green-900/20'
+                                      : 'border-red-200 dark:border-red-700 bg-red-50 dark:bg-red-900/20'
                                   }`}
                                 >
                                   <div className="flex items-center gap-2 mb-2">
                                     {testResult.success ? (
-                                      <FaCheckCircle className="text-green-500" />
+                                      <FaCheckCircle className="text-green-500 dark:text-green-400" />
                                     ) : (
-                                      <FaExclamationCircle className="text-red-500" />
+                                      <FaExclamationCircle className="text-red-500 dark:text-red-400" />
                                     )}
                                     <span className="text-sm font-medium">
                                       HTTP {testResult.status}
                                     </span>
-                                    <span className="text-xs text-slate-500 ml-auto">
+                                    <span className="text-xs text-slate-500 dark:text-gray-400 ml-auto">
                                       {new Date(testResult.timestamp).toLocaleTimeString()}
                                     </span>
                                   </div>
                                   <div className="relative">
-                                    <pre className="text-xs bg-white border border-slate-200 rounded p-2 overflow-x-auto max-h-48">
+                                    <pre className="text-xs bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded p-2 overflow-x-auto max-h-48 text-gray-900 dark:text-gray-100">
                                       {JSON.stringify(
                                         testResult.success ? testResult.data : testResult.error,
                                         null,
@@ -748,7 +748,7 @@ const CrudEndpointManager: React.FC = () => {
                                           ),
                                         )
                                       }
-                                      className="absolute top-1.5 right-1.5 p-1 text-slate-400 hover:text-slate-700"
+                                      className="absolute top-1.5 right-1.5 p-1 text-slate-400 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200"
                                     >
                                       <FaCopy className="text-xs" />
                                     </button>
@@ -760,15 +760,15 @@ const CrudEndpointManager: React.FC = () => {
                               {ep.csharpCode && (
                                 <div>
                                   <div className="flex items-center justify-between mb-1">
-                                    <p className="text-xs font-semibold text-slate-600">{translate('::App.DeveloperKit.CrudEndpoints.CsharpCode')}</p>
+                                    <p className="text-xs font-semibold text-slate-600 dark:text-gray-300">{translate('::App.DeveloperKit.CrudEndpoints.CsharpCode')}</p>
                                     <button
                                       onClick={() => navigator.clipboard.writeText(ep.csharpCode)}
-                                      className="text-xs text-slate-400 hover:text-slate-700 flex items-center gap-1"
+                                      className="text-xs text-slate-400 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200 flex items-center gap-1"
                                     >
                                       <FaCopy /> {translate('::App.DeveloperKit.CrudEndpoints.Copy')}
                                     </button>
                                   </div>
-                                  <pre className="text-xs bg-slate-800 text-green-300 rounded-lg p-3 overflow-x-auto max-h-48 font-mono">
+                                  <pre className="text-xs bg-slate-800 dark:bg-gray-900 text-green-300 rounded-lg p-3 overflow-x-auto max-h-48 font-mono">
                                     {ep.csharpCode}
                                   </pre>
                                 </div>
@@ -784,7 +784,7 @@ const CrudEndpointManager: React.FC = () => {
 
               {/* Footer info */}
               {selectedTableEndpoints.length > 0 && (
-                <div className="border-t border-slate-200 px-2 py-1 bg-slate-50 flex items-center gap-4 text-xs text-slate-500">
+                <div className="border-t border-slate-200 dark:border-gray-700 px-2 py-1 bg-slate-50 dark:bg-gray-800 flex items-center gap-4 text-xs text-slate-500 dark:text-gray-400">
                   <span className="flex items-center gap-1">
                     <FaCheckCircle className="text-green-400" />
                     {selectedTableEndpoints.filter((e) => e.isActive).length} {translate('::App.DeveloperKit.CrudEndpoints.ActiveCount')}
diff --git a/ui/src/views/developerKit/DynamicServiceEditor.tsx b/ui/src/views/developerKit/DynamicServiceEditor.tsx
index dae11d2..d6a7e6f 100644
--- a/ui/src/views/developerKit/DynamicServiceEditor.tsx
+++ b/ui/src/views/developerKit/DynamicServiceEditor.tsx
@@ -121,7 +121,9 @@ const DynamicServiceEditor: React.FC = () => {
     } catch (error: any) {
       setCompileResult({
         success: false,
-        errorMessage: error.response?.data?.message || translate('::App.DeveloperKit.DynamicServices.Editor.CompileError'),
+        errorMessage:
+          error.response?.data?.message ||
+          translate('::App.DeveloperKit.DynamicServices.Editor.CompileError'),
         compilationTimeMs: 0,
         hasWarnings: false,
         errors: [],
@@ -163,7 +165,9 @@ const DynamicServiceEditor: React.FC = () => {
     } catch (error: any) {
       setPublishResult({
         success: false,
-        errorMessage: error.response?.data?.message || translate('::App.DeveloperKit.DynamicServices.Editor.PublishError'),
+        errorMessage:
+          error.response?.data?.message ||
+          translate('::App.DeveloperKit.DynamicServices.Editor.PublishError'),
       })
     } finally {
       setIsPublishing(false)
@@ -175,7 +179,9 @@ const DynamicServiceEditor: React.FC = () => {
     alert(translate('::App.DeveloperKit.DynamicServices.Editor.CodeCopied'))
   }
 
-  const pageTitle = id ? translate('::App.DeveloperKit.DynamicServices.Editor.EditTitle') : translate('::App.DeveloperKit.DynamicServices.Editor.NewTitle')
+  const pageTitle = id
+    ? translate('::App.DeveloperKit.DynamicServices.Editor.EditTitle')
+    : translate('::App.DeveloperKit.DynamicServices.Editor.NewTitle')
 
   if (isLoading) {
     return (
@@ -192,34 +198,38 @@ const DynamicServiceEditor: React.FC = () => {
       <Helmet titleTemplate={`%s | ${APP_NAME}`} title={pageTitle} defaultTitle={APP_NAME} />
 
       {/* Header */}
-      <div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
-        <div className="flex items-center justify-between px-4 py-3">
+      <div className="bg-white dark:bg-gray-900 shadow-lg border-b border-slate-200 dark:border-gray-700 sticky top-0 z-10">
+        <div className="flex items-center justify-between px-1 py-3">
           {/* Left: back + icon + title */}
           <div className="flex items-center gap-3">
-            <Link
-              to={ROUTES_ENUM.protected.saas.developerKit.dynamicServices}
-              className="flex items-center gap-2 text-slate-600 text-black px-4 py-2 rounded-lg hover:text-slate-700 transition-colors"
-            >
-              <FaArrowLeft className="w-3.5 h-3.5" />
-              {translate('::App.DeveloperKit.DynamicServices.Editor.BackToServices')}
-            </Link>
-            <div className="h-6 w-px bg-slate-300"></div>
             <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white shrink-0">
               <FaCode className="w-4 h-4" />
             </div>
             <div>
-              <h1 className="font-semibold text-slate-800 text-sm leading-tight">{pageTitle}</h1>
-              <p className="text-xs text-slate-500 leading-tight">
-                {id ? translate('::App.DeveloperKit.DynamicServices.Editor.EditSubtitle') : translate('::App.DeveloperKit.DynamicServices.Editor.NewSubtitle')}
+              <h1 className="font-semibold text-slate-800 dark:text-gray-100 text-sm leading-tight">
+                {pageTitle}
+              </h1>
+              <p className="text-xs text-slate-500 dark:text-gray-400 leading-tight">
+                {id
+                  ? translate('::App.DeveloperKit.DynamicServices.Editor.EditSubtitle')
+                  : translate('::App.DeveloperKit.DynamicServices.Editor.NewSubtitle')}
               </p>
             </div>
           </div>
 
           {/* Right: action buttons + swagger + publish */}
           <div className="flex items-center gap-2">
+            <Link
+              to={ROUTES_ENUM.protected.saas.developerKit.dynamicServices}
+              className="flex items-center gap-2 text-slate-600 dark:text-gray-300 text-black dark:text-white px-4 py-2 rounded-lg hover:text-slate-700 dark:hover:text-gray-100 transition-colors"
+            >
+              <FaArrowLeft className="w-3.5 h-3.5" />
+              {translate('::App.DeveloperKit.DynamicServices.Editor.BackToServices')}
+            </Link>
+            <div className="h-6 w-px bg-slate-300 dark:bg-gray-700"></div>
             <button
               onClick={copyCode}
-              className="flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
+              className="flex items-center gap-2 px-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-slate-600 dark:text-gray-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
             >
               <FaCopy className="w-3.5 h-3.5" />
               {translate('::App.DeveloperKit.DynamicServices.Editor.CopyCode')}
@@ -228,27 +238,31 @@ const DynamicServiceEditor: React.FC = () => {
             <button
               onClick={handleTestCompile}
               disabled={isCompiling || !code.trim()}
-              className="flex items-center gap-2 bg-orange-500 text-white px-4 py-2  rounded-lg hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex items-center gap-2 bg-orange-500 text-white px-4 py-2  rounded-lg hover:bg-orange-600 dark:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {isCompiling ? (
                 <FaSpinner className="w-3.5 h-3.5 animate-spin" />
               ) : (
                 <FaPlay className="w-3.5 h-3.5" />
               )}
-              {isCompiling ? translate('::App.DeveloperKit.DynamicServices.Editor.Compiling') : translate('::App.DeveloperKit.DynamicServices.Editor.TestCompile')}
+              {isCompiling
+                ? translate('::App.DeveloperKit.DynamicServices.Editor.Compiling')
+                : translate('::App.DeveloperKit.DynamicServices.Editor.TestCompile')}
             </button>
 
             <button
               onClick={handlePublish}
               disabled={isPublishing}
-              className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:bg-emerald-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {isPublishing ? (
                 <FaSpinner className="w-3.5 h-3.5 animate-spin" />
               ) : (
                 <FaSave className="w-3.5 h-3.5" />
               )}
-              {isPublishing ? translate('::App.DeveloperKit.DynamicServices.Editor.Publishing') : translate('::App.DeveloperKit.DynamicServices.Editor.Publish')}
+              {isPublishing
+                ? translate('::App.DeveloperKit.DynamicServices.Editor.Publishing')
+                : translate('::App.DeveloperKit.DynamicServices.Editor.Publish')}
             </button>
           </div>
         </div>
@@ -259,8 +273,8 @@ const DynamicServiceEditor: React.FC = () => {
         <div
           className={`flex items-start gap-3 rounded-lg border px-4 py-3 text-sm ${
             compileResult.success
-              ? 'bg-emerald-50 border-emerald-200 text-emerald-800'
-              : 'bg-red-50 border-red-200 text-red-800'
+              ? 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-700 text-emerald-800 dark:text-emerald-300'
+              : 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-800 dark:text-red-300'
           }`}
         >
           {compileResult.success ? (
@@ -270,13 +284,16 @@ const DynamicServiceEditor: React.FC = () => {
           )}
           <div className="flex-1">
             <span className="font-medium">
-              {compileResult.success ? translate('::App.DeveloperKit.DynamicServices.Editor.CompileSuccess') : translate('::App.DeveloperKit.DynamicServices.Editor.CompileFailed')}
+              {compileResult.success
+                ? translate('::App.DeveloperKit.DynamicServices.Editor.CompileSuccess')
+                : translate('::App.DeveloperKit.DynamicServices.Editor.CompileFailed')}
             </span>
             {!compileResult.success && compileResult.errors && compileResult.errors.length > 0 && (
               <ul className="mt-1 space-y-0.5">
                 {compileResult.errors.map((e, i) => (
                   <li key={i} className="text-xs font-mono">
-                    [{e.code}] {translate('::App.DeveloperKit.DynamicServices.Editor.Line')} {e.line}: {e.message}
+                    [{e.code}] {translate('::App.DeveloperKit.DynamicServices.Editor.Line')}{' '}
+                    {e.line}: {e.message}
                   </li>
                 ))}
               </ul>
@@ -289,10 +306,12 @@ const DynamicServiceEditor: React.FC = () => {
       )}
 
       {publishResult && !publishResult.success && (
-        <div className="flex items-start gap-3 rounded-lg border bg-red-50 border-red-200 text-red-800 px-4 py-3 text-sm">
+        <div className="flex items-start gap-3 rounded-lg border bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-800 dark:text-red-300 px-4 py-3 text-sm">
           <FaExclamationCircle className="w-4 h-4 mt-0.5 shrink-0 text-red-600" />
           <div>
-            <span className="font-medium">{translate('::App.DeveloperKit.DynamicServices.Editor.PublishFailed')}</span>
+            <span className="font-medium">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.PublishFailed')}
+            </span>
             {publishResult.errorMessage && (
               <p className="text-xs mt-0.5">{publishResult.errorMessage}</p>
             )}
@@ -303,16 +322,20 @@ const DynamicServiceEditor: React.FC = () => {
       {/* Two-panel layout */}
       <div className="flex flex-col xl:flex-row gap-4 items-stretch xl:items-start">
         {/* LEFT PANEL — Servis Ayarları */}
-        <div className="w-full xl:w-1/4 shrink-0 bg-white rounded-lg border border-slate-200 p-5 space-y-4">
+        <div className="w-full xl:w-1/4 shrink-0 bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 p-5 space-y-4">
           {/* Panel header */}
-          <div className="flex items-center gap-2 pb-3 border-b border-slate-100">
+          <div className="flex items-center gap-2 pb-3 border-b border-slate-100 dark:border-gray-700">
             <FaCog className="w-4 h-4 text-blue-500" />
-            <h2 className="font-semibold text-slate-700 text-sm">{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceSettings')}</h2>
+            <h2 className="font-semibold text-slate-700 dark:text-gray-100 text-sm">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.ServiceSettings')}
+            </h2>
           </div>
 
           {/* Servis Adı */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceName')}</label>
+            <label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.ServiceName')}
+            </label>
             <input
               type="text"
               value={serviceName}
@@ -320,53 +343,76 @@ const DynamicServiceEditor: React.FC = () => {
                 setServiceName(e.target.value)
                 setSubmitted(false)
               }}
-              placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.ServiceNamePlaceholder')}
-              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors ${
-                serviceNameError ? 'border-red-500 bg-red-50' : 'border-slate-300'
+              placeholder={translate(
+                '::App.DeveloperKit.DynamicServices.Editor.ServiceNamePlaceholder',
+              )}
+              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${
+                serviceNameError
+                  ? 'border-red-500 bg-red-50 dark:bg-red-900/20'
+                  : 'border-slate-300 dark:border-gray-700'
               }`}
+              autoFocus
             />
-            {serviceNameError && <p className="text-red-500 text-xs mt-1">{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceNameRequired')}</p>}
+            {serviceNameError && (
+              <p className="text-red-500 dark:text-red-400 text-xs mt-1">
+                {translate('::App.DeveloperKit.DynamicServices.Editor.ServiceNameRequired')}
+              </p>
+            )}
           </div>
 
           {/* Görünen Ad */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.DisplayName')}</label>
+            <label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.DisplayName')}
+            </label>
             <input
               type="text"
               value={displayName}
               onChange={(e) => setDisplayName(e.target.value)}
-              placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.DisplayNamePlaceholder')}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder={translate(
+                '::App.DeveloperKit.DynamicServices.Editor.DisplayNamePlaceholder',
+              )}
+              className="w-full px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
             />
           </div>
 
           {/* Açıklama */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.Description')}</label>
+            <label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.Description')}
+            </label>
             <input
               type="text"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.DescriptionPlaceholder')}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder={translate(
+                '::App.DeveloperKit.DynamicServices.Editor.DescriptionPlaceholder',
+              )}
+              className="w-full px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
             />
           </div>
 
           {/* Ana Entity Türü */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityType')}</label>
+            <label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityType')}
+            </label>
             <input
               type="text"
               value={primaryEntityType}
               onChange={(e) => setPrimaryEntityType(e.target.value)}
-              placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityTypePlaceholder')}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder={translate(
+                '::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityTypePlaceholder',
+              )}
+              className="w-full px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
             />
           </div>
 
           {/* Aktif */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.IsActive')}</label>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              {translate('::App.DeveloperKit.DynamicServices.Editor.IsActive')}
+            </label>
             <input
               type="checkbox"
               checked={isActive}
@@ -380,15 +426,22 @@ const DynamicServiceEditor: React.FC = () => {
         <div className="w-full flex-1 min-w-0 space-y-4">
           {/* Monaco Editor */}
           <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
-            <div className="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
+            <div className="px-5 py-3 bg-slate-50 dark:bg-gray-800 border-b border-slate-200 dark:border-gray-700 flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <FaCode className="w-4 h-4 text-slate-500" />
-                <h3 className="font-medium text-slate-700 text-sm">{translate('::App.DeveloperKit.DynamicServices.Editor.CodeEditor')}</h3>
+                <FaCode className="w-4 h-4 text-slate-500 dark:text-gray-400" />
+                <h3 className="font-medium text-slate-700 dark:text-gray-100 text-sm">
+                  {translate('::App.DeveloperKit.DynamicServices.Editor.CodeEditor')}
+                </h3>
               </div>
-              <div className="flex items-center gap-2 text-xs text-slate-500">
-                <span>{translate('::App.DeveloperKit.DynamicServices.Editor.LineCount')} {code.split('\n').length}</span>
+              <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-gray-400">
+                <span>
+                  {translate('::App.DeveloperKit.DynamicServices.Editor.LineCount')}{' '}
+                  {code.split('\n').length}
+                </span>
                 <span className="text-slate-300">|</span>
-                <span>{translate('::App.DeveloperKit.DynamicServices.Editor.CharCount')} {code.length}</span>
+                <span>
+                  {translate('::App.DeveloperKit.DynamicServices.Editor.CharCount')} {code.length}
+                </span>
               </div>
             </div>
             <div style={{ height: '560px' }}>
diff --git a/ui/src/views/developerKit/DynamicServiceManager.tsx b/ui/src/views/developerKit/DynamicServiceManager.tsx
index 791158f..2d8d1e8 100644
--- a/ui/src/views/developerKit/DynamicServiceManager.tsx
+++ b/ui/src/views/developerKit/DynamicServiceManager.tsx
@@ -137,17 +137,17 @@ const DynamicServiceManager: React.FC = () => {
             placeholder={translate('::App.DeveloperKit.DynamicServices.SearchPlaceholder')}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
           />
         </div>
         <div className="flex items-center gap-2 w-full lg:w-auto">
-          <FaFilter className="w-4 h-4 text-slate-500" />
+          <FaFilter className="w-4 h-4 text-slate-500 dark:text-gray-400" />
           <select
             value={filterStatus}
             onChange={(e) =>
               setFilterStatus(e.target.value as 'all' | 'Success' | 'Failed' | 'Pending')
             }
-            className="w-full lg:w-auto px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full lg:w-auto px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
           >
             <option value="all">{translate('::App.DeveloperKit.DynamicServices.FilterAll')}</option>
             <option value="Success">{translate('::App.DeveloperKit.DynamicServices.Successful')}</option>
@@ -158,7 +158,7 @@ const DynamicServiceManager: React.FC = () => {
         <div className="w-full sm:w-auto">
           <Link
             to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesNew}
-            className="w-full sm:w-auto justify-center flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+            className="w-full sm:w-auto justify-center flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
           >
             <FaPlus className="w-4 h-4" />
             {translate('::App.DeveloperKit.DynamicServices.NewService')}
@@ -167,7 +167,7 @@ const DynamicServiceManager: React.FC = () => {
         <div className="w-full sm:w-auto">
           <button
             onClick={openSwagger}
-            className="w-full sm:w-auto justify-center flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
+            className="w-full sm:w-auto justify-center flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 transition-colors"
           >
             <FaExternalLinkAlt className="w-3 h-3" />
             Swagger
@@ -185,35 +185,35 @@ const DynamicServiceManager: React.FC = () => {
           {filteredServices.map((service) => (
             <div
               key={service.id}
-              className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
+              className="bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
             >
               <div className="p-6">
                 <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-1">
-                      <h3 className="text-base font-semibold text-slate-900">{service.name}</h3>
+                      <h3 className="text-base font-semibold text-slate-900 dark:text-gray-100">{service.name}</h3>
                       <div
                         className={`w-2 h-2 rounded-full ${
                           service.compilationStatus === 'Success'
                             ? 'bg-emerald-500'
-                            : 'bg-slate-300'
+                            : 'bg-slate-300 dark:bg-gray-700'
                         }`}
                       />
                     </div>
                     {service.displayName && (
-                      <p className="text-slate-500 text-sm mb-1">{service.displayName}</p>
+                      <p className="text-slate-500 dark:text-gray-400 text-sm mb-1">{service.displayName}</p>
                     )}
                     <span
-                      className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium mb-3 ${statusBadge(service.compilationStatus)}`}
+                      className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium mb-3 ${statusBadge(service.compilationStatus)} dark:bg-opacity-80`}
                     >
                       {service.compilationStatus} · v{service.version}
                     </span>
                     {service.description && (
-                      <p className="text-slate-500 text-sm">{service.description}</p>
+                      <p className="text-slate-500 dark:text-gray-400 text-sm">{service.description}</p>
                     )}
                   </div>
                   {service.lastSuccessfulCompilation && (
-                    <div className="flex items-center gap-1 text-xs text-slate-400 sm:ml-4 whitespace-nowrap">
+                    <div className="flex items-center gap-1 text-xs text-slate-400 dark:text-gray-400 sm:ml-4 whitespace-nowrap">
                       <FaCalendarAlt className="w-3 h-3" />
                       <span>
                         {new Date(service.lastSuccessfulCompilation).toLocaleDateString()}
@@ -223,20 +223,20 @@ const DynamicServiceManager: React.FC = () => {
                 </div>
 
                 {/* Actions */}
-                <div className="flex items-center justify-end pt-3 border-t border-slate-100 gap-1 mt-4">
+                <div className="flex items-center justify-end pt-3 border-t border-slate-100 dark:border-gray-700 gap-1 mt-4">
                   <Link
                     to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesEdit.replace(
                       ':id',
                       service.id,
                     )}
-                    className="p-2 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                    className="p-2 text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-800 rounded transition-colors"
                     title={translate('::App.DeveloperKit.DynamicServices.EditTooltip')}
                   >
                     <FaRegEdit className="w-4 h-4" />
                   </Link>
                   <button
                     onClick={() => deleteService(service.id)}
-                    className="p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                    className="p-2 text-slate-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-gray-800 rounded transition-colors"
                     title={translate('::App.DeveloperKit.DynamicServices.DeleteTooltip')}
                   >
                     <FaTrashAlt className="w-4 h-4" />
@@ -248,13 +248,13 @@ const DynamicServiceManager: React.FC = () => {
         </div>
       ) : (
         <div className="text-center py-12">
-          <div className="bg-slate-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
-            <FaCode className="w-8 h-8 text-slate-400" />
+          <div className="bg-slate-100 dark:bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+            <FaCode className="w-8 h-8 text-slate-400 dark:text-gray-500" />
           </div>
-          <h3 className="text-lg font-medium text-slate-900 mb-2">
+          <h3 className="text-lg font-medium text-slate-900 dark:text-gray-100 mb-2">
             {searchTerm || filterStatus !== 'all' ? translate('::App.DeveloperKit.DynamicServices.NoResults') : translate('::App.DeveloperKit.DynamicServices.NoServicesYet')}
           </h3>
-          <p className="text-slate-500 mb-6">
+          <p className="text-slate-500 dark:text-gray-400 mb-6">
             {searchTerm || filterStatus !== 'all'
               ? translate('::App.DeveloperKit.DynamicServices.TryChangingFilter')
               : translate('::App.DeveloperKit.DynamicServices.GetStarted')}
@@ -262,7 +262,7 @@ const DynamicServiceManager: React.FC = () => {
           {!searchTerm && filterStatus === 'all' && (
             <Link
               to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesNew}
-              className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+              className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
             >
               <FaPlus className="w-4 h-4" />
               {translate('::App.DeveloperKit.DynamicServices.CreateNewService')}
diff --git a/ui/src/views/developerKit/SqlObjectExplorer.tsx b/ui/src/views/developerKit/SqlObjectExplorer.tsx
index eb0d4c3..75661b1 100644
--- a/ui/src/views/developerKit/SqlObjectExplorer.tsx
+++ b/ui/src/views/developerKit/SqlObjectExplorer.tsx
@@ -392,12 +392,12 @@ const SqlObjectExplorer = ({
           placeholder={translate('::App.Platform.Search')}
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
-          className="flex-1 px-3 py-1.5 text-sm border rounded-md bg-white dark:bg-gray-700 dark:border-gray-600"
+          className="flex-1 px-3 py-1.5 text-sm border rounded-md bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100"
         />
         <button
           onClick={loadObjects}
           disabled={loading || !dataSource}
-          className="px-3 py-1.5 text-sm border rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+          className="px-3 py-1.5 text-sm border rounded-md border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
           title={translate('::App.Platform.Refresh')}
         >
           <FaSyncAlt className={loading ? 'animate-spin' : ''} />
diff --git a/ui/src/views/developerKit/SqlQueryManager.tsx b/ui/src/views/developerKit/SqlQueryManager.tsx
index c3c5a05..4321ad8 100644
--- a/ui/src/views/developerKit/SqlQueryManager.tsx
+++ b/ui/src/views/developerKit/SqlQueryManager.tsx
@@ -893,7 +893,7 @@ GO`,
             <div className="flex flex-wrap items-center gap-2 sm:gap-3">
               <FaDatabase className="text-lg text-blue-500" />
               <select
-                className="border border-gray-300 rounded px-2 py-1 max-w-full"
+                className="border border-gray-300 rounded px-2 py-1 max-w-full dark:bg-gray-700 dark:border-gray-600"
                 disabled={state.selectedDataSource?.length === 0}
                 value={state.selectedDataSource || ''}
                 onChange={(e) => {
diff --git a/ui/src/views/developerKit/SqlResultsGrid.tsx b/ui/src/views/developerKit/SqlResultsGrid.tsx
index d04ea53..cfa4702 100644
--- a/ui/src/views/developerKit/SqlResultsGrid.tsx
+++ b/ui/src/views/developerKit/SqlResultsGrid.tsx
@@ -39,7 +39,7 @@ const SqlResultsGrid = ({ result }: SqlResultsGridProps) => {
     return (
       <div className="h-full flex flex-col">
         <div className="flex items-center gap-2 mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
-          <FaTimesCircle className="text-red-500 text-xl" />
+          <FaTimesCircle className="text-red-500 dark:text-red-400 text-xl" />
           <div>
             <div className="font-semibold text-red-700 dark:text-red-400">
               {translate('::App.Platform.Error')}
diff --git a/ui/src/views/developerKit/SqlTableDesignerDialog.tsx b/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
index 95f7a8d..c056bb6 100644
--- a/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
+++ b/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
@@ -878,7 +878,7 @@ function SimpleMenuTreeSelect({
   return (
     <div
       className={`rounded-lg border ${
-        invalid ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
+        invalid ? 'border-red-500 dark:border-red-700' : 'border-gray-300 dark:border-gray-600'
       } bg-white dark:bg-gray-800 overflow-hidden`}
     >
       <div className="h-56 overflow-y-auto py-1">
diff --git a/ui/src/views/forum/Forum.tsx b/ui/src/views/forum/Forum.tsx
index f0320a9..dc71295 100644
--- a/ui/src/views/forum/Forum.tsx
+++ b/ui/src/views/forum/Forum.tsx
@@ -61,10 +61,10 @@ export function Forum() {
 
       {error && (
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
+          <div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded relative">
             <strong className="font-bold">Error: </strong>
             <span className="block sm:inline">{error}</span>
-            <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
+            <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3 text-red-700 dark:text-red-200">
               <span className="sr-only">Dismiss</span>×
             </Button>
           </div>
diff --git a/ui/src/views/forum/Management.tsx b/ui/src/views/forum/Management.tsx
index 2cfc0d8..3ae4628 100644
--- a/ui/src/views/forum/Management.tsx
+++ b/ui/src/views/forum/Management.tsx
@@ -67,10 +67,10 @@ export function Management() {
 
       {error && (
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
+          <div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded relative">
             <strong className="font-bold">Error: </strong>
             <span className="block sm:inline">{error}</span>
-            <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
+            <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3 text-red-700 dark:text-red-200">
               <span className="sr-only">Dismiss</span>×
             </Button>
           </div>
diff --git a/ui/src/views/forum/admin/AdminView.tsx b/ui/src/views/forum/admin/AdminView.tsx
index 0c5f07b..217ddde 100644
--- a/ui/src/views/forum/admin/AdminView.tsx
+++ b/ui/src/views/forum/admin/AdminView.tsx
@@ -104,7 +104,7 @@ export function AdminView({
   return (
     <div className="flex flex-col lg:flex-row gap-4 mt-3">
       {/* Sidebar Navigation */}
-      <div className="lg:w-64 flex-shrink-0 p-4 bg-gray-50">
+      <div className="lg:w-64 flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
         <nav className="space-y-2">
           {navigationItems.map((item) => {
             const Icon = item.icon
@@ -116,9 +116,13 @@ export function AdminView({
                 color="blue-500"
                 active={isActive}
                 onClick={() => setActiveSection(item.id)}
-                className="w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors"
+                className={`w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors
+                  ${isActive
+                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
+                    : 'bg-transparent text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}
+                `}
               >
-                <Icon className="w-5 h-5" />
+                <Icon className={`w-5 h-5 ${isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`} />
                 <span className="font-medium">{item.label}</span>
               </Button>
             )
@@ -127,7 +131,7 @@ export function AdminView({
       </div>
 
       {/* Main Content */}
-      <div className="flex-1">
+      <div className="flex-1 bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
         {activeSection === 'stats' && (
           <AdminStats categories={categories} topics={topics} posts={posts} />
         )}
diff --git a/ui/src/views/forum/admin/CategoryManagement.tsx b/ui/src/views/forum/admin/CategoryManagement.tsx
index dc86b5c..cc09d1a 100644
--- a/ui/src/views/forum/admin/CategoryManagement.tsx
+++ b/ui/src/views/forum/admin/CategoryManagement.tsx
@@ -163,7 +163,7 @@ export function CategoryManagement({
     <div className="space-y-3">
       {/* Create/Edit Form */}
       {showCreateForm && (
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
           <h3 className="text-lg font-semibold text-gray-900 mb-4">
             {editingCategory
               ? translate('::App.Forum.CategoryManagement.EditCategory')
@@ -212,7 +212,7 @@ export function CategoryManagement({
                     >
                       <Field
                         name="name"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                        className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                       />
                     </FormItem>
 
@@ -224,7 +224,7 @@ export function CategoryManagement({
                     >
                       <Field
                         name="slug"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                        className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                       />
                     </FormItem>
                   </div>
@@ -237,7 +237,7 @@ export function CategoryManagement({
                   >
                     <Field
                       name="description"
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                      className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                       textArea="true"
                       component={Input}
                     />
@@ -252,7 +252,7 @@ export function CategoryManagement({
                     >
                       <Field
                         name="icon"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                        className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                         placeholder="💬"
                       />
                     </FormItem>
@@ -265,7 +265,7 @@ export function CategoryManagement({
                     >
                       <Field
                         name="displayOrder"
-                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                        className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                         placeholder="💬"
                         type="number"
                       />
@@ -306,9 +306,9 @@ export function CategoryManagement({
       )}
 
       {/* Categories List */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-        <div className="flex items-center justify-between px-3 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="flex items-center justify-between px-3 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {translate('::App.Forum.CategoryManagement.Categories')} ({categories.length})
           </h3>
           <Button
@@ -316,7 +316,7 @@ export function CategoryManagement({
             variant="solid"
             onClick={() => setShowCreateForm(true)}
             disabled={loading}
-            className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+            className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
           >
             <FaPlus className="w-4 h-4" />
             <span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span>
@@ -325,36 +325,36 @@ export function CategoryManagement({
 
         {loading ? (
           <div className="p-8 text-center">
-            <FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
-            <p className="text-gray-500">
+            <FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+            <p className="text-gray-500 dark:text-gray-400">
               {translate('::App.Forum.CategoryManagement.Loadingcategories')}
             </p>
           </div>
         ) : (
-          <div className="divide-y divide-gray-200">
+          <div className="divide-y divide-gray-200 dark:divide-gray-800">
             {categories
               .sort((a, b) => a.displayOrder - b.displayOrder)
               .map((category) => (
-                <div key={category.id} className="p-6 hover:bg-gray-50 transition-colors">
+                <div key={category.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                   <div className="flex items-center justify-between">
                     <div className="flex items-start space-x-4">
                       <div className="text-2xl">{category.icon}</div>
                       <div>
                         <div className="flex items-center space-x-2 mb-1">
-                          <h4 className="text-lg font-semibold text-gray-900">{category.name}</h4>
+                          <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{category.name}</h4>
                           {!category.isActive && (
-                            <span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">
+                            <span className="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs rounded-full">
                               Inactive
                             </span>
                           )}
                           {category.isLocked && (
-                            <span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">
+                            <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs rounded-full">
                               Locked
                             </span>
                           )}
                         </div>
-                        <p className="text-gray-600 mb-2">{category.description}</p>
-                        <div className="flex items-center space-x-4 text-sm text-gray-500">
+                        <p className="text-gray-600 dark:text-gray-300 mb-2">{category.description}</p>
+                        <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                           <span>{category.topicCount} topics</span>
                           <span>{category.postCount} posts</span>
                           <span>Order: {category.displayOrder}</span>
@@ -368,8 +368,8 @@ export function CategoryManagement({
                         onClick={() => handleToggleActive(category)}
                         className={`p-1 rounded-lg transition-colors ${
                           category.isActive
-                            ? 'text-green-600 hover:bg-green-100'
-                            : 'text-red-600 hover:bg-red-100'
+                            ? 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
+                            : 'text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900'
                         }`}
                         title={category.isActive ? 'Hide Category' : 'Show Category'}
                       >
@@ -385,8 +385,8 @@ export function CategoryManagement({
                         onClick={() => handleToggleLocked(category)}
                         className={`p-1 rounded-lg transition-colors ${
                           category.isLocked
-                            ? 'text-yellow-600 hover:bg-yellow-100'
-                            : 'text-green-600 hover:bg-green-100'
+                            ? 'text-yellow-600 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900'
+                            : 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
                         }`}
                         title={category.isLocked ? 'Unlock Category' : 'Lock Category'}
                       >
@@ -400,7 +400,7 @@ export function CategoryManagement({
                       <Button
                         size="xs"
                         onClick={() => handleEdit(category)}
-                        className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
+                        className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
                         title={translate('::App.Forum.CategoryManagement.EditCategory')}
                       >
                         <FaEdit className="w-3 h-3" />
@@ -409,7 +409,7 @@ export function CategoryManagement({
                       <Button
                         size="xs"
                         onClick={() => confirmDeleteCategory(category)}
-                        className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
+                        className="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 rounded-lg transition-colors"
                         title={translate('::App.Forum.CategoryManagement.DeleteCategory')}
                       >
                         <FaTrash className="w-3 h-3" />
diff --git a/ui/src/views/forum/admin/Dashboard.tsx b/ui/src/views/forum/admin/Dashboard.tsx
index 563f6fc..3c7c11d 100644
--- a/ui/src/views/forum/admin/Dashboard.tsx
+++ b/ui/src/views/forum/admin/Dashboard.tsx
@@ -116,17 +116,17 @@ export function AdminStats({ categories, topics, posts }: AdminStatsProps) {
       </div>
 
       {/* Recent Activity */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
           {translate('::App.Forum.Dashboard.RecentActivity')}
         </h3>
         <div className="space-y-4">
           {latestActivities.map((activity, index) => (
-            <div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
+            <div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
               <div className={`w-2 h-2 ${activity.color} rounded-full mt-2`} />
               <div>
-                <p className="text-sm text-gray-900">{activity.message}</p>
-                <p className="text-xs text-gray-500">{dayjs(activity.date).fromNow()}</p>
+                <p className="text-sm text-gray-900 dark:text-white">{activity.message}</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">{dayjs(activity.date).fromNow()}</p>
               </div>
             </div>
           ))}
diff --git a/ui/src/views/forum/admin/PostManagement.tsx b/ui/src/views/forum/admin/PostManagement.tsx
index c955da1..150674c 100644
--- a/ui/src/views/forum/admin/PostManagement.tsx
+++ b/ui/src/views/forum/admin/PostManagement.tsx
@@ -162,7 +162,7 @@ export function PostManagement({
     <div className="space-y-3">
       {/* Create/Edit Form */}
       {showCreateForm && (
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
           <h3 className="text-lg font-semibold text-gray-900 mb-4">
             {editingPost
               ? translate('::App.Forum.PostManagement.EditPost')
@@ -206,7 +206,7 @@ export function PostManagement({
                     <Field
                       as="select"
                       name="topicId"
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                      className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                     >
                       <option value="">Select a topic</option>
                       {topics.map((topic) => (
@@ -330,15 +330,15 @@ export function PostManagement({
       )}
 
       {/* Posts List */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-        <div className="flex items-center justify-between px-3 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">Posts ({posts.length})</h3>
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="flex items-center justify-between px-3 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Posts ({posts.length})</h3>
           <Button
             size="sm"
             variant="solid"
             onClick={() => setShowCreateForm(true)}
             disabled={loading}
-            className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+            className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
           >
             <FaPlus className="w-4 h-4" />
             <span>{translate('::App.Forum.PostManagement.AddPost')}</span>
@@ -347,23 +347,23 @@ export function PostManagement({
 
         {loading ? (
           <div className="p-8 text-center">
-            <FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
-            <p className="text-gray-500">{translate('::App.Forum.PostManagement.Loadingtopics')}</p>
+            <FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+            <p className="text-gray-500 dark:text-gray-400">{translate('::App.Forum.PostManagement.Loadingtopics')}</p>
           </div>
         ) : (
-          <div className="divide-y divide-gray-200">
+          <div className="divide-y divide-gray-200 dark:divide-gray-800">
             {posts
               .sort(
                 (a, b) => new Date(b.creationTime).getTime() - new Date(a.creationTime).getTime(),
               )
               .map((post) => (
-                <div key={post.id} className="p-6 hover:bg-gray-50 transition-colors">
+                <div key={post.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                   <div className="flex items-start justify-between">
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center space-x-2 mb-2">
-                        <h4 className="text-sm font-semibold text-gray-900">{post.authorName}</h4>
+                        <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{post.authorName}</h4>
                         {post.isAcceptedAnswer && (
-                          <div className="flex items-center space-x-1 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-xs">
+                          <div className="flex items-center space-x-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 px-2 py-1 rounded-full text-xs">
                             <FaCheckCircle className="w-3 h-3" />
                             <span>Accepted Answer</span>
                           </div>
@@ -371,17 +371,17 @@ export function PostManagement({
                       </div>
 
                       <div className="mb-3">
-                        <p className="text-xs text-gray-500 mb-1">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                           Reply to:{' '}
                           <span className="font-medium">{getTopicTitle(post.topicId)}</span>
                         </p>
                         <p
-                          className="text-gray-700 line-clamp-3"
+                          className="text-gray-700 dark:text-gray-200 line-clamp-3"
                           dangerouslySetInnerHTML={{ __html: post.content }}
                         ></p>
                       </div>
 
-                      <div className="flex items-center justify-between text-sm text-gray-500">
+                      <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                         <div className="flex items-center space-x-4">
                           <span>{formatDate(post.creationTime)}</span>
                           <div className="flex items-center space-x-1">
@@ -398,8 +398,8 @@ export function PostManagement({
                         onClick={() => handleToggleAcceptedAnswer(post)}
                         className={`p-1 rounded-lg transition-colors ${
                           post.isAcceptedAnswer
-                            ? 'text-emerald-600 hover:bg-emerald-100'
-                            : 'text-gray-400 hover:bg-gray-100'
+                            ? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900'
+                            : 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
                         }`}
                         title={
                           post.isAcceptedAnswer
@@ -417,7 +417,7 @@ export function PostManagement({
                       <Button
                         size="xs"
                         onClick={() => handleEdit(post)}
-                        className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
+                        className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
                         title={translate('::App.Forum.PostManagement.EditPost')}
                       >
                         <FaEdit className="w-3 h-3" />
@@ -426,7 +426,7 @@ export function PostManagement({
                       <Button
                         size="xs"
                         onClick={() => confirmDeletePost(post)}
-                        className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
+                        className="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 rounded-lg transition-colors"
                         title={translate('::App.Forum.PostManagement.DeletePost')}
                       >
                         <FaTrashAlt className="w-3 h-3" />
diff --git a/ui/src/views/forum/admin/TopicManagement.tsx b/ui/src/views/forum/admin/TopicManagement.tsx
index d238269..0dab074 100644
--- a/ui/src/views/forum/admin/TopicManagement.tsx
+++ b/ui/src/views/forum/admin/TopicManagement.tsx
@@ -204,7 +204,7 @@ export function TopicManagement({
     <div className="space-y-3">
       {/* Create/Edit Form */}
       {showCreateForm && (
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
           <h3 className="text-lg font-semibold text-gray-900 mb-4">
             {editingTopic
               ? translate('::App.Forum.TopicManagement.EditTopic')
@@ -253,7 +253,7 @@ export function TopicManagement({
                   >
                     <Field
                       name="title"
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                      className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                     />
                   </FormItem>
 
@@ -266,7 +266,7 @@ export function TopicManagement({
                     <Field
                       as="select"
                       name="categoryId"
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                      className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                     >
                       <option value="">Select a category</option>
                       {categories.map((cat) => (
@@ -287,7 +287,7 @@ export function TopicManagement({
                       as="textarea"
                       name="content"
                       rows={6}
-                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
+                      className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                     />
                   </FormItem>
 
@@ -331,9 +331,9 @@ export function TopicManagement({
       )}
 
       {/* Topics List */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-        <div className="flex items-center justify-between px-3 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="flex items-center justify-between px-3 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {translate('::App.Forum.Dashboard.Topics')} ({topics.length})
           </h3>
           <Button
@@ -341,7 +341,7 @@ export function TopicManagement({
             variant="solid"
             onClick={() => setShowCreateForm(true)}
             disabled={loading}
-            className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+            className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
           >
             <FaPlus className="w-4 h-4" />
             <span>{translate('::App.Forum.TopicManagement.AddTopic')}</span>
@@ -350,33 +350,33 @@ export function TopicManagement({
 
         {loading ? (
           <div className="p-8 text-center">
-            <FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
-            <p className="text-gray-500">
+            <FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+            <p className="text-gray-500 dark:text-gray-400">
               {translate('::App.Forum.TopicManagement.Loadingtopics')}
             </p>
           </div>
         ) : (
-          <div className="divide-y divide-gray-200">
+          <div className="divide-y divide-gray-200 dark:divide-gray-800">
             {topics
               .sort(
                 (a, b) => new Date(b.creationTime).getTime() - new Date(a.creationTime).getTime(),
               )
               .map((topic) => (
-                <div key={topic.id} className="p-6 hover:bg-gray-50 transition-colors">
+                <div key={topic.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                   <div className="flex items-start justify-between">
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center space-x-2 mb-2">
-                        {topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500" />}
-                        {topic.isLocked && <FaLock className="w-4 h-4 text-gray-400" />}
-                        {topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500" />}
-                        <h4 className="text-lg font-semibold text-gray-900 line-clamp-1">
+                        {topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500 dark:text-orange-400" />}
+                        {topic.isLocked && <FaLock className="w-4 h-4 text-gray-400 dark:text-gray-500" />}
+                        {topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />}
+                        <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 line-clamp-1">
                           {topic.title}
                         </h4>
                       </div>
 
-                      <p className="text-gray-600 mb-3 line-clamp-2">{topic.content}</p>
+                      <p className="text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">{topic.content}</p>
 
-                      <div className="flex items-center justify-between text-sm text-gray-500">
+                      <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                         <div className="flex items-center space-x-4">
                           <span className="font-medium">{getCategoryName(topic.categoryId)}</span>
                           <span>by {topic.authorName}</span>
@@ -399,8 +399,8 @@ export function TopicManagement({
                         onClick={() => handlePin(topic)}
                         className={`p-1 rounded-lg transition-colors ${
                           topic.isPinned
-                            ? 'text-orange-600 hover:bg-orange-100'
-                            : 'text-gray-400 hover:bg-gray-100'
+                            ? 'text-orange-600 dark:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-900'
+                            : 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
                         }`}
                         title={topic.isPinned ? 'Unpin Topic' : 'Pin Topic'}
                       >
@@ -416,8 +416,8 @@ export function TopicManagement({
                         onClick={() => handleLock(topic)}
                         className={`p-1 rounded-lg transition-colors ${
                           topic.isLocked
-                            ? 'text-yellow-600 hover:bg-yellow-100'
-                            : 'text-green-600 hover:bg-green-100'
+                            ? 'text-yellow-600 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900'
+                            : 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
                         }`}
                         title={topic.isLocked ? 'Unlock Topic' : 'Lock Topic'}
                       >
@@ -433,8 +433,8 @@ export function TopicManagement({
                         onClick={() => handleSolved(topic)}
                         className={`p-1 rounded-lg transition-colors ${
                           topic.isSolved
-                            ? 'text-emerald-600 hover:bg-emerald-100'
-                            : 'text-gray-400 hover:bg-gray-100'
+                            ? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900'
+                            : 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
                         }`}
                         title={topic.isSolved ? 'Mark as Unsolved' : 'Mark as Solved'}
                       >
@@ -448,7 +448,7 @@ export function TopicManagement({
                       <Button
                         size="xs"
                         onClick={() => handleEdit(topic)}
-                        className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
+                        className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
                         title={translate('::App.Forum.TopicManagement.EditTopic')}
                       >
                         <FaEdit className="w-3 h-3" />
@@ -457,7 +457,7 @@ export function TopicManagement({
                       <Button
                         size="xs"
                         onClick={() => confirmDeleteTopic(topic)}
-                        className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
+                        className="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 rounded-lg transition-colors"
                         title={translate('::App.Forum.TopicManagement.DeleteTopic')}
                       >
                         <FaTrashAlt className="w-3 h-3" />
diff --git a/ui/src/views/forum/forum/CreatePostModal.tsx b/ui/src/views/forum/forum/CreatePostModal.tsx
index ccc4118..9e82047 100644
--- a/ui/src/views/forum/forum/CreatePostModal.tsx
+++ b/ui/src/views/forum/forum/CreatePostModal.tsx
@@ -52,14 +52,14 @@ export function CreatePostModal({ onClose, onSubmit, parentPostId }: CreatePostM
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
             {parentPostId
               ? translate('::App.Forum.PostManagement.ReplytoTopic')
               : translate('::App.Forum.PostManagement.NewPost')}
           </h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+          <button onClick={onClose} className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
             <FaTimes className="w-5 h-5" />
           </button>
         </div>
diff --git a/ui/src/views/forum/forum/CreateTopicModal.tsx b/ui/src/views/forum/forum/CreateTopicModal.tsx
index a615b64..fbd0255 100644
--- a/ui/src/views/forum/forum/CreateTopicModal.tsx
+++ b/ui/src/views/forum/forum/CreateTopicModal.tsx
@@ -38,12 +38,12 @@ export function CreateTopicModal({ onClose, onSubmit }: CreateTopicModalProps) {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6">
+      <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
             {translate('::App.Forum.TopicManagement.NewTopic')}
           </h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+          <button onClick={onClose} className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
             <FaTimes className="w-5 h-5" />
           </button>
         </div>
@@ -68,7 +68,7 @@ export function CreateTopicModal({ onClose, onSubmit }: CreateTopicModalProps) {
                     name="title"
                     placeholder="Başlık girin..."
                     autoFocus
-                    className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full text-sm border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     component={Input}
                   />
                 </FormItem>
@@ -85,7 +85,7 @@ export function CreateTopicModal({ onClose, onSubmit }: CreateTopicModalProps) {
                         {...field}
                         rows={6}
                         placeholder="Konu içeriğini yazın..."
-                        className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                        className="w-full text-sm border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                       />
                     )}
                   </Field>
diff --git a/ui/src/views/forum/forum/ForumCategoryCard.tsx b/ui/src/views/forum/forum/ForumCategoryCard.tsx
index c4dd485..8bc1ec5 100644
--- a/ui/src/views/forum/forum/ForumCategoryCard.tsx
+++ b/ui/src/views/forum/forum/ForumCategoryCard.tsx
@@ -24,20 +24,20 @@ export function ForumCategoryCard({ category, onClick }: CategoryCardProps) {
   return (
     <div
       onClick={onClick}
-      className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-200 cursor-pointer group"
+      className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md hover:border-blue-200 dark:hover:border-blue-500 transition-all duration-200 cursor-pointer group"
     >
       <div className="flex items-start justify-between">
         <div className="flex items-start space-x-4 flex-1">
           <div className="text-3xl">{category.icon}</div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center space-x-2 mb-1">
-              <h3 className="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                 {category.name}
               </h3>
-              {category.isLocked && <FaLock className="w-4 h-4 text-gray-400" />}
+              {category.isLocked && <FaLock className="w-4 h-4 text-gray-400 dark:text-gray-500" />}
             </div>
-            <p className="text-gray-600 text-sm mb-3 line-clamp-2">{category.description}</p>
-            <div className="flex items-center space-x-4 text-sm text-gray-500">
+            <p className="text-gray-600 dark:text-gray-400 text-sm mb-3 line-clamp-2">{category.description}</p>
+            <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
               <div className="flex items-center space-x-1">
                 <FaComment className="w-4 h-4" />
                 <span>{category.topicCount} topics</span>
@@ -49,9 +49,9 @@ export function ForumCategoryCard({ category, onClick }: CategoryCardProps) {
             </div>
           </div>
         </div>
-        <div className="text-right text-sm text-gray-500 ml-4">
+        <div className="text-right text-sm text-gray-500 dark:text-gray-400 ml-4">
           <div>Last post</div>
-          <div className="font-medium text-gray-700">{formatDate(category.lastPostDate)}</div>
+          <div className="font-medium text-gray-700 dark:text-gray-200">{formatDate(category.lastPostDate)}</div>
         </div>
       </div>
     </div>
diff --git a/ui/src/views/forum/forum/ForumPostCard.tsx b/ui/src/views/forum/forum/ForumPostCard.tsx
index 5f172c5..fbc452b 100644
--- a/ui/src/views/forum/forum/ForumPostCard.tsx
+++ b/ui/src/views/forum/forum/ForumPostCard.tsx
@@ -27,7 +27,7 @@ export function ForumPostCard({
 
   return (
     <div
-      className={`bg-white rounded-xl shadow-sm border border-gray-200 p-6 ${isFirst ? 'border-l-4 border-l-blue-500' : ''}`}
+      className={`bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 ${isFirst ? 'border-l-4 border-l-blue-500 dark:border-l-blue-400' : ''}`}
     >
       <div className="flex items-start space-x-4">
         <div className="flex-shrink-0">
@@ -45,20 +45,20 @@ export function ForumPostCard({
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between mb-2">
             <div className="flex items-center space-x-2">
-              <h4 className="text-sm font-semibold text-gray-900">{post.authorName}</h4>
+              <h4 className="text-sm font-semibold text-gray-900 dark:text-white">{post.authorName}</h4>
               {post.isAcceptedAnswer && (
-                <div className="flex items-center space-x-1 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-xs">
+                <div className="flex items-center space-x-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-200 px-2 py-1 rounded-full text-xs">
                   <FaCheckCircle className="w-3 h-3" />
                   <span>{translate('::App.Forum.PostManagement.AcceptedAnswer')}</span>
                 </div>
               )}
             </div>
-            <span className="text-sm text-gray-500">{formatDate(post.creationTime)}</span>
+            <span className="text-sm text-gray-500 dark:text-gray-400">{formatDate(post.creationTime)}</span>
           </div>
 
           <div className="prose prose-sm max-w-none mb-4">
             <p
-              className="text-gray-700 whitespace-pre-wrap"
+              className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
               dangerouslySetInnerHTML={{ __html: post.content }}
             />
           </div>
@@ -68,8 +68,8 @@ export function ForumPostCard({
               onClick={() => onLike(post.id, isFirst)}
               className={`flex items-center space-x-1 px-3 py-1 rounded-full text-sm transition-colors ${
                 isLiked
-                  ? 'bg-red-100 text-red-600 hover:bg-red-200'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  ? 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800'
+                  : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
               }`}
             >
               <FaHeart className={`w-4 h-4 ${isLiked ? 'fill-current' : ''}`} />
@@ -79,7 +79,7 @@ export function ForumPostCard({
             {!isFirst && (
               <button
                 onClick={() => onReply(post.id)}
-                className="flex items-center space-x-1 px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors"
+                className="flex items-center space-x-1 px-3 py-1 rounded-full text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
               >
                 <FaReply className="w-4 h-4" />
                 <span>{translate('::App.Forum.PostManagement.PostReply')}</span>
diff --git a/ui/src/views/forum/forum/ForumTopicCard.tsx b/ui/src/views/forum/forum/ForumTopicCard.tsx
index acd4e5e..e85d0c9 100644
--- a/ui/src/views/forum/forum/ForumTopicCard.tsx
+++ b/ui/src/views/forum/forum/ForumTopicCard.tsx
@@ -27,7 +27,7 @@ export function ForumTopicCard({ topic, onClick }: TopicCardProps) {
   return (
     <div
       onClick={onClick}
-      className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-200 cursor-pointer group"
+      className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md hover:border-blue-200 dark:hover:border-blue-500 transition-all duration-200 cursor-pointer group"
     >
       <div className="flex items-start justify-between">
         {/* Sol taraf: Başlık, içerik, istatistik */}
@@ -36,14 +36,14 @@ export function ForumTopicCard({ topic, onClick }: TopicCardProps) {
             {topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500" />}
             {topic.isLocked && <FaLock className="w-4 h-4 text-gray-400" />}
             {topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500" />}
-            <h3 className="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-1">
               {topic.title}
             </h3>
           </div>
 
-          <p className="text-gray-600 text-sm mb-4 line-clamp-2">{topic.content}</p>
+          <p className="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">{topic.content}</p>
 
-          <div className="flex items-center space-x-4 text-sm text-gray-500">
+          <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
             <div className="flex items-center space-x-1" title={translate('::App.Platform.Views')}>
               <FaEye className="w-4 h-4" />
               <span>{topic.viewCount}</span>
@@ -70,17 +70,17 @@ export function ForumTopicCard({ topic, onClick }: TopicCardProps) {
             alt="User"
             className="w-10 h-10 rounded-full border"
           />
-          <div className="text-sm font-medium text-gray-700">{topic.authorName}</div>
-          <div className="text-xs text-gray-500">{formatDate(topic.creationTime)}</div>
+          <div className="text-sm font-medium text-gray-700 dark:text-gray-200">{topic.authorName}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">{formatDate(topic.creationTime)}</div>
         </div>
       </div>
 
       {topic.lastPostDate && topic.lastPostUserName && (
-        <div className="mt-4 pt-4 border-t border-gray-100">
-          <div className="flex items-center justify-between text-sm text-gray-500">
+        <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+          <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
             <span>
               {translate('::App.Forum.TopicManagement.Lastreplyby')}{' '}
-              <span className="font-medium text-gray-700">{topic.lastPostUserName}</span>
+              <span className="font-medium text-gray-700 dark:text-gray-200">{topic.lastPostUserName}</span>
               {' '}
               <span>{formatDate(topic.lastPostDate)}</span>
             </span>
diff --git a/ui/src/views/forum/forum/ForumView.tsx b/ui/src/views/forum/forum/ForumView.tsx
index 0349821..92c59f5 100644
--- a/ui/src/views/forum/forum/ForumView.tsx
+++ b/ui/src/views/forum/forum/ForumView.tsx
@@ -248,9 +248,9 @@ export function ForumView({
           onReply={handleReply}
           isLiked={likedPosts.has(post.id)}
         />
-        {post.children.length > 0 && (
-          <div className="pl-6 border-gray-200 mt-4">{renderPosts(post.children)}</div>
-        )}
+            {post.children.length > 0 && (
+              <div className="pl-6 border-gray-200 dark:border-gray-700 mt-4">{renderPosts(post.children)}</div>
+            )}
       </div>
     ))
   }
@@ -294,7 +294,7 @@ export function ForumView({
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center justify-center h-64">
           <FaSpinner className="w-8 h-8 animate-spin text-blue-600" />
-          <span className="ml-2 text-gray-600">Loading forum data...</span>
+            <span className="ml-2 text-gray-600 dark:text-gray-300">Loading forum data...</span>
         </div>
       </div>
     )
@@ -306,27 +306,27 @@ export function ForumView({
       <div className="flex items-center justify-between mb-4">
         {/* Left Side: Breadcrumb */}
         <div className="flex items-center space-x-2">
-          {viewState !== 'categories' && <FaArrowLeft className="w-4 h-4" />}
-          <nav className="flex items-center space-x-2 text-sm text-gray-500">
+          {viewState !== 'categories' && <FaArrowLeft className="w-4 h-4 text-gray-700 dark:text-gray-200" />}
+          <nav className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
             {selectedCategory && (
               <>
                 <button
                   onClick={() => handleBreadcrumbClick('forum')}
                   className={`transition-colors ${
                     viewState === 'categories'
-                      ? 'text-gray-900 font-medium cursor-default'
-                      : 'hover:text-blue-600 cursor-pointer'
+                      ? 'text-gray-900 dark:text-gray-100 font-medium cursor-default'
+                      : 'hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer'
                   }`}
                 >
-                  <div className="text-sm font-medium text-gray-900">Forum</div>
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Forum</div>
                 </button>
                 <span>/</span>
                 <button
                   onClick={() => handleBreadcrumbClick('category')}
                   className={`transition-colors ${
                     viewState === 'topics'
-                      ? 'text-gray-900 font-medium cursor-default'
-                      : 'hover:text-blue-600 cursor-pointer'
+                      ? 'text-gray-900 dark:text-gray-100 font-medium cursor-default'
+                      : 'hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer'
                   }`}
                 >
                   {selectedCategory.name}
@@ -336,7 +336,7 @@ export function ForumView({
             {selectedTopic && (
               <>
                 <span>/</span>
-                <span className="text-gray-900 font-medium">{selectedTopic.title}</span>
+                <span className="text-gray-900 dark:text-gray-100 font-medium">{selectedTopic.title}</span>
               </>
             )}
           </nav>
@@ -350,7 +350,7 @@ export function ForumView({
               icon={<FaPlus className="w-4 h-4" />}
               variant="solid"
               onClick={() => setShowCreateTopic(true)}
-              className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+              className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
             >
               <span>{translate('::App.Forum.TopicManagement.NewTopic')}</span>
             </Button>
@@ -361,7 +361,7 @@ export function ForumView({
               icon={<FaPlus className="w-4 h-4" />}
               variant="solid"
               onClick={() => setShowCreatePost(true)}
-              className="flex items-center space-x-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors"
+              className="flex items-center space-x-2 bg-emerald-600 dark:bg-emerald-700 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-800 transition-colors"
             >
               <span>{translate('::App.Forum.PostManagement.NewPost')}</span>
             </Button>
@@ -373,9 +373,9 @@ export function ForumView({
             icon={<FaSearch className="w-4 h-4" />}
             onClick={() => setIsSearchModalOpen(true)}
             variant="default"
-            className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+            className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
           >
-            <span className="text-gray-500">
+            <span className="text-gray-500 dark:text-gray-300">
               {translate('::App.Forum.TopicManagement.Searchtopics')}
             </span>
           </Button>
@@ -385,7 +385,7 @@ export function ForumView({
             icon={<FaSearch className="w-5 h-5" />}
             onClick={() => setIsSearchModalOpen(true)}
             variant="default"
-            className="md:hidden p-2 text-gray-400 hover:text-gray-600 transition-colors"
+            className="md:hidden p-2 text-gray-400 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-100 transition-colors"
           ></Button>
         </div>
       </div>
diff --git a/ui/src/views/forum/forum/SearchModal.tsx b/ui/src/views/forum/forum/SearchModal.tsx
index f7e3003..435a283 100644
--- a/ui/src/views/forum/forum/SearchModal.tsx
+++ b/ui/src/views/forum/forum/SearchModal.tsx
@@ -97,21 +97,21 @@ export function SearchModal({
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center pt-20 p-4 z-50">
-      <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[70vh] overflow-hidden">
-        <div className="flex items-center p-4 border-b border-gray-200">
-          <FaSearch className="w-5 h-5 text-gray-400 mr-3" />
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl max-w-2xl w-full max-h-[70vh] overflow-hidden">
+        <div className="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
+          <FaSearch className="w-5 h-5 text-gray-400 dark:text-gray-500 mr-3" />
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="Search categories, topics, and posts..."
-            className="flex-1 outline-none text-lg"
+            className="flex-1 outline-none text-lg bg-transparent text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
             autoFocus
           />
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors ml-3"
+            className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors ml-3"
           >
             <FaTimes className="w-5 h-5" />
           </button>
@@ -119,12 +119,12 @@ export function SearchModal({
 
         <div className="overflow-y-auto max-h-96">
           {!searchQuery.trim() ? (
-            <div className="p-8 text-center text-gray-500">
-              <FaSearch className="w-12 h-12 mx-auto mb-4 text-gray-300" />
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+              <FaSearch className="w-12 h-12 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
               <p>Start typing to search categories, topics, and posts...</p>
             </div>
           ) : !hasResults ? (
-            <div className="p-8 text-center text-gray-500">
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
               <p>No results found for "{searchQuery}"</p>
             </div>
           ) : (
@@ -132,7 +132,7 @@ export function SearchModal({
               {/* Categories */}
               {searchResults.categories.length > 0 && (
                 <div>
-                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide bg-gray-50">
+                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide bg-gray-50 dark:bg-gray-800">
                     Categories ({searchResults.categories.length})
                   </div>
                   {searchResults.categories.map((category, index) => (
@@ -142,24 +142,24 @@ export function SearchModal({
                         onCategorySelect(category)
                         onClose()
                       }}
-                      className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 transition-colors ${
-                        selectedIndex === index ? 'bg-blue-50 border-r-2 border-blue-500' : ''
+                      className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
+                        selectedIndex === index ? 'bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400' : ''
                       }`}
                     >
                       <div className="flex items-center space-x-3 flex-1">
                         <div className="flex-shrink-0">
-                          <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-                            <FaFolder className="w-4 h-4 text-blue-600" />
+                          <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
+                            <FaFolder className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                           </div>
                         </div>
                         <div className="text-left">
-                          <div className="font-medium text-gray-900">{category.name}</div>
-                          <div className="text-sm text-gray-500 line-clamp-1">
+                          <div className="font-medium text-gray-900 dark:text-white">{category.name}</div>
+                          <div className="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">
                             {category.description}
                           </div>
                         </div>
                       </div>
-                      <div className="text-xs text-gray-400">{category.topicCount} topics</div>
+                      <div className="text-xs text-gray-400 dark:text-gray-500">{category.topicCount} topics</div>
                     </button>
                   ))}
                 </div>
@@ -168,7 +168,7 @@ export function SearchModal({
               {/* Topics */}
               {searchResults.topics.length > 0 && (
                 <div>
-                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide bg-gray-50">
+                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide bg-gray-50 dark:bg-gray-800">
                     Topics ({searchResults.topics.length})
                   </div>
                   {searchResults.topics.map((topic, index) => {
@@ -180,28 +180,28 @@ export function SearchModal({
                           onTopicSelect(topic)
                           onClose()
                         }}
-                        className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 transition-colors ${
+                        className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
                           selectedIndex === globalIndex
-                            ? 'bg-blue-50 border-r-2 border-blue-500'
+                            ? 'bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400'
                             : ''
                         }`}
                       >
                         <div className="flex items-center space-x-3 flex-1">
                           <div className="flex-shrink-0">
-                            <div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
-                              <FaRegComment className="w-4 h-4 text-emerald-600" />
+                            <div className="w-8 h-8 bg-emerald-100 dark:bg-emerald-900 rounded-lg flex items-center justify-center">
+                              <FaRegComment className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                             </div>
                           </div>
                           <div className="text-left">
-                            <div className="font-medium text-gray-900 line-clamp-1">
+                            <div className="font-medium text-gray-900 dark:text-white line-clamp-1">
                               {topic.title}
                             </div>
-                            <div className="text-sm text-gray-500">
+                            <div className="text-sm text-gray-500 dark:text-gray-400">
                               by {topic.authorName} • {formatDate(topic.creationTime)}
                             </div>
                           </div>
                         </div>
-                        <div className="text-xs text-gray-400">{topic.replyCount} replies</div>
+                        <div className="text-xs text-gray-400 dark:text-gray-500">{topic.replyCount} replies</div>
                       </button>
                     )
                   })}
@@ -211,7 +211,7 @@ export function SearchModal({
               {/* Posts */}
               {searchResults.posts.length > 0 && (
                 <div>
-                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide bg-gray-50">
+                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide bg-gray-50 dark:bg-gray-800">
                     Posts ({searchResults.posts.length})
                   </div>
                   {searchResults.posts.map((post, index) => {
diff --git a/ui/src/views/intranet/SocialWall/CreatePost.tsx b/ui/src/views/intranet/SocialWall/CreatePost.tsx
index e6e040f..a544ac9 100644
--- a/ui/src/views/intranet/SocialWall/CreatePost.tsx
+++ b/ui/src/views/intranet/SocialWall/CreatePost.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import classNames from 'classnames'
-import EmojiPicker, { EmojiClickData } from 'emoji-picker-react'
+import EmojiPicker, { EmojiClickData, Theme } from 'emoji-picker-react'
 import { FaChartBar, FaSmile, FaTimes, FaImages, FaMapMarkerAlt } from 'react-icons/fa'
 import MediaManager from './MediaManager'
 import LocationPicker from './LocationPicker'
@@ -41,6 +41,7 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const emojiPickerRef = useRef<HTMLDivElement>(null)
   const { user, tenant } = useStoreState((state) => state.auth)
+  const theme = useStoreState((state) => state.theme)
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
@@ -445,8 +446,14 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
 
                 {/* Emoji Picker */}
                 {showEmojiPicker && (
-                  <div ref={emojiPickerRef} className="absolute bottom-12 left-0 z-50">
-                    <EmojiPicker onEmojiClick={handleEmojiClick} autoFocusSearch={false} />
+                  <div ref={emojiPickerRef} className="absolute bottom-6 left-0 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-2">
+                    <EmojiPicker
+                      searchDisabled
+                      theme={theme.mode === 'dark' ? Theme.DARK : Theme.LIGHT}
+                      height={350}
+                      onEmojiClick={handleEmojiClick}
+                      autoFocusSearch={false}
+                    />
                   </div>
                 )}
               </div>
diff --git a/ui/src/views/intranet/SocialWall/LocationPicker.tsx b/ui/src/views/intranet/SocialWall/LocationPicker.tsx
index bdbf0b5..8d89cd3 100644
--- a/ui/src/views/intranet/SocialWall/LocationPicker.tsx
+++ b/ui/src/views/intranet/SocialWall/LocationPicker.tsx
@@ -392,11 +392,11 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
+        <div className="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
           <div className="text-sm text-gray-600 dark:text-gray-400">
             {selectedLocation ? (
               <span className="flex items-center gap-2">
-                <FaMapMarkerAlt className="w-4 h-4 text-blue-600" />
+                <FaMapMarkerAlt className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                 <span className="font-medium text-gray-900 dark:text-gray-100">
                   {selectedLocation.name}
                 </span>
@@ -410,14 +410,14 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
           <div className="flex gap-2">
             <button
               onClick={onClose}
-              className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              className="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
             >
               {translate('::Cancel')}
             </button>
             <button
               onClick={handleConfirm}
               disabled={!selectedLocation}
-              className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+              className="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 disabled:bg-gray-400 dark:disabled:bg-gray-700 disabled:cursor-not-allowed transition-colors"
             >
               {translate('::ListForms.Wizard.Add')}
             </button>
diff --git a/ui/src/views/intranet/widgets/Surveys.tsx b/ui/src/views/intranet/widgets/Surveys.tsx
index 78e16c5..652edc3 100644
--- a/ui/src/views/intranet/widgets/Surveys.tsx
+++ b/ui/src/views/intranet/widgets/Surveys.tsx
@@ -16,17 +16,17 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
   const { translate } = useLocalization()
 
   return (
-    <div className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-850 rounded-xl shadow-lg border border-gray-200/50 dark:border-gray-700/50 overflow-hidden">
+    <div className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-lg border border-gray-200/50 dark:border-gray-700/50 overflow-hidden">
       {/* Header with gradient */}
 
-      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
         <h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
           <FaClipboardCheck className="w-5 h-5" />
           {translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Title')}
         </h2>
       </div>
 
-      <div className="p-3 space-y-4">
+      <div className="p-3 space-y-4 bg-white dark:bg-gray-800">
         {surveys?.map((survey, index) => {
           const daysLeft = dayjs(survey.deadline).diff(dayjs(), 'day')
           const urgency = daysLeft <= 3 ? 'urgent' : daysLeft <= 7 ? 'warning' : 'normal'
@@ -38,15 +38,15 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
               onClick={() => onTakeSurvey(survey)}
               className={`group relative p-5 rounded-xl border cursor-pointer transition-all duration-300 hover:shadow-lg hover:-translate-y-1 ${
                 isCompleted
-                  ? 'bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-700 hover:border-green-400 dark:hover:border-green-500'
-                  : 'bg-white dark:bg-gray-750 border-gray-200 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-500'
+                  ? 'bg-green-50 dark:bg-green-900/30 border-green-300 dark:border-green-700 hover:border-green-400 dark:hover:border-green-500'
+                  : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500'
               }`}
             >
               {/* Background gradient on hover */}
-              <div className={`absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 ${
+              <div className={`absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none ${
                 isCompleted
-                  ? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10'
-                  : 'bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/10 dark:to-pink-900/10'
+                  ? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20'
+                  : 'bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20'
               }`}></div>
 
               <div className="relative">
@@ -71,10 +71,10 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
                   <div
                     className={`px-2 py-1 text-center rounded-full text-xs font-medium ${
                       urgency === 'urgent'
-                        ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
                         : urgency === 'warning'
-                          ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
-                          : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+                          ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
+                          : 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
                     }`}
                   >
                     {daysLeft > 0 ? translate('::App.Platform.Intranet.Widgets.ActiveSurveys.DaysLeft', { count: daysLeft }) : translate('::App.Platform.Intranet.Widgets.ActiveSurveys.LastDay')}
@@ -84,8 +84,8 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
                 {/* Survey Stats */}
                 <div className="grid grid-cols-3 gap-4 mb-4">
                   <div className="flex items-center gap-2 text-sm">
-                    <div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-                      <FaQuestionCircle className="w-3 h-3 text-blue-600 dark:text-blue-400" />
+                    <div className="p-1.5 bg-blue-100 dark:bg-blue-900/40 rounded-lg">
+                      <FaQuestionCircle className="w-3 h-3 text-blue-600 dark:text-blue-300" />
                     </div>
                     <div>
                       <p className="text-xs text-gray-500 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Questions')}</p>
@@ -96,8 +96,8 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
                   </div>
 
                   <div className="flex items-center gap-2 text-sm">
-                    <div className="p-1.5 bg-green-100 dark:bg-green-900/30 rounded-lg">
-                      <FaUsers className="w-3 h-3 text-green-600 dark:text-green-400" />
+                    <div className="p-1.5 bg-green-100 dark:bg-green-900/40 rounded-lg">
+                      <FaUsers className="w-3 h-3 text-green-600 dark:text-green-300" />
                     </div>
                     <div>
                       <p className="text-xs text-gray-500 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Responses')}</p>
@@ -108,8 +108,8 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
                   </div>
 
                   <div className="flex items-center gap-2 text-sm">
-                    <div className="p-1.5 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                      <FaClock className="w-3 h-3 text-purple-600 dark:text-purple-400" />
+                    <div className="p-1.5 bg-purple-100 dark:bg-purple-900/40 rounded-lg">
+                      <FaClock className="w-3 h-3 text-purple-600 dark:text-purple-300" />
                     </div>
                     <div>
                       <p className="text-xs text-gray-500 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Duration')}</p>
@@ -122,13 +122,13 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
                 <div className="mb-4">
                   <div className="flex justify-between text-xs mb-1">
                     <span className="text-gray-600 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.CompletionRate')}</span>
-                    <span className="text-gray-800 dark:text-gray-200 font-medium">
+                    <span className="text-gray-800 dark:text-gray-100 font-medium">
                       {Math.round((survey.responses / 100) * 100)}%
                     </span>
                   </div>
-                  <div className="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                     <div
-                      className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full transition-all duration-500"
+                      className="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 h-2 rounded-full transition-all duration-500"
                       style={{ width: `${Math.min((survey.responses / 100) * 100, 100)}%` }}
                     ></div>
                   </div>
@@ -136,15 +136,15 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
 
                 {/* Deadline */}
                 <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                  <FaClock className="inline w-3 h-3 mr-1" />
+                  <FaClock className="inline w-3 h-3 mr-1 text-purple-500 dark:text-purple-300" />
                   {currentLocalDate(survey.deadline, currentLocale || 'tr')}
                 </p>
 
                 {/* Action Button */}
-                <button className={`w-full flex items-center justify-center gap-2 px-4 py-3 text-white text-sm font-medium rounded-lg transition-all duration-300 transform group-hover:scale-[1.02] shadow-sm hover:shadow-md ${
+                <button className={`w-full flex items-center justify-center gap-2 px-4 py-3 text-white text-sm font-medium rounded-lg transition-all duration-300 transform group-hover:scale-[1.02] shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-purple-400 ${
                   isCompleted
-                    ? 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600'
-                    : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700'
+                    ? 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 dark:from-green-600 dark:to-emerald-600 dark:hover:from-green-700 dark:hover:to-emerald-700'
+                    : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 dark:from-purple-700 dark:to-pink-700 dark:hover:from-purple-800 dark:hover:to-pink-800'
                 }`}>
                   {isCompleted
                     ? translate('::App.Platform.Intranet.Widgets.ActiveSurveys.ViewResponses')
@@ -157,9 +157,9 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
         })}
 
         {surveys?.length === 0 && (
-          <div className="text-center py-12">
+          <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl">
             <div className="inline-flex items-center justify-center w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full mb-4">
-              <FaClipboardCheck className="w-8 h-8 text-gray-400" />
+              <FaClipboardCheck className="w-8 h-8 text-gray-400 dark:text-gray-500" />
             </div>
             <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
               {translate('::App.Platform.Intranet.Widgets.ActiveSurveys.NoActive')}
diff --git a/ui/src/views/menu/MenuItemComponent.tsx b/ui/src/views/menu/MenuItemComponent.tsx
index 306d547..dc07cc5 100644
--- a/ui/src/views/menu/MenuItemComponent.tsx
+++ b/ui/src/views/menu/MenuItemComponent.tsx
@@ -140,30 +140,30 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
         style={style}
         className={`
           flex items-center gap-1 p-1 rounded-lg transition-all duration-200 group min-h-[30px]
-          ${isDesignMode ? 'cursor-move hover:bg-blue-50 border border-transparent hover:border-blue-200' : 'cursor-pointer hover:bg-gray-50'}
-          ${isDragOverlay ? 'shadow-lg bg-white border border-blue-300 z-50' : ''}
+          ${isDesignMode ? 'cursor-move hover:bg-blue-50 dark:hover:bg-blue-900 border border-transparent hover:border-blue-200 dark:hover:border-blue-400' : 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800'}
+          ${isDragOverlay ? 'shadow-lg bg-white dark:bg-gray-800 border border-blue-300 dark:border-blue-500 z-50' : ''}
           ${isDragging ? 'opacity-50' : ''}
-          ${item.children && item.children.length > 0 ? 'bg-blue-50' : depth === 0 ? 'bg-white' : 'bg-gray-50'}
+          ${item.children && item.children.length > 0 ? 'bg-blue-50 dark:bg-blue-900' : depth === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900'}
         `}
         {...(isDesignMode ? { ...attributes, ...listeners } : { onClick: toggleExpanded })}
       >
         {isDesignMode && (
           <div className="flex gap-2 items-center mr-2">
             <button onClick={openCreateModal} title="New Item">
-              <FaPlus size={16} className="text-green-600 hover:text-green-800" />
+              <FaPlus size={16} className="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" />
             </button>
             <button onClick={handleDelete} title="Delete Item">
-              <FaTrashAlt size={16} className="text-red-600 hover:text-red-800" />
+              <FaTrashAlt size={16} className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300" />
             </button>
           </div>
         )}
 
         <div className="flex items-center gap-3 flex-1 min-w-0">
-          <div className="flex-shrink-0 text-gray-600 text-xl">
+          <div className="flex-shrink-0 text-gray-600 dark:text-gray-300 text-xl">
             {navigationIcon[item.icon || ''] ? (
-              React.createElement(navigationIcon[item.icon || ''], { className: 'text-gray-400' })
+              React.createElement(navigationIcon[item.icon || ''], { className: 'text-gray-400 dark:text-gray-500' })
             ) : (
-              <FaQuestionCircle className="text-gray-400" />
+              <FaQuestionCircle className="text-gray-400 dark:text-gray-500" />
             )}
           </div>
 
@@ -171,26 +171,26 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
             type="button"
             onClick={openEditModal}
             className={`
-              truncate text-gray-800 leading-6 text-sm text-left
+              truncate text-gray-800 dark:text-gray-100 leading-6 text-sm text-left
               ${item.children && item.children.length > 0 ? 'font-semibold' : 'font-normal'}
-              ${isDesignMode ? 'hover:text-blue-600' : ''}
+              ${isDesignMode ? 'hover:text-blue-600 dark:hover:text-blue-400' : ''}
             `}
           >
             {translate('::' + item.displayName)}
           </button>
 
-          {item.url && <FaExternalLinkAlt size={12} className="flex-shrink-0 text-gray-400" />}
+          {item.url && <FaExternalLinkAlt size={12} className="flex-shrink-0 text-gray-400 dark:text-gray-500" />}
         </div>
 
         <div className="flex items-center gap-2 flex-shrink-0">
           {isDesignMode && (
-            <div className="flex items-center gap-2 text-xs text-gray-500">
-              <span className="bg-gray-200 px-2 py-1 rounded">#{item.order}</span>
+            <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+              <span className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">#{item.order}</span>
             </div>
           )}
 
           {item.children && item.children.length > 0 && (
-            <span className="text-xs text-gray-500 bg-blue-100 px-2 py-1 rounded-full">
+            <span className="text-xs text-gray-500 dark:text-gray-300 bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded-full">
               {item.children.length}
             </span>
           )}
@@ -206,7 +206,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
           onRequestClose={() => setIsModalOpen(false)}
           width={600}
         >
-          <h5 className="mb-4">
+          <h5 className="mb-4 dark:text-gray-100">
             {modalMode === 'edit' ? translate('::Edit Menu Item') : translate('::New Item')}
           </h5>
           <Formik
@@ -249,7 +249,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="text"
                       name="code"
                       component={Input}
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                       autoFocus
                     />
                   </FormItem>
@@ -259,7 +259,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="text"
                       name="displayName"
                       component={Input}
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                     />
                   </FormItem>
 
@@ -268,23 +268,23 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="number"
                       name="order"
                       component={Input}
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                     />
                   </FormItem>
 
                   <FormItem label="URL" className="mb-2">
-                    <Field type="text" name="url" component={Input} className="h-8 text-sm px-2" />
+                    <Field type="text" name="url" component={Input} className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100" />
                   </FormItem>
 
                   <FormItem label="Icon" className="mb-2">
-                    <Field type="text" name="icon" component={Input} className="h-8 text-sm px-2" />
+                    <Field type="text" name="icon" component={Input} className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100" />
                   </FormItem>
 
                   <FormItem label="Parent Code" className="mb-2">
                     <Input
                       disabled
                       value={values.parentCode || ''}
-                      className="h-8 text-sm px-2 bg-gray-100"
+                      className="h-8 text-sm px-2 bg-gray-100 dark:bg-gray-800 dark:text-gray-300"
                     />
                   </FormItem>
 
@@ -293,7 +293,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="text"
                       name="cssClass"
                       component={Input}
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                     />
                   </FormItem>
 
@@ -302,7 +302,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="text"
                       autoComplete="off"
                       name="requiredPermissionName"
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                     >
                       {({ field, form }: FieldProps<SelectBoxOption>) => (
                         <Select
@@ -324,7 +324,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="text"
                       name="target"
                       component={Input}
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                     />
                   </FormItem>
 
@@ -333,7 +333,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
                       type="text"
                       name="elementId"
                       component={Input}
-                      className="h-8 text-sm px-2"
+                      className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
                     />
                   </FormItem>
 
diff --git a/ui/src/views/menu/MenuManager.tsx b/ui/src/views/menu/MenuManager.tsx
index cb6a7d5..fa49946 100644
--- a/ui/src/views/menu/MenuManager.tsx
+++ b/ui/src/views/menu/MenuManager.tsx
@@ -52,8 +52,8 @@ export const MenuManager = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="flex items-center gap-3 text-gray-600">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="flex items-center gap-3 text-gray-600 dark:text-gray-300">
           <FaSpinner className="animate-spin" />
           <span className="text-lg">Loading menu configuration...</span>
         </div>
@@ -63,16 +63,16 @@ export const MenuManager = () => {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full mx-4">
-          <div className="flex items-center gap-3 text-red-600 mb-4">
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-md w-full mx-4">
+          <div className="flex items-center gap-3 text-red-600 dark:text-red-400 mb-4">
             <FaRegBell size={24} />
             <h2 className="text-lg font-semibold">Error Loading Menu</h2>
           </div>
-          <p className="text-gray-600 mb-6">{error}</p>
+          <p className="text-gray-600 dark:text-gray-300 mb-6">{error}</p>
           <button
             onClick={refetch}
-            className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
+            className="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 px-4 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
           >
             Retry
           </button>
@@ -89,20 +89,20 @@ export const MenuManager = () => {
         defaultTitle={APP_NAME}
       ></Helmet>
 
-      <div className="bg-white rounded px-2 sm:px-2 lg:px-3 py-3">
+      <div className="bg-white dark:bg-gray-800 rounded px-2 sm:px-2 lg:px-3 py-3">
         <div className="flex items-center justify-between mb-2 flex-wrap gap-4">
           {/* Sol kısım: Başlık */}
           <div className="flex items-center gap-2">
-            <FaBars size={20} className="text-gray-600" />
-            <h2 className="text-base font-semibold text-gray-900">Menu Manager</h2>
-            <span className="text-sm text-gray-500">({menuItems.length} root items)</span>
+            <FaBars size={20} className="text-gray-600 dark:text-gray-300" />
+            <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Menu Manager</h2>
+            <span className="text-sm text-gray-500 dark:text-gray-400">({menuItems.length} root items)</span>
           </div>
 
           {/* Sağ kısım: Design Mode + Save butonu */}
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-3">
               <span
-                className={`text-sm font-medium ${isDesignMode ? 'text-blue-600' : 'text-gray-500'}`}
+                className={`text-sm font-medium ${isDesignMode ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`}
               >
                 Design Mode
               </span>
@@ -110,12 +110,12 @@ export const MenuManager = () => {
                 onClick={handleToggleDesignMode}
                 className={`
           relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
-          ${isDesignMode ? 'bg-blue-600' : 'bg-gray-200'}
+          ${isDesignMode ? 'bg-blue-600 dark:bg-blue-700' : 'bg-gray-200 dark:bg-gray-700'}
         `}
               >
                 <span
                   className={`
-            inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out
+            inline-block h-4 w-4 transform rounded-full bg-white dark:bg-gray-200 transition-transform duration-200 ease-in-out
             ${isDesignMode ? 'translate-x-6' : 'translate-x-1'}
           `}
                 />
@@ -128,7 +128,7 @@ export const MenuManager = () => {
                 disabled={!isDesignMode || isSaving}
                 className={`
                               flex items-center gap-2 px-2 py-1 rounded-lg transition-colors
-                              ${isDesignMode ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}
+                              ${isDesignMode ? 'bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-800 text-white' : 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'}
                               ${isSaving ? 'opacity-50' : ''}
                             `}
               >
@@ -156,8 +156,8 @@ export const MenuManager = () => {
             refetch={refetch}
           />
         ) : (
-          <div className="text-center py-12 text-gray-500">
-            <FaBars size={24} className="mx-auto mb-4 text-gray-300" />
+          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+            <FaBars size={24} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
             <p className="text-lg">No menu items found</p>
             <p className="text-sm">Try refreshing the page or contact your administrator</p>
           </div>
diff --git a/ui/src/views/menu/SortableMenuTree.tsx b/ui/src/views/menu/SortableMenuTree.tsx
index 6bce3fc..1f6ee84 100644
--- a/ui/src/views/menu/SortableMenuTree.tsx
+++ b/ui/src/views/menu/SortableMenuTree.tsx
@@ -192,7 +192,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
 
   const renderMenuItem = (item: MenuItem, depth: number = 0): React.ReactNode => {
     return (
-      <div key={item.id}>
+      <div key={item.id} className="bg-white dark:bg-gray-800 rounded-md">
         <MenuItemComponent item={item} isDesignMode={isDesignMode} depth={depth} refetch={refetch} permissions={permissions}>
           {Array.isArray(item.children) && item.children.length > 0 && (
             <SortableContext
@@ -201,7 +201,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
                 .map((child) => child.id)}
               strategy={verticalListSortingStrategy}
             >
-              <div className="ml-4">
+              <div className="ml-4 border-gray-200 dark:border-gray-700">
                 {item.children.map((child) => renderMenuItem(child, depth + 1))}
               </div>
             </SortableContext>
@@ -222,14 +222,16 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
 
       <DragOverlay>
         {activeItem ? (
-          <MenuItemComponent
-            item={activeItem}
-            isDesignMode={isDesignMode}
-            depth={0}
-            isDragOverlay={true}
-            refetch={refetch}
-            permissions={permissions}
-          />
+          <div className="bg-white dark:bg-gray-800 rounded-md shadow-lg">
+            <MenuItemComponent
+              item={activeItem}
+              isDesignMode={isDesignMode}
+              depth={0}
+              isDragOverlay={true}
+              refetch={refetch}
+              permissions={permissions}
+            />
+          </div>
         ) : null}
       </DragOverlay>
     </DndContext>
diff --git a/ui/src/views/public/designer/DesignerDrawer.tsx b/ui/src/views/public/designer/DesignerDrawer.tsx
index b3cc6cc..c4744fc 100644
--- a/ui/src/views/public/designer/DesignerDrawer.tsx
+++ b/ui/src/views/public/designer/DesignerDrawer.tsx
@@ -50,18 +50,18 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
   }
 
   return (
-    <div className="fixed inset-y-0 right-0 z-50 w-[420px] border-l border-slate-200 bg-white shadow-2xl">
-      <div className="flex h-full flex-col bg-white">
-        <div className="border-b border-slate-200 px-5 py-4">
+    <div className="fixed inset-y-0 right-0 z-50 w-[420px] border-l border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl">
+      <div className="flex h-full flex-col bg-white dark:bg-gray-900">
+        <div className="border-b border-slate-200 dark:border-gray-700 px-5 py-4">
           <div className="flex items-start justify-between gap-4">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700">
+              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-400">
                 {pageTitle} {translate('::Public.designer.title')}
               </p>
-              <h3 className="mt-2 text-lg font-semibold text-slate-900">
+              <h3 className="mt-2 text-lg font-semibold text-slate-900 dark:text-gray-100">
                 {selection?.title ?? translate('::Public.designer.noSelection')}
               </h3>
-              <p className="mt-1 text-sm text-slate-500">
+              <p className="mt-1 text-sm text-slate-500 dark:text-gray-400">
                 {selection?.description ?? translate('::Public.designer.selectField')}
               </p>
             </div>
@@ -80,8 +80,8 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
                   className={`flex h-9 w-9 items-center justify-center rounded-lg text-xl transition-all
                     ${
                       normalizeLanguageKey(selectedLanguage) === language.key
-                        ? 'border-sky-500 bg-sky-50 ring-2 ring-sky-200'
-                        : 'border-slate-200 hover:border-slate-400 hover:bg-slate-50'
+                        ? 'border-sky-500 bg-sky-50 dark:bg-sky-900/20 ring-2 ring-sky-200 dark:ring-sky-700'
+                        : 'border-slate-200 dark:border-gray-700 hover:border-slate-400 dark:hover:border-gray-500 hover:bg-slate-50 dark:hover:bg-gray-800'
                     }`}
                 >
                   <Avatar
@@ -114,11 +114,11 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
 
             return (
               <div key={field.key}>
-                <label className="mb-1 block text-sm font-semibold text-slate-700">
+                <label className="mb-1 block text-sm font-semibold text-slate-700 dark:text-gray-200">
                   {field.localizationKey || field.label}
                 </label>
                 {field.localizationKey && field.localizationKey !== field.label && (
-                  <p className="mb-2 text-xs text-slate-500">{field.label}</p>
+                  <p className="mb-2 text-xs text-slate-500 dark:text-gray-400">{field.label}</p>
                 )}
                 {field.type === 'icon' ? (
                   <IconPickerField
@@ -137,13 +137,13 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
           })}
 
           {!selection && (
-            <div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-sm text-slate-500">
+            <div className="rounded-2xl border border-dashed border-slate-300 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 px-4 py-6 text-sm text-slate-500 dark:text-gray-400">
               {translate('::Public.designer.noSelectionDetails')}
             </div>
           )}
         </div>
 
-        <div className="flex items-center justify-between border-t border-slate-200 px-5 py-4">
+        <div className="flex items-center justify-between border-t border-slate-200 dark:border-gray-700 px-5 py-4">
             <Button variant="solid" block={true} onClick={onSave}>
               {translate('::Public.designer.save')}
             </Button>