From 48894d2bdae44969457c3b3d78aafbf785c5a20b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Mon, 8 Jun 2026 11:52:30 +0300
Subject: [PATCH] =?UTF-8?q?Genel=20de=C4=9Fi=C5=9Fiklikler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LookUpQueryValues.cs                      |   2 +-
 .../Seeds/ListFormSeeder_Saas.cs              |   2 +-
 ui/src/assets/styles/components/_dialog.css   |  20 +-
 .../importManager/FileUploadArea.tsx          |  28 +--
 .../importManager/ImportDashboard.tsx         | 173 +++++++++---------
 .../importManager/ImportPreview.tsx           |  62 +++----
 .../importManager/ImportProgress.tsx          |  12 +-
 ui/src/components/template/MobileNav.tsx      |   2 +-
 ui/src/components/ui/Dialog/Dialog.tsx        |  34 ++--
 .../admin/listForm/wizard/WizardStep2.tsx     |  47 ++++-
 .../admin/listForm/wizard/WizardStep6.tsx     |  52 ++++--
 .../developerKit/SqlTableDesignerDialog.tsx   |  10 +-
 12 files changed, 269 insertions(+), 175 deletions(-)

diff --git a/api/src/Sozsoft.Platform.Application.Contracts/LookUpQueryValues.cs b/api/src/Sozsoft.Platform.Application.Contracts/LookUpQueryValues.cs
index 3836d8e..f0f7e9a 100644
--- a/api/src/Sozsoft.Platform.Application.Contracts/LookUpQueryValues.cs
+++ b/api/src/Sozsoft.Platform.Application.Contracts/LookUpQueryValues.cs
@@ -220,7 +220,7 @@ public static class LookupQueryValues
             $"\"Name\" AS \"Name\" " +
         $"FROM \"{TableNameResolver.GetFullTableName(nameof(TableNameEnum.JobPosition))}\" " +
         $"WHERE " +
-            $"(\"DepartmentId\" = @param0 OR @param0 IS NULL) " +
+            $"(\"DepartmentId\" = @param0 OR \"ParentId\" IS NULL OR @param0 IS NULL) " +
             $"AND \"IsDeleted\" = 'false' " +
         $"ORDER BY \"Name\";";
 
diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs b/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
index f48f88a..26ef1d8 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
@@ -4026,7 +4026,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
                     SearchPanelJson = DefaultSearchPanelJson,
                     GroupPanelJson = DefaultGroupPanelJson,
                     SelectionJson = DefaultSelectionSingleJson,
-                    ColumnOptionJson = DefaultColumnOptionJson(false),
+                    ColumnOptionJson = DefaultColumnOptionJson(),
                     PermissionJson = DefaultPermissionJson(listFormName),
                     PagerOptionJson = DefaultPagerOptionJson,
                     EditingOptionJson = DefaultEditingOptionJson(listFormName, 950, 650, true, true, true, true, false),
diff --git a/ui/src/assets/styles/components/_dialog.css b/ui/src/assets/styles/components/_dialog.css
index a57e9b2..446dd73 100644
--- a/ui/src/assets/styles/components/_dialog.css
+++ b/ui/src/assets/styles/components/_dialog.css
@@ -47,12 +47,30 @@
 }
 
 .dialog-content {
-  @apply p-6 rounded-lg shadow-xl sm:my-16 relative h-full bg-white dark:bg-gray-800;
+  max-height: calc(100vh - 2rem);
+  @apply p-6 rounded-lg shadow-xl my-4 relative bg-white dark:bg-gray-800 flex flex-col overflow-hidden;
+}
+
+@screen sm {
+  .dialog-content {
+    max-height: calc(100vh - 8rem);
+    @apply my-16;
+  }
+}
+
+.dialog-header,
+.dialog-footer {
+  @apply flex-shrink-0;
+}
+
+.dialog-body {
+  @apply flex-1 min-h-0 overflow-y-auto;
 }
 
 .dialog-content.maximized {
   border-radius: 0 !important;
   height: 100vh !important;
+  max-height: 100vh !important;
   margin: 0 !important;
   overflow: hidden;
   display: flex;
diff --git a/ui/src/components/importManager/FileUploadArea.tsx b/ui/src/components/importManager/FileUploadArea.tsx
index bf5e61e..113db3d 100644
--- a/ui/src/components/importManager/FileUploadArea.tsx
+++ b/ui/src/components/importManager/FileUploadArea.tsx
@@ -99,7 +99,9 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
       {!selectedFile ? (
         <div
           className={`relative border-2 border-dashed rounded-lg p-3 transition-all duration-200 ${
-            dragActive ? 'border-blue-400 bg-blue-50' : 'border-slate-300 hover:border-slate-400'
+            dragActive
+              ? 'border-blue-400 bg-blue-50 dark:bg-blue-950/30'
+              : 'border-slate-300 hover:border-slate-400 dark:border-slate-600 dark:hover:border-slate-500'
           } ${loading ? 'opacity-50 pointer-events-none' : ''}`}
           onDragEnter={handleDrag}
           onDragLeave={handleDrag}
@@ -117,35 +119,39 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
 
           <div className="text-center">
             <FaUpload
-              className={`mx-auto h-3 w-3 ${dragActive ? 'text-blue-500' : 'text-slate-400'}`}
+              className={`mx-auto h-3 w-3 ${dragActive ? 'text-blue-500 dark:text-blue-400' : 'text-slate-400 dark:text-slate-500'}`}
             />
-            <div className="text-lg font-medium text-slate-700 mb-2">
+            <div className="text-lg font-medium text-slate-700 dark:text-slate-200 mb-2">
               {dragActive
                 ? translate('::App.Listforms.ImportManager.DropHere')
                 : translate('::App.Listforms.ImportManager.UploadYourFile')}
             </div>
-            <p className="text-slate-500 mb-4">
+            <p className="text-slate-500 dark:text-slate-400 mb-4">
               {translate('::App.Listforms.ImportManager.DragOrClick')}
             </p>
-            <div className="text-sm text-slate-400">
+            <div className="text-sm text-slate-400 dark:text-slate-500">
               {translate('::App.Listforms.ImportManager.SupportedFormats')}{' '}
               {acceptedFormats.join(', ')} • Max size: {maxSize}MB
             </div>
           </div>
         </div>
       ) : (
-        <div className="border border-slate-200 rounded-lg p-4">
+        <div className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 dark:bg-slate-900/40">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3 min-w-0 flex-1">
               <FaFile className="w-8 h-8 text-blue-500 flex-shrink-0" />
               <div className="min-w-0 flex-1">
-                <div className="font-medium text-slate-800 truncate">{selectedFile.name}</div>
-                <div className="text-sm text-slate-500">{formatFileSize(selectedFile.size)}</div>
+                <div className="font-medium text-slate-800 dark:text-slate-100 truncate">
+                  {selectedFile.name}
+                </div>
+                <div className="text-sm text-slate-500 dark:text-slate-400">
+                  {formatFileSize(selectedFile.size)}
+                </div>
               </div>
             </div>
             <button
               onClick={clearFile}
-              className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
+              className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-300 dark:hover:bg-slate-800 rounded-lg transition-colors"
             >
               <FaTimes className="w-4 h-4" />
             </button>
@@ -154,9 +160,9 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
       )}
 
       {error && (
-        <div className="flex items-center space-x-2 p-3 bg-red-50 border border-red-200 rounded-lg">
+        <div className="flex items-center space-x-2 p-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/60 rounded-lg">
           <FaRegCircle className="w-5 h-5 text-red-500" />
-          <span className="text-red-700">{error}</span>
+          <span className="text-red-700 dark:text-red-300">{error}</span>
         </div>
       )}
 
diff --git a/ui/src/components/importManager/ImportDashboard.tsx b/ui/src/components/importManager/ImportDashboard.tsx
index 4b0c9f9..3fdec01 100644
--- a/ui/src/components/importManager/ImportDashboard.tsx
+++ b/ui/src/components/importManager/ImportDashboard.tsx
@@ -195,17 +195,17 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
     switch (status) {
       case 'uploaded':
       case 'executed':
-        return 'bg-green-50 text-green-700 border-green-200'
+        return 'bg-green-50 text-green-700 border-green-200 dark:bg-green-950/30 dark:text-green-300 dark:border-green-900/60'
       case 'executed_with_errors':
-        return 'bg-orange-50 text-orange-700 border-orange-200'
+        return 'bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950/30 dark:text-orange-300 dark:border-orange-900/60'
       case 'failed':
       case 'execute_failed':
-        return 'bg-red-50 text-red-700 border-red-200'
+        return 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-900/60'
       case 'processing':
       case 'validating':
-        return 'bg-blue-50 text-blue-700 border-blue-200'
+        return 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-300 dark:border-blue-900/60'
       default:
-        return 'bg-yellow-50 text-yellow-700 border-yellow-200'
+        return 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-300 dark:border-yellow-900/60'
     }
   }
 
@@ -269,17 +269,17 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
   const getExecuteStatusColor = (status: string) => {
     switch (status) {
       case 'completed':
-        return 'text-green-600'
+        return 'text-green-600 dark:text-green-300'
       case 'completed_with_errors':
-        return 'text-orange-600'
+        return 'text-orange-600 dark:text-orange-300'
       case 'processing':
-        return 'text-blue-600'
+        return 'text-blue-600 dark:text-blue-300'
       case 'validating':
-        return 'text-yellow-600'
+        return 'text-yellow-600 dark:text-yellow-300'
       case 'failed':
-        return 'text-red-600'
+        return 'text-red-600 dark:text-red-300'
       default:
-        return 'text-slate-600'
+        return 'text-slate-600 dark:text-slate-400'
     }
   }
 
@@ -331,7 +331,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
   return (
     <div className="flex flex-col w-full mt-4">
       {/* Navigation Tabs */}
-      <div className="flex space-x-1 mb-4 bg-white rounded-lg p-1 shadow-sm border border-slate-200 flex-shrink-0">
+      <div className="flex space-x-1 mb-4 bg-white dark:bg-slate-900 rounded-lg p-1 shadow-sm border border-slate-200 dark:border-slate-700 flex-shrink-0">
         {['import', 'preview', 'history'].map((tab) => (
           <button
             key={tab}
@@ -339,7 +339,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
             className={`px-3 py-2 rounded-md font-medium transition-all duration-200 flex items-center space-x-2 ${
               activeTab === tab
                 ? 'bg-blue-500 text-white shadow-md'
-                : 'text-slate-600 hover:text-slate-800 hover:bg-slate-50'
+                : 'text-slate-600 hover:text-slate-800 hover:bg-slate-50 dark:text-slate-300 dark:hover:text-slate-100 dark:hover:bg-slate-800'
             }`}
           >
             {tab === 'import' && <FaUpload className="w-4 h-4" />}
@@ -358,9 +358,9 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
               {/* Template Generator - 2/3 width on large screens, full width on mobile */}
               <div className="lg:col-span-2">
-                <div className="bg-white rounded-xl shadow-sm border border-slate-200">
-                  <div className="px-3 py-3 border-b flex items-center justify-between">
-                    <h3 className="text-xl font-semibold text-slate-800 flex items-center">
+                <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
+                  <div className="px-3 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
+                    <h3 className="text-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center">
                       <FaDownload className="w-4 h-4 mr-2" />
                       {translate('::App.Listforms.ImportManager.TemplateColumns')} (
                       {editableColumns.length})
@@ -371,10 +371,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                       <button
                         onClick={() => generateTemplate('excel')}
                         disabled={generating}
-                        className="flex items-center gap-1.5 px-3 py-1.5 border border-green-200 rounded-md hover:border-green-300 hover:bg-green-50 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white text-xs"
+                        className="flex items-center gap-1.5 px-3 py-1.5 border border-green-200 dark:border-green-900/60 rounded-md hover:border-green-300 hover:bg-green-50 dark:hover:bg-green-950/30 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-900 text-xs"
                       >
                         <FaFileExcel className="w-3.5 h-3.5 text-green-500 group-hover:scale-110 transition-transform" />
-                        <span className="font-medium text-slate-700">
+                        <span className="font-medium text-slate-700 dark:text-slate-200">
                           {translate('::App.Listforms.ImportManager.ExcelTemplate')}
                         </span>
                       </button>
@@ -382,10 +382,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                       <button
                         onClick={() => generateTemplate('csv')}
                         disabled={generating}
-                        className="flex items-center gap-1.5 px-3 py-1.5 border border-blue-200 rounded-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white text-xs"
+                        className="flex items-center gap-1.5 px-3 py-1.5 border border-blue-200 dark:border-blue-900/60 rounded-md hover:border-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/30 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-900 text-xs"
                       >
                         <FaFileAlt className="w-3.5 h-3.5 text-blue-500 group-hover:scale-110 transition-transform" />
-                        <span className="font-medium text-slate-700">
+                        <span className="font-medium text-slate-700 dark:text-slate-200">
                           {translate('::App.Listforms.ImportManager.CsvTemplate')}
                         </span>
                       </button>
@@ -394,38 +394,38 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
 
                   <div className="max-h-96 overflow-y-auto">
                     <table className="w-full">
-                      <thead className="bg-slate-100 sticky top-0">
+                      <thead className="bg-slate-100 dark:bg-slate-800 sticky top-0">
                         <tr>
-                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
+                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
                             {translate('::App.Listform.ListformField.Column')}
                           </th>
-                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
+                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
                             {translate('::ListForms.ListFormEdit.Type')}
                           </th>
-                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
+                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
                             {translate('::App.Required')}
                           </th>
-                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
+                          <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">
                             {translate('::Abp.Mailing.Default')}
                           </th>
                         </tr>
                       </thead>
-                      <tbody className="divide-y divide-slate-100">
+                      <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                         {editableColumns.map((column: any) => (
-                          <tr key={column.fieldName} className="hover:bg-slate-50">
-                            <td className="px-2 py-2 font-medium text-slate-800">
+                          <tr key={column.fieldName} className="hover:bg-slate-50 dark:hover:bg-slate-800/70">
+                            <td className="px-2 py-2 font-medium text-slate-800 dark:text-slate-100">
                               {column.fieldName}
                             </td>
-                            <td className="px-4 py-2 text-slate-600">
+                            <td className="px-4 py-2 text-slate-600 dark:text-slate-300">
                               <span
                                 className={`px-2 py-1 rounded text-xs font-medium ${
                                   column.dataType === 'string'
-                                    ? 'bg-blue-100 text-blue-800'
+                                    ? 'bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300'
                                     : column.dataType === 'number'
-                                      ? 'bg-green-100 text-green-800'
+                                      ? 'bg-green-100 text-green-800 dark:bg-green-950/40 dark:text-green-300'
                                       : column.dataType === 'boolean'
-                                        ? 'bg-purple-100 text-purple-800'
-                                        : 'bg-orange-100 text-orange-800'
+                                        ? 'bg-purple-100 text-purple-800 dark:bg-purple-950/40 dark:text-purple-300'
+                                        : 'bg-orange-100 text-orange-800 dark:bg-orange-950/40 dark:text-orange-300'
                                 }`}
                               >
                                 {column.dataType}
@@ -435,16 +435,16 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                               {column.validationRuleDto.some(
                                 (rule: any) => rule.type === 'required',
                               ) ? (
-                                <span className="text-red-500 font-medium">
+                                <span className="text-red-500 dark:text-red-300 font-medium">
                                   {translate('::App.Listforms.ImportManager.Yes')}
                                 </span>
                               ) : (
-                                <span className="text-slate-400">
+                                <span className="text-slate-400 dark:text-slate-500">
                                   {translate('::App.Listforms.ImportManager.No')}
                                 </span>
                               )}
                             </td>
-                            <td className="px-4 py-2 text-slate-600 text-sm">
+                            <td className="px-4 py-2 text-slate-600 dark:text-slate-300 text-sm">
                               {typeof column.defaultValue === 'object'
                                 ? JSON.stringify(column.defaultValue)
                                 : column.defaultValue}
@@ -458,7 +458,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                   {generating && (
                     <div className="flex items-center justify-center py-4">
                       <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
-                      <span className="ml-2 text-slate-600">
+                      <span className="ml-2 text-slate-600 dark:text-slate-400">
                         {translate('::App.Listforms.ImportManager.GeneratingTemplate')}
                       </span>
                     </div>
@@ -468,8 +468,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
 
               {/* File Upload - 1/3 width on large screens, full width on mobile */}
               <div className="lg:col-span-1">
-                <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 h-full">
-                  <h2 className="text-xl font-semibold text-slate-800 mb-4 flex items-center">
+                <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-4 h-full">
+                  <h2 className="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-4 flex items-center">
                     <FaUpload className="w-5 h-5 mr-2 text-green-500" />
                     {translate('::App.Listforms.ImportManager.UploadData')}
                   </h2>
@@ -506,9 +506,9 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                 )}
               </div>
             ) : (
-              <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-12">
-                <div className="text-center text-slate-500">
-                  <FaEye className="w-16 h-16 mx-auto mb-4 text-slate-300" />
+              <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-12">
+                <div className="text-center text-slate-500 dark:text-slate-400">
+                  <FaEye className="w-16 h-16 mx-auto mb-4 text-slate-300 dark:text-slate-600" />
                   <div className="text-xl font-medium mb-2">
                     {translate('::App.Listforms.ImportManager.NoDataToPreview')}
                   </div>
@@ -520,22 +520,22 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
         )}
 
         {activeTab === 'history' && (
-          <div className="bg-white rounded-xl shadow-sm border border-slate-200">
-            <div className="p-3 border-b border-slate-200">
-              <h2 className="text-xl font-semibold text-slate-800 flex items-center">
+          <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
+            <div className="p-3 border-b border-slate-200 dark:border-slate-700">
+              <h2 className="text-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center">
                 <FaClock className="w-5 h-5 mr-2 text-indigo-500" />
                 {translate('::App.Listforms.ImportManager.ImportHistory')}
               </h2>
             </div>
 
-            <div className="divide-y divide-slate-100">
+            <div className="divide-y divide-slate-100 dark:divide-slate-800">
               {importHistory.map((session) => (
                 <div
                   key={session.id}
                   className={`p-2 transition-colors border-l-4 ${
                     currentSession?.id === session.id
-                      ? 'bg-blue-50 border-l-blue-500 hover:bg-blue-100'
-                      : 'border-l-transparent hover:bg-slate-50'
+                      ? 'bg-blue-50 border-l-blue-500 hover:bg-blue-100 dark:bg-blue-950/30 dark:hover:bg-blue-950/40'
+                      : 'border-l-transparent hover:bg-slate-50 dark:hover:bg-slate-800/70'
                   }`}
                 >
                   <div className="flex items-center justify-between">
@@ -543,13 +543,15 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                       {getStatusIcon(session.status)}
                       <div className="flex items-center space-x-2">
                         <div>
-                          <div className="font-medium text-slate-800">{session.blobName}</div>
-                          <div className="text-sm text-slate-500">
+                          <div className="font-medium text-slate-800 dark:text-slate-100">
+                            {session.blobName}
+                          </div>
+                          <div className="text-sm text-slate-500 dark:text-slate-400">
                             {new Date(session.creationTime).toLocaleString()}
                           </div>
                         </div>
                         {currentSession?.id === session.id && (
-                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300">
                             {translate('::App.Status.Active')}
                           </span>
                         )}
@@ -558,7 +560,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
 
                     <div className="flex items-center space-x-4">
                       <div className="text-right">
-                        <div className="text-sm font-medium text-slate-800">
+                        <div className="text-sm font-medium text-slate-800 dark:text-slate-100">
                           {session.totalRows} {translate('::App.Listforms.ImportManager.TotalRows')}
                         </div>
                       </div>
@@ -576,8 +578,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                           onClick={() => toggleSessionExecutes(session.id)}
                           className={`p-2 rounded-lg transition-colors ${
                             expandedSessions.has(session.id)
-                              ? 'text-red-500 bg-red-50 hover:text-red-600 hover:bg-red-100'
-                              : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
+                              ? 'text-red-500 bg-red-50 hover:text-red-600 hover:bg-red-100 dark:bg-red-950/30 dark:text-red-300 dark:hover:bg-red-950/40'
+                              : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-300 dark:hover:bg-slate-800'
                           }`}
                           title={translate('::App.Listforms.ImportManager.ViewExecutionDetails')}
                         >
@@ -607,7 +609,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                               }
                             }
                           }}
-                          className="p-2 rounded-lg transition-colors text-slate-400 hover:text-blue-500 hover:bg-blue-50"
+                          className="p-2 rounded-lg transition-colors text-slate-400 hover:text-blue-500 hover:bg-blue-50 dark:text-slate-500 dark:hover:text-blue-300 dark:hover:bg-blue-950/30"
                           title={translate('::App.Listforms.ImportManager.RefreshExecutionDetails')}
                         >
                           <FaSync className="w-4 h-4" />
@@ -623,8 +625,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                           disabled={currentSession?.id === session.id}
                           className={`p-2 rounded-lg transition-colors ${
                             currentSession?.id === session.id
-                              ? 'text-slate-300 cursor-not-allowed'
-                              : 'text-slate-400 hover:text-red-500 hover:bg-red-50'
+                              ? 'text-slate-300 dark:text-slate-600 cursor-not-allowed'
+                              : 'text-slate-400 hover:text-red-500 hover:bg-red-50 dark:text-slate-500 dark:hover:text-red-300 dark:hover:bg-red-950/30'
                           }`}
                           title={
                             currentSession?.id === session.id
@@ -645,10 +647,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                         session.status === 'executed_with_errors' ||
                         session.status === 'failed' ||
                         session.status === 'execute_failed'
-                          ? 'bg-red-50 text-red-700 border border-red-200'
+                          ? 'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-900/60'
                           : session.status === 'uploaded'
-                            ? 'bg-blue-50 text-blue-700 border border-blue-200'
-                            : 'bg-green-50 text-green-700 border border-green-200'
+                            ? 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/30 dark:text-blue-300 dark:border-blue-900/60'
+                            : 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950/30 dark:text-green-300 dark:border-green-900/60'
                       }`}
                     >
                       <span className="mt-0.5 flex-shrink-0">
@@ -668,10 +670,10 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
 
                   {/* Execute Details Section */}
                   {expandedSessions.has(session.id) && (
-                    <div className="mt-3 bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-100 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                    <div className="mt-3 bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-slate-800 dark:to-slate-800 border border-indigo-100 dark:border-slate-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                       <div className="p-3">
                         {loadingExecutes.has(session.id) ? (
-                          <div className="flex items-center space-x-2 text-slate-500 py-2">
+                          <div className="flex items-center space-x-2 text-slate-500 dark:text-slate-400 py-2">
                             <FaSync className="w-4 h-4 animate-spin" />
                             <span className="text-sm">
                               {translate('::App.Listforms.ImportManager.LoadingExecutionDetails')}
@@ -681,38 +683,38 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                           sessionExecutes[session.id].length > 0 ? (
                           <div className="space-y-2">
                             {sessionExecutes[session.id].map((execute) => (
-                              <div key={execute.id} className="p-3 rounded-lg">
+                              <div key={execute.id} className="p-3 rounded-lg dark:bg-slate-900/40">
                                 <div className="flex items-center justify-between">
                                   {/* Sol: Tarih */}
                                   <div className="flex-shrink-0">
-                                    <div className="text-lg text-slate-500">
+                                    <div className="text-lg text-slate-500 dark:text-slate-400">
                                       {new Date(execute.creationTime).toLocaleString()}
                                     </div>
                                   </div>
 
                                   {/* Orta: Executed, Valid, Errors */}
-                                  <div className="flex items-center space-x-4 text-xs text-slate-600">
+                                  <div className="flex items-center space-x-4 text-xs text-slate-600 dark:text-slate-400">
                                     <div className="text-center">
-                                      <div className="font-medium text-slate-800">
+                                      <div className="font-medium text-slate-800 dark:text-slate-100">
                                         {execute.execRows}
                                       </div>
-                                      <div className="text-slate-500">
+                                      <div className="text-slate-500 dark:text-slate-400">
                                         {translate('::App.Listforms.ImportManager.Executed')}
                                       </div>
                                     </div>
                                     <div className="text-center">
-                                      <div className="font-medium text-green-600">
+                                      <div className="font-medium text-green-600 dark:text-green-300">
                                         {execute.validRows}
                                       </div>
-                                      <div className="text-slate-500">
+                                      <div className="text-slate-500 dark:text-slate-400">
                                         {translate('::App.Listforms.ImportManager.Valid')}
                                       </div>
                                     </div>
                                     <div className="text-center">
-                                      <div className="font-medium text-red-600">
+                                      <div className="font-medium text-red-600 dark:text-red-300">
                                         {execute.errorRows}
                                       </div>
-                                      <div className="text-slate-500">
+                                      <div className="text-slate-500 dark:text-slate-400">
                                         {translate('::App.Listforms.ImportManager.Errors')}
                                       </div>
                                     </div>
@@ -737,7 +739,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                                     <div className="mt-2">
                                       <button
                                         onClick={() => toggleErrors(execute.id)}
-                                        className="flex items-center space-x-1 text-xs text-orange-600 hover:text-orange-700 font-medium"
+                                        className="flex items-center space-x-1 text-xs text-orange-600 hover:text-orange-700 dark:text-orange-300 dark:hover:text-orange-200 font-medium"
                                       >
                                         {expandedErrors.has(execute.id) ? (
                                           <FaChevronUp className="w-3 h-3" />
@@ -751,26 +753,29 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                                       </button>
 
                                       {expandedErrors.has(execute.id) && (
-                                        <div className="mt-2 max-h-48 overflow-y-auto rounded border border-orange-200 bg-orange-50">
+                                        <div className="mt-2 max-h-48 overflow-y-auto rounded border border-orange-200 bg-orange-50 dark:border-orange-900/60 dark:bg-orange-950/30">
                                           {parseErrors(execute.errorsJson).length > 0 ? (
                                             <table className="w-full text-xs">
-                                              <thead className="bg-orange-100 sticky top-0">
+                                              <thead className="bg-orange-100 dark:bg-orange-950/50 sticky top-0">
                                                 <tr>
-                                                  <th className="px-3 py-1 text-left font-medium text-orange-700 w-16">
+                                                  <th className="px-3 py-1 text-left font-medium text-orange-700 dark:text-orange-300 w-16">
                                                     Satır
                                                   </th>
-                                                  <th className="px-3 py-1 text-left font-medium text-orange-700">
+                                                  <th className="px-3 py-1 text-left font-medium text-orange-700 dark:text-orange-300">
                                                     Hata Mesajı
                                                   </th>
                                                 </tr>
                                               </thead>
-                                              <tbody className="divide-y divide-orange-100">
+                                              <tbody className="divide-y divide-orange-100 dark:divide-orange-900/50">
                                                 {parseErrors(execute.errorsJson).map((err, idx) => (
-                                                  <tr key={idx} className="hover:bg-orange-100">
-                                                    <td className="px-3 py-1 text-orange-700 font-medium">
+                                                  <tr
+                                                    key={idx}
+                                                    className="hover:bg-orange-100 dark:hover:bg-orange-950/50"
+                                                  >
+                                                    <td className="px-3 py-1 text-orange-700 dark:text-orange-300 font-medium">
                                                       {err.row}
                                                     </td>
-                                                    <td className="px-3 py-1 text-slate-700">
+                                                    <td className="px-3 py-1 text-slate-700 dark:text-slate-200">
                                                       {err.message}
                                                     </td>
                                                   </tr>
@@ -778,7 +783,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                                               </tbody>
                                             </table>
                                           ) : (
-                                            <p className="px-3 py-2 text-orange-600">
+                                            <p className="px-3 py-2 text-orange-600 dark:text-orange-300">
                                               Hata detayı mevcut değil.
                                             </p>
                                           )}
@@ -790,7 +795,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                             ))}
                           </div>
                         ) : (
-                          <div className="text-sm text-slate-500 py-2">
+                          <div className="text-sm text-slate-500 dark:text-slate-400 py-2">
                             {translate('::App.Listforms.ImportManager.NoExecutionRecords')}
                           </div>
                         )}
@@ -801,8 +806,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
               ))}
 
               {importHistory.length === 0 && (
-                <div className="p-12 text-center text-slate-500">
-                  <FaClock className="w-12 h-12 mx-auto mb-4 text-slate-300" />
+                <div className="p-12 text-center text-slate-500 dark:text-slate-400">
+                  <FaClock className="w-12 h-12 mx-auto mb-4 text-slate-300 dark:text-slate-600" />
                   <div className="text-lg font-medium mb-2">
                     {translate('::App.Listforms.ImportManager.NoImportHistory')}
                   </div>
diff --git a/ui/src/components/importManager/ImportPreview.tsx b/ui/src/components/importManager/ImportPreview.tsx
index c8f5046..de4db27 100644
--- a/ui/src/components/importManager/ImportPreview.tsx
+++ b/ui/src/components/importManager/ImportPreview.tsx
@@ -100,13 +100,13 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'uploaded':
-        return 'text-green-600 bg-green-50 border-green-200'
+        return 'text-green-600 bg-green-50 border-green-200 dark:text-green-300 dark:bg-green-950/30 dark:border-green-900/60'
       case 'failed':
-        return 'text-red-600 bg-red-50 border-red-200'
+        return 'text-red-600 bg-red-50 border-red-200 dark:text-red-300 dark:bg-red-950/30 dark:border-red-900/60'
       case 'validating':
-        return 'text-yellow-600 bg-yellow-50 border-yellow-200'
+        return 'text-yellow-600 bg-yellow-50 border-yellow-200 dark:text-yellow-300 dark:bg-yellow-950/30 dark:border-yellow-900/60'
       default:
-        return 'text-blue-600 bg-blue-50 border-blue-200'
+        return 'text-blue-600 bg-blue-50 border-blue-200 dark:text-blue-300 dark:bg-blue-950/30 dark:border-blue-900/60'
     }
   }
 
@@ -145,14 +145,14 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
   }
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200">
+    <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
       {/* Header */}
-      <div className="p-3 border-b border-slate-200">
+      <div className="p-3 border-b border-slate-200 dark:border-slate-700">
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-center gap-4">
           {/* Başlık kısmı - Üstte mobile, solda desktop */}
           <div className="flex items-center order-1 lg:order-none">
             <FaEye className="w-5 h-5 mr-2 text-blue-500" />
-            <h3 className="text-xl font-semibold text-slate-800">
+            <h3 className="text-xl font-semibold text-slate-800 dark:text-slate-100">
               {translate('::App.Listforms.ImportManager.ImportPreviewTitle')}
             </h3>
           </div>
@@ -160,9 +160,9 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
           {/* İstatistik kartları - Mobile'da alt alta, desktop'ta yan yana */}
           <div className="order-3 lg:order-none lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2">
             <div className="flex flex-col sm:flex-row justify-center gap-2">
-              <div className="text-center px-3 py-1 bg-blue-50 rounded-full border border-blue-200 font-bold text-blue-600">
+              <div className="text-center px-3 py-1 bg-blue-50 dark:bg-blue-950/30 rounded-full border border-blue-200 dark:border-blue-900/60 font-bold text-blue-600 dark:text-blue-300">
                 {previewData?.rows?.length || session.totalRows || 0}{' '}
-                <span className="text-xs text-blue-700">
+                <span className="text-xs text-blue-700 dark:text-blue-300">
                   {translate('::App.Listforms.ImportManager.TotalRows')}
                 </span>
               </div>
@@ -184,16 +184,16 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
 
       {/* Preview Data */}
       {previewData && previewData.headers && previewData.headers.length > 0 ? (
-        <div className="p-3 border-b border-slate-200">
-          <h4 className="font-semibold text-slate-800 mb-4">
+        <div className="p-3 border-b border-slate-200 dark:border-slate-700">
+          <h4 className="font-semibold text-slate-800 dark:text-slate-100 mb-4">
             {translate('::App.Listforms.ImportManager.DataPreviewTitle')}
           </h4>
 
-          <div className="overflow-auto border border-slate-200 rounded-lg max-h-90">
+          <div className="overflow-auto border border-slate-200 dark:border-slate-700 rounded-lg max-h-90">
             <table className="w-full text-sm min-w-full">
-              <thead className="bg-slate-50 sticky top-0 z-10">
+              <thead className="bg-slate-50 dark:bg-slate-800 sticky top-0 z-10">
                 <tr>
-                  <th className="px-4 py-2 text-left font-medium text-slate-700 whitespace-nowrap w-12">
+                  <th className="px-4 py-2 text-left font-medium text-slate-700 dark:text-slate-200 whitespace-nowrap w-12">
                     <input
                       type="checkbox"
                       checked={selectAll}
@@ -204,19 +204,19 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
                   {previewData.headers.map((header: string, index: number) => (
                     <th
                       key={index}
-                      className="px-4 py-2 text-left font-medium text-slate-700 whitespace-nowrap"
+                      className="px-4 py-2 text-left font-medium text-slate-700 dark:text-slate-200 whitespace-nowrap"
                     >
                       {header}
                     </th>
                   ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100">
+              <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                 {previewData.rows.map((row: any[], rowIndex: number) => (
                   <tr
                     key={rowIndex}
-                    className={`hover:bg-slate-50 ${
-                      selectedRows.includes(rowIndex) ? 'bg-blue-50' : ''
+                    className={`hover:bg-slate-50 dark:hover:bg-slate-800/70 ${
+                      selectedRows.includes(rowIndex) ? 'bg-blue-50 dark:bg-blue-950/30' : ''
                     }`}
                   >
                     <td className="px-4 py-2">
@@ -230,7 +230,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
                     {row.map((cell, cellIndex) => (
                       <td
                         key={cellIndex}
-                        className="px-4 py-2 text-slate-600 whitespace-nowrap max-w-xs truncate"
+                        className="px-4 py-2 text-slate-600 dark:text-slate-300 whitespace-nowrap max-w-xs truncate"
                       >
                         {cell?.toString() || '-'}
                       </td>
@@ -242,25 +242,25 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
           </div>
         </div>
       ) : previewData && previewData.headers && previewData.headers.length === 0 ? (
-        <div className="p-6 border-b border-slate-200">
+        <div className="p-6 border-b border-slate-200 dark:border-slate-700">
           <div className="text-center py-8">
             <FaExclamationTriangle className="w-12 h-12 mx-auto mb-4 text-yellow-500" />
-            <h4 className="font-semibold text-slate-800 mb-2">
+            <h4 className="font-semibold text-slate-800 dark:text-slate-100 mb-2">
               {translate('::App.Listforms.ImportManager.NoDataFoundTitle')}
             </h4>
-            <p className="text-slate-600">
+            <p className="text-slate-600 dark:text-slate-400">
               {translate('::App.Listforms.ImportManager.NoDataFoundDescription')}
             </p>
           </div>
         </div>
       ) : (
-        <div className="p-6 border-b border-slate-200">
+        <div className="p-6 border-b border-slate-200 dark:border-slate-700">
           <div className="text-center py-8">
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
-            <h4 className="font-semibold text-slate-800 mb-2">
+            <h4 className="font-semibold text-slate-800 dark:text-slate-100 mb-2">
               {translate('::App.Listforms.ImportManager.LoadingPreviewTitle')}
             </h4>
-            <p className="text-slate-600">
+            <p className="text-slate-600 dark:text-slate-400">
               {translate('::App.Listforms.ImportManager.LoadingPreviewDescription')}
             </p>
           </div>
@@ -271,8 +271,8 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
       <div className="p-3">
         {/* Success Message */}
         {showSuccessMessage && lastExecutionResult && (
-          <div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
-            <div className="flex items-center space-x-2 text-green-700">
+          <div className="mb-4 p-4 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-900/60 rounded-lg">
+            <div className="flex items-center space-x-2 text-green-700 dark:text-green-300">
               <FaCheckCircle className="w-5 h-5" />
               <span className="font-medium">
                 {translate('::App.Listforms.ImportManager.ImportProgress.Status.Uploaded')}{' '}
@@ -286,7 +286,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-4">
             {selectedRows.length === 0 && (previewData?.rows?.length || 0) > 0 && (
-              <div className="flex items-center space-x-2 text-orange-600">
+              <div className="flex items-center space-x-2 text-orange-600 dark:text-orange-300">
                 <FaExclamationTriangle className="w-5 h-5" />
                 <span className="font-medium">
                   {translate('::App.Listforms.ImportManager.SelectRowsWarning')}
@@ -295,7 +295,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
             )}
 
             {selectedRows.length > 0 && (
-              <div className="flex items-center space-x-2 text-blue-600">
+              <div className="flex items-center space-x-2 text-blue-600 dark:text-blue-300">
                 <FaCheckCircle className="w-5 h-5" />
                 <span className="font-medium">
                   {selectedRows.length} {translate('::App.Listforms.ImportManager.RowsSelected')}
@@ -304,7 +304,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
             )}
 
             {(previewData?.rows?.length || 0) === 0 && (
-              <div className="flex items-center space-x-2 text-red-600">
+              <div className="flex items-center space-x-2 text-red-600 dark:text-red-300">
                 <FaExclamationTriangle className="w-5 h-5" />
                 <span className="font-medium">
                   {translate('::App.Listforms.ImportManager.NoRowsAvailable')}
@@ -314,7 +314,7 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
           </div>
 
           <div className="flex space-x-3">
-            <button className="px-4 py-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors flex items-center space-x-2">
+            <button className="px-4 py-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 dark:text-slate-300 dark:hover:text-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors flex items-center space-x-2">
               <FaTimes className="w-4 h-4" />
               <span>{translate('::Cancel')}</span>
             </button>
diff --git a/ui/src/components/importManager/ImportProgress.tsx b/ui/src/components/importManager/ImportProgress.tsx
index 5f1f3ae..9cd9aae 100644
--- a/ui/src/components/importManager/ImportProgress.tsx
+++ b/ui/src/components/importManager/ImportProgress.tsx
@@ -59,15 +59,17 @@ export const ImportProgress: React.FC<ImportProgressProps> = ({ session }) => {
   }
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
+    <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
       <div className="text-center space-y-6">
         {/* Status Icon */}
         <div className="flex justify-center">{getStatusIcon()}</div>
 
         {/* Status Message */}
         <div>
-          <h3 className="text-xl font-semibold text-slate-800 mb-2">{getStatusMessage()}</h3>
-          <p className="text-slate-600">
+          <h3 className="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-2">
+            {getStatusMessage()}
+          </h3>
+          <p className="text-slate-600 dark:text-slate-400">
             {translate('::App.Listforms.Status.Processing')}{' '}
             {session.blobName}
           </p>
@@ -75,11 +77,11 @@ export const ImportProgress: React.FC<ImportProgressProps> = ({ session }) => {
 
         {/* Progress Bar */}
         <div className="w-full max-w-md mx-auto">
-          <div className="flex justify-between text-sm text-slate-600 mb-2">
+          <div className="flex justify-between text-sm text-slate-600 dark:text-slate-400 mb-2">
             <span>{translate('::App.Listforms.ImportManager.ImportProgress.ProgressLabel')}</span>
             <span>{Math.round(getProgressPercentage())}%</span>
           </div>
-          <div className="w-full bg-slate-200 rounded-full h-2">
+          <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
             <div
               className="bg-blue-500 h-2 rounded-full transition-all duration-300 ease-out"
               style={{ width: `${getProgressPercentage()}%` }}
diff --git a/ui/src/components/template/MobileNav.tsx b/ui/src/components/template/MobileNav.tsx
index 0d30bbf..4a0d4a0 100644
--- a/ui/src/components/template/MobileNav.tsx
+++ b/ui/src/components/template/MobileNav.tsx
@@ -62,7 +62,7 @@ const MobileNav = () => {
             title="Navigation"
             isOpen={isOpen}
             bodyClass={classNames(navColor(), 'p-0')}
-            width={330}
+            width={320}
             placement={direction === DIR_RTL ? 'right' : 'left'}
             onClose={onDrawerClose}
             onRequestClose={onDrawerClose}
diff --git a/ui/src/components/ui/Dialog/Dialog.tsx b/ui/src/components/ui/Dialog/Dialog.tsx
index 68cb731..fffd505 100644
--- a/ui/src/components/ui/Dialog/Dialog.tsx
+++ b/ui/src/components/ui/Dialog/Dialog.tsx
@@ -17,6 +17,19 @@ const DialogContext = createContext<DialogContextValue>({ isMaximized: false })
 
 export const useDialogContext = () => useContext(DialogContext)
 
+const DialogHeader = ({
+  children,
+  className,
+}: {
+  children?: ReactNode
+  className?: string
+}) => (
+  <div className={classNames('dialog-header', className)}>
+    {children}
+  </div>
+)
+DialogHeader.displayName = 'Dialog.Header'
+
 const DialogBody = ({
   children,
   className,
@@ -24,14 +37,8 @@ const DialogBody = ({
   children?: ReactNode
   className?: string
 }) => {
-  const { isMaximized } = useContext(DialogContext)
   return (
-    <div
-      className={classNames(
-        isMaximized && 'flex-1 min-h-0 flex flex-col overflow-hidden',
-        className,
-      )}
-    >
+    <div className={classNames('dialog-body', className)}>
       {children}
     </div>
   )
@@ -45,9 +52,8 @@ const DialogFooter = ({
   children?: ReactNode
   className?: string
 }) => {
-  const { isMaximized } = useContext(DialogContext)
   return (
-    <div className={classNames(isMaximized && 'flex-shrink-0', className)}>
+    <div className={classNames('dialog-footer', className)}>
       {children}
     </div>
   )
@@ -231,13 +237,7 @@ const Dialog = (props: DialogProps) => {
         {closable && !showWindowControls && renderCloseButton}
         {closable && showWindowControls && renderWindowControls}
         <DialogContext.Provider value={{ isMaximized }}>
-          {isMaximized ? (
-            <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-              {children}
-            </div>
-          ) : (
-            children
-          )}
+          {children}
         </DialogContext.Provider>
       </motion.div>
     </Modal>
@@ -247,11 +247,13 @@ const Dialog = (props: DialogProps) => {
 Dialog.displayName = 'Dialog'
 
 type DialogType = typeof Dialog & {
+  Header: typeof DialogHeader
   Body: typeof DialogBody
   Footer: typeof DialogFooter
 }
 
 const DialogWithSubComponents = Dialog as DialogType
+DialogWithSubComponents.Header = DialogHeader
 DialogWithSubComponents.Body = DialogBody
 DialogWithSubComponents.Footer = DialogFooter
 
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep2.tsx b/ui/src/views/admin/listForm/wizard/WizardStep2.tsx
index 689a337..f7f8350 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep2.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep2.tsx
@@ -5,7 +5,7 @@ import { SelectBoxOption } from '@/types/shared'
 import { Field, FieldProps, FormikErrors, FormikTouched, useFormikContext } from 'formik'
 import { useState } from 'react'
 import CreatableSelect from 'react-select/creatable'
-import { FaArrowLeft, FaArrowRight, FaPlus } from 'react-icons/fa'
+import { FaArrowLeft, FaArrowRight, FaPlus, FaTable } from 'react-icons/fa'
 import { dbSourceTypeOptions, listFormDefaultLayoutOptions, selectCommandTypeOptions, sqlDataTypeToDbType } from '../edit/options'
 import { ListFormWizardDto } from '@/proxy/admin/wizard/models'
 import SqlTableDesignerDialog from '@/views/developerKit/SqlTableDesignerDialog'
@@ -68,8 +68,35 @@ const WizardStep2 = ({
   onNext,
 }: WizardStep2Props) => {
   const [showTableDesignerDialog, setShowTableDesignerDialog] = useState(false)
+  const [designTableData, setDesignTableData] = useState<{
+    schemaName: string
+    tableName: string
+  } | null>(null)
   const formik = useFormikContext<ListFormWizardDto>()
 
+  const selectedTable = values.selectCommand
+    ? dbObjects?.tables.find(
+        (table) =>
+          table.tableName === values.selectCommand ||
+          table.fullName === values.selectCommand ||
+          `${table.schemaName}.${table.tableName}` === values.selectCommand,
+      )
+    : undefined
+
+  const handleNewTable = () => {
+    setDesignTableData(null)
+    setShowTableDesignerDialog(true)
+  }
+
+  const handleDesignTable = () => {
+    if (!selectedTable) return
+    setDesignTableData({
+      schemaName: selectedTable.schemaName,
+      tableName: selectedTable.tableName,
+    })
+    setShowTableDesignerDialog(true)
+  }
+
   const handleTableDeployed = async (table: { schemaName: string; tableName: string }) => {
     await onDbObjectsRefresh(values.dataSourceCode)
     formik.setFieldValue('selectCommand', table.tableName)
@@ -283,10 +310,19 @@ const WizardStep2 = ({
                     variant="solid"
                     icon={<FaPlus />}
                     disabled={!values.dataSourceCode}
-                    onClick={() => setShowTableDesignerDialog(true)}
+                    onClick={handleNewTable}
                   >
                     New Table
                   </Button>
+                  <Button
+                    type="button"
+                    variant="default"
+                    icon={<FaTable />}
+                    disabled={!values.dataSourceCode || !selectedTable}
+                    onClick={handleDesignTable}
+                  >
+                    Design Table
+                  </Button>
                 </div>
               )
             }}
@@ -832,9 +868,12 @@ const WizardStep2 = ({
 
       <SqlTableDesignerDialog
         isOpen={showTableDesignerDialog}
-        onClose={() => setShowTableDesignerDialog(false)}
+        onClose={() => {
+          setShowTableDesignerDialog(false)
+          setDesignTableData(null)
+        }}
         dataSource={values.dataSourceCode}
-        initialTableData={null}
+        initialTableData={designTableData}
         onDeployed={handleTableDeployed}
       />
     </div>
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep6.tsx b/ui/src/views/admin/listForm/wizard/WizardStep6.tsx
index 6c6f4c5..75bb89f 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep6.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep6.tsx
@@ -196,34 +196,56 @@ function WizardStep6({
 
   const resetDemo = () => {
     const startId = uniqueCriteriaId([])
-    const approvalId = uniqueCriteriaId([], [startId])
-    const endId = uniqueCriteriaId([], [startId, approvalId])
+    const approval1Id = uniqueCriteriaId([], [startId])
+    const approval2Id = uniqueCriteriaId([], [startId, approval1Id])
+    const informId = uniqueCriteriaId([], [startId, approval1Id, approval2Id])
+    const endId = uniqueCriteriaId([], [startId, approval1Id, approval2Id, informId])
     updateCriteria([
       {
         ...normalizeCriteria(emptyCriteria('Start', listFormCode)),
         id: startId,
         nodeId: startId,
-        title: uniqueCriteriaTitle('Start', []),
-        nextOnStart: approvalId,
-        positionX: 72,
-        positionY: 160,
+        title: 'İş Akışı Başlat1',
+        nextOnStart: approval1Id,
+        positionX: 34,
+        positionY: 28,
       } as WorkflowCriteriaDto,
       {
         ...normalizeCriteria(emptyCriteria('Approval', listFormCode)),
-        id: approvalId,
-        nodeId: approvalId,
-        title: uniqueCriteriaTitle('Approval', []),
-        nextOnApprove: endId,
-        positionX: 360,
-        positionY: 160,
+        id: approval1Id,
+        nodeId: approval1Id,
+        title: 'Onay1',
+        nextOnApprove: approval2Id,
+        nextOnReject: informId,
+        positionX: 323,
+        positionY: 28,
+      } as WorkflowCriteriaDto,
+      {
+        ...normalizeCriteria(emptyCriteria('Approval', listFormCode)),
+        id: approval2Id,
+        nodeId: approval2Id,
+        title: 'Onay2',
+        nextOnApprove: informId,
+        nextOnReject: informId,
+        positionX: 586,
+        positionY: 28,
+      } as WorkflowCriteriaDto,
+      {
+        ...normalizeCriteria(emptyCriteria('Inform', listFormCode)),
+        id: informId,
+        nodeId: informId,
+        title: 'Bilgilendirme1',
+        nextOnStart: endId,
+        positionX: 458,
+        positionY: 336,
       } as WorkflowCriteriaDto,
       {
         ...normalizeCriteria(emptyCriteria('End', listFormCode)),
         id: endId,
         nodeId: endId,
-        title: uniqueCriteriaTitle('End', []),
-        positionX: 650,
-        positionY: 160,
+        title: 'İş Akışı Bitir1',
+        positionX: 792,
+        positionY: 336,
       } as WorkflowCriteriaDto,
     ])
   }
diff --git a/ui/src/views/developerKit/SqlTableDesignerDialog.tsx b/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
index fadaa42..d383d31 100644
--- a/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
+++ b/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
@@ -2,7 +2,6 @@
 import classNames from 'classnames'
 import { createPortal } from 'react-dom'
 import { Button, Dialog, Notification, toast, Checkbox } from '@/components/ui'
-import { useDialogContext } from '@/components/ui/Dialog/Dialog'
 import {
   FaPlus,
   FaTrash,
@@ -835,9 +834,8 @@ const STEPS = ['Sütun Tasarımı', 'Entity Ayarları', 'Index / Key', 'İlişki
 type Step = 0 | 1 | 2 | 3 | 4
 
 function StepContentWrapper({ children }: { children: React.ReactNode }) {
-  const { isMaximized } = useDialogContext()
   return (
-    <div className={isMaximized ? 'flex-1 min-h-0 overflow-auto' : 'min-h-[420px]'}>
+    <div className="min-h-[420px] flex flex-col">
       {children}
     </div>
   )
@@ -1810,7 +1808,7 @@ const SqlTableDesignerDialog = ({
             </div>
           )}
 
-          <div className="flex flex-col gap-1 max-h-80 overflow-y-auto pr-1">
+          <div className="flex flex-col gap-1 pr-1">
             {columns.map((col, idx) => {
               const isDuplicate =
                 col.columnName.trim() !== '' &&
@@ -2741,7 +2739,7 @@ const SqlTableDesignerDialog = ({
 
   return (
     <Dialog isOpen={isOpen} onClose={handleClose} onRequestClose={handleClose} width={1100}>
-      <Dialog.Body className="flex flex-col gap-2">
+      <Dialog.Header className="flex flex-col gap-2">
         {/* Header */}
         <div className="flex items-center gap-3 border-b pb-3 flex-shrink-0">
           <FaTable className="text-2xl text-blue-500" />
@@ -2761,7 +2759,9 @@ const SqlTableDesignerDialog = ({
 
         {/* Steps */}
         <div className="flex-shrink-0">{renderStepIndicator()}</div>
+      </Dialog.Header>
 
+      <Dialog.Body className="flex flex-col gap-2">
         {/* Content */}
         <StepContentWrapper>
           {step === 0 && renderColumnDesigner()}