diff --git a/api/src/Sozsoft.Platform.DbMigrator/Migrations/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Migrations/LanguagesData.json
index 5f3698fe..3d01bad9 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Migrations/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Migrations/LanguagesData.json
@@ -10854,6 +10854,48 @@
             "tr": "Görüntüle",
             "en": "View"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.CardView",
+            "tr": "Kart Görünümü",
+            "en": "Card View"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.ListView",
+            "tr": "Liste Görünümü",
+            "en": "List View"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.Name",
+            "tr": "Ad",
+            "en": "Name"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.Description",
+            "tr": "Açıklama",
+            "en": "Description"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.Actions",
+            "tr": "İşlemler",
+            "en": "Actions"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.Dependencies",
+            "tr": "Bağımlılıklar",
+            "en": "Dependencies"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Platform.RoutePath",
+            "tr": "Rota",
+            "en": "Route Path"
+        },
         {
             "resourceName": "Platform",
             "key": "App.Platform.Manage2",
diff --git a/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx b/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
index df077ff5..211234c2 100644
--- a/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
@@ -18,6 +18,8 @@ import {
   FaExternalLinkAlt,
   FaFileExport,
   FaFileImport,
+  FaTh,
+  FaList,
 } from 'react-icons/fa'
 import DbMigrateButton from '@/components/shared/DbMigrateButton'
 import {
@@ -28,7 +30,8 @@ import {
 } from '@/services/wizard.service'
 import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { useStoreState } from '@/store/store'
+import { useStoreActions, useStoreState } from '@/store/store'
+import type { ListViewLayoutType } from '../edit/types'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { WizardComponentKindEnum, WizardFileInfoDto } from '@/proxy/admin/wizard/models'
 import { useNavigationIcons } from '@/proxy/menus/navigation-icon.config'
@@ -36,6 +39,9 @@ import { usePermission } from '@/utils/hooks/usePermission'
 import { WIZARD_PERMISSION } from '@/constants/permission.constant'
 import WizardImportDialog from './WizardImportDialog'
 
+/** Layout tercihi diger listelerle ayni yerde (admin.lists.states) saklanir. */
+const VIEW_STATE_CODE = 'developerkit-wizardmanager'
+
 interface ConfirmState {
   fileName: string
   wizardName: string
@@ -57,6 +63,13 @@ const WizardFileManager = () => {
   const [importFile, setImportFile] = useState<File | null>(null)
   const importInputRef = useRef<HTMLInputElement>(null)
 
+  const { states } = useStoreState((state) => state.admin.lists)
+  const { setStates } = useStoreActions((a) => a.admin.lists)
+  const viewMode: ListViewLayoutType =
+    states.find((s) => s.listFormCode === VIEW_STATE_CODE)?.layout === 'grid' ? 'grid' : 'card'
+  const setViewMode = (layout: ListViewLayoutType) =>
+    setStates({ listFormCode: VIEW_STATE_CODE, layout })
+
   // Butonlar yalnizca gizlenir; asil kontrol ListFormWizardAppService'te yapilir.
   const { checkPermission } = usePermission()
   const canCreate = checkPermission(WIZARD_PERMISSION.CREATE)
@@ -152,6 +165,72 @@ const WizardFileManager = () => {
     }
   }
 
+  const renderActions = (f: WizardFileInfoDto, className: string) => (
+    <div className={className}>
+      {!f.hasInsertedRecords && (
+        <span
+          title={translate('::App.ListForm.WizardFileNoTrackedRecords')}
+          className="text-yellow-500 text-xs flex items-center gap-1"
+        >
+          <FaExclamationTriangle />
+        </span>
+      )}
+      {canUpdate && (
+        <Button
+          type="button"
+          variant="solid"
+          color="blue-600"
+          title={translate('::App.Platform.Edit')}
+          onClick={() =>
+            navigate(ROUTES_ENUM.protected.saas.listFormManagement.wizard, {
+              state: { editFileName: f.fileName },
+            })
+          }
+        >
+          <FaEdit className="w-4 h-4" />
+        </Button>
+      )}
+      {/* Menünün açtığı adres yeni sekmede açılır; adres yoksa buton anlamsızdır. */}
+      {f.menuUrl && (
+        <Button
+          type="button"
+          variant="solid"
+          color="gray-600"
+          title={translate('::App.Platform.OpenUrl')}
+          onClick={() => window.open(f.menuUrl, '_blank', 'noopener,noreferrer')}
+        >
+          <FaExternalLinkAlt className="w-4 h-4" />
+        </Button>
+      )}
+      {canExport && (
+        <Button
+          type="button"
+          variant="solid"
+          color="green-600"
+          title={translate('::App.ListForm.WizardFileExport')}
+          loading={exportingFile === f.fileName}
+          onClick={() => handleExport(f)}
+        >
+          <FaFileExport className="w-4 h-4" />
+        </Button>
+      )}
+      {canDelete && (
+        <Button
+          type="button"
+          variant="solid"
+          color="red-600"
+          title={translate('::App.Platform.Delete')}
+          loading={deletingFile === f.fileName}
+          onClick={() =>
+            setConfirm({ fileName: f.fileName, wizardName: f.wizardName || f.fileName })
+          }
+        >
+          <FaTrash className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  )
+
   return (
     <Container>
       {/* ── Header ─────────────────────────────────────────────── */}
@@ -227,6 +306,24 @@ const WizardFileManager = () => {
               </span>
             </Button>
           )}
+          <div className="flex items-center gap-1">
+            <Button
+              size="sm"
+              type="button"
+              icon={<FaTh />}
+              variant={viewMode === 'card' ? 'solid' : 'default'}
+              title={translate('::App.Platform.CardView')}
+              onClick={() => setViewMode('card')}
+            />
+            <Button
+              size="sm"
+              type="button"
+              icon={<FaList />}
+              variant={viewMode === 'grid' ? 'solid' : 'default'}
+              title={translate('::App.Platform.ListView')}
+              onClick={() => setViewMode('grid')}
+            />
+          </div>
         </div>
       </div>
 
@@ -246,138 +343,149 @@ const WizardFileManager = () => {
           </p>
         )}
 
-        <div className="space-y-2">
-          {filteredFiles.map((f) => {
-            const Icon = navigationIcon[f.menuIcon] ?? FaDatabase
-            const isCustom = f.componentKind === WizardComponentKindEnum.Custom
-            return (
-              <div
-                key={f.fileName}
-                className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
-              >
-                <div className="flex items-center gap-3 min-w-0">
-                  <Icon className="text-indigo-400 shrink-0 text-3xl" />
-                  <div className="min-w-0 space-y-1">
-                    {/* 1. satır: wizard adı */}
-                    <div className="font-medium text-sm text-gray-800 dark:text-gray-200 truncate">
-                      {f.wizardName || f.fileName}
-                    </div>
-
-                    {/* 2. satır: dosya adı ve üretilen kod */}
-                    <div className="flex flex-wrap items-center gap-x-2 text-xs text-gray-400">
-                      <span className="truncate font-mono">{f.fileName}</span>
-                      <span className="text-gray-300 dark:text-gray-600">•</span>
-                      <span className="truncate">
-                        {isCustom ? f.customComponentName : f.listFormCode}
-                      </span>
-                    </div>
-
-                    {/* 3. satır: yol ayrımı (Custom / List), layout ve menü adresi */}
-                    <div className="flex flex-wrap items-center gap-1.5 text-xs">
-                      <span
-                        className={classNames(
-                          'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium',
-                          isCustom
-                            ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
-                            : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
-                        )}
+        {viewMode === 'card' ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+            {filteredFiles.map((f) => {
+              const Icon = navigationIcon[f.menuIcon] ?? FaDatabase
+              const isCustom = f.componentKind === WizardComponentKindEnum.Custom
+              return (
+                <div
+                  key={f.fileName}
+                  className="flex flex-col gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+                >
+                  <div className="flex items-start gap-2 min-w-0">
+                    <Icon className="text-indigo-400 shrink-0 text-2xl" />
+                    <div className="min-w-0 flex-1 space-y-1">
+                      {/* 1. satır: wizard adı */}
+                      <div
+                        className="font-medium text-sm text-gray-800 dark:text-gray-200 truncate"
+                        title={f.wizardName || f.fileName}
                       >
-                        {isCustom ? <FaCube /> : <FaListUl />}
-                        {translate(
-                          isCustom
-                            ? '::App.WizardStepComponent.CustomComponent'
-                            : '::App.WizardStepComponent.ListComponent',
-                        )}
-                      </span>
+                        {f.wizardName || f.fileName}
+                      </div>
 
-                      {/* Custom yolunda layout kavramı yoktur. */}
-                      {!isCustom && f.defaultLayout && (
-                        <span className="inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                          {f.defaultLayout}
-                        </span>
-                      )}
-
-                      {f.menuUrl && (
-                        <span className="inline-flex min-w-0 items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 font-mono text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                          <FaLink className="shrink-0" />
-                          <span className="truncate">{f.menuUrl}</span>
-                        </span>
-                      )}
+                      {/* 2. satır: dosya adı ve üretilen kod */}
+                      <div className="text-xs text-gray-400 truncate font-mono" title={f.fileName}>
+                        {f.fileName}
+                      </div>
+                      <div className="text-xs text-gray-400 truncate">
+                        {isCustom ? f.customComponentName : f.listFormCode}
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <div className="flex items-center gap-2 shrink-0 sm:ml-3">
-                  {!f.hasInsertedRecords && (
+                  {/* 3. satır: yol ayrımı (Custom / List), layout ve menü adresi */}
+                  <div className="flex flex-wrap items-center gap-1.5 text-xs">
                     <span
-                      title={translate('::App.ListForm.WizardFileNoTrackedRecords')}
-                      className="text-yellow-500 text-xs flex items-center gap-1"
+                      className={classNames(
+                        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium',
+                        isCustom
+                          ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
+                          : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
+                      )}
                     >
-                      <FaExclamationTriangle />
+                      {isCustom ? <FaCube /> : <FaListUl />}
+                      {translate(
+                        isCustom
+                          ? '::App.WizardStepComponent.CustomComponent'
+                          : '::App.WizardStepComponent.ListComponent',
+                      )}
                     </span>
-                  )}
-                  {/* Menünün açtığı adres yeni sekmede açılır; adres yoksa buton anlamsızdır. */}
-                  {f.menuUrl && (
-                    <Button
-                      size="sm"
-                      variant="plain"
-                      className="text-emerald-500 hover:bg-emerald-50 dark:hover:bg-emerald-900/20"
-                      type="button"
-                      title={translate('::App.Platform.OpenUrl')}
-                      onClick={() => window.open(f.menuUrl, '_blank', 'noopener,noreferrer')}
-                    >
-                      <FaExternalLinkAlt />
-                    </Button>
-                  )}
-                  {canExport && (
-                    <Button
-                      size="sm"
-                      variant="plain"
-                      className="text-sky-500 hover:bg-sky-50 dark:hover:bg-sky-900/20"
-                      type="button"
-                      title={translate('::App.ListForm.WizardFileExport')}
-                      loading={exportingFile === f.fileName}
-                      onClick={() => handleExport(f)}
-                    >
-                      <FaFileExport />
-                    </Button>
-                  )}
-                  {canUpdate && (
-                    <Button
-                      size="sm"
-                      variant="plain"
-                      className="text-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20"
-                      type="button"
-                      title={translate('::App.Platform.Edit')}
-                      onClick={() =>
-                        navigate(ROUTES_ENUM.protected.saas.listFormManagement.wizard, {
-                          state: { editFileName: f.fileName },
-                        })
-                      }
-                    >
-                      <FaEdit />
-                    </Button>
-                  )}
-                  {canDelete && (
-                    <Button
-                      size="sm"
-                      variant="plain"
-                      className="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
-                      type="button"
-                      title={translate('::App.Platform.Delete')}
-                      loading={deletingFile === f.fileName}
-                      onClick={() =>
-                        setConfirm({ fileName: f.fileName, wizardName: f.wizardName || f.fileName })
-                      }
-                    >
-                      <FaTrash />
-                    </Button>
+
+                    {/* Custom yolunda layout kavramı yoktur. */}
+                    {!isCustom && f.defaultLayout && (
+                      <span className="inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                        {f.defaultLayout}
+                      </span>
+                    )}
+
+                    {f.menuUrl && (
+                      <span
+                        className="inline-flex min-w-0 max-w-full items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 font-mono text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                        title={f.menuUrl}
+                      >
+                        <FaLink className="shrink-0" />
+                        <span className="truncate">{f.menuUrl}</span>
+                      </span>
+                    )}
+                  </div>
+
+                  {renderActions(
+                    f,
+                    'flex items-center justify-end gap-1 pt-1 border-t border-gray-200 dark:border-gray-700',
                   )}
                 </div>
-              </div>
-            )
-          })}
-        </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredFiles.map((f) => {
+              const Icon = navigationIcon[f.menuIcon] ?? FaDatabase
+              const isCustom = f.componentKind === WizardComponentKindEnum.Custom
+              return (
+                <div
+                  key={f.fileName}
+                  className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <Icon className="text-indigo-400 shrink-0 text-3xl" />
+                    <div className="min-w-0 space-y-1">
+                      {/* 1. satır: wizard adı */}
+                      <div className="font-medium text-sm text-gray-800 dark:text-gray-200 truncate">
+                        {f.wizardName || f.fileName}
+                      </div>
+
+                      {/* 2. satır: dosya adı ve üretilen kod */}
+                      <div className="flex flex-wrap items-center gap-x-2 text-xs text-gray-400">
+                        <span className="truncate font-mono">{f.fileName}</span>
+                        <span className="text-gray-300 dark:text-gray-600">•</span>
+                        <span className="truncate">
+                          {isCustom ? f.customComponentName : f.listFormCode}
+                        </span>
+                      </div>
+
+                      {/* 3. satır: yol ayrımı (Custom / List), layout ve menü adresi */}
+                      <div className="flex flex-wrap items-center gap-1.5 text-xs">
+                        <span
+                          className={classNames(
+                            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium',
+                            isCustom
+                              ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
+                              : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
+                          )}
+                        >
+                          {isCustom ? <FaCube /> : <FaListUl />}
+                          {translate(
+                            isCustom
+                              ? '::App.WizardStepComponent.CustomComponent'
+                              : '::App.WizardStepComponent.ListComponent',
+                          )}
+                        </span>
+
+                        {/* Custom yolunda layout kavramı yoktur. */}
+                        {!isCustom && f.defaultLayout && (
+                          <span className="inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                            {f.defaultLayout}
+                          </span>
+                        )}
+
+                        {f.menuUrl && (
+                          <span className="inline-flex min-w-0 items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 font-mono text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                            <FaLink className="shrink-0" />
+                            <span className="truncate">{f.menuUrl}</span>
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {renderActions(f, 'flex items-center gap-1 shrink-0 sm:ml-3')}
+                </div>
+              )
+            })}
+          </div>
+        )}
       </div>
 
       {importFile && (
diff --git a/ui/src/views/developerKit/ComponentManager.tsx b/ui/src/views/developerKit/ComponentManager.tsx
index 12130f6f..683aecc8 100644
--- a/ui/src/views/developerKit/ComponentManager.tsx
+++ b/ui/src/views/developerKit/ComponentManager.tsx
@@ -12,6 +12,8 @@ import {
   FaExternalLinkAlt,
   FaCog,
   FaSyncAlt,
+  FaTh,
+  FaList,
 } from 'react-icons/fa'
 import Widget from '@/components/common/Widget'
 import { ROUTES_ENUM } from '@/routes/route.constant'
@@ -26,6 +28,12 @@ import { usePermission } from '@/utils/hooks/usePermission'
 import { COMPONENT_PERMISSION } from '@/constants/permission.constant'
 import Input from '@/components/ui/Input'
 import Select from '@/components/ui/Select'
+import type { CustomComponent } from '@/proxy/developerKit/models'
+import { useStoreActions, useStoreState } from '@/store/store'
+import type { ListViewLayoutType } from '../admin/listForm/edit/types'
+
+/** Layout tercihi diger listelerle ayni yerde (admin.lists.states) saklanir. */
+const VIEW_STATE_CODE = 'developerkit-components'
 
 const ComponentManager: React.FC = () => {
   const {
@@ -40,6 +48,12 @@ const ComponentManager: React.FC = () => {
   const [filterActive, setFilterActive] = useState<'all' | 'active' | 'inactive'>('all')
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [editorComponentId, setEditorComponentId] = useState<string | null | undefined>(undefined)
+  const { states } = useStoreState((state) => state.admin.lists)
+  const { setStates } = useStoreActions((a) => a.admin.lists)
+  const viewMode: ListViewLayoutType =
+    states.find((s) => s.listFormCode === VIEW_STATE_CODE)?.layout === 'grid' ? 'grid' : 'card'
+  const setViewMode = (layout: ListViewLayoutType) =>
+    setStates({ listFormCode: VIEW_STATE_CODE, layout })
 
   // Calculate statistics
   const totalComponents = components?.length || 0
@@ -104,6 +118,85 @@ const ComponentManager: React.FC = () => {
     }
   }
 
+  const renderStatusToggle = (component: CustomComponent) => (
+    <Button
+      type="button"
+      variant="plain"
+      shape="circle"
+      disabled={!canUpdate}
+      className="!inline-flex !h-auto items-center gap-1 rounded !px-2 py-1 text-xs font-medium transition-colors"
+      onClick={() => handleToggleActive(component.id, !component.isActive)}
+    >
+      {component.isActive ? (
+        <>
+          <FaEye className="w-4 h-4" />
+          {translate('::App.Listform.ListformField.IsActive')}
+        </>
+      ) : (
+        <>
+          <FaEyeSlash className="w-4 h-4" />
+          {translate('::App.Platform.Passive')}
+        </>
+      )}
+    </Button>
+  )
+
+  const renderActions = (component: CustomComponent) => (
+    <div className="flex items-center gap-1">
+      {canUpdate && (
+        <Button
+          type="button"
+          variant="solid"
+          color="blue-600"
+          title={translate('::App.Platform.Edit')}
+          onClick={() =>
+            window.open(
+              ROUTES_ENUM.protected.saas.developerKit.componentsEdit.replace(':id', component.id),
+              '_blank',
+            )
+          }
+        >
+          <FaRegEdit className="w-4 h-4" />
+        </Button>
+      )}
+      <Button
+        type="button"
+        variant="solid"
+        color="gray-600"
+        disabled={!component.isActive || !component.routePath?.trim()}
+        title={translate('::App.Platform.OpenUrl')}
+        onClick={() => {
+          const routePath = component.routePath.startsWith('/')
+            ? component.routePath
+            : `/${component.routePath}`
+          window.open(routePath, '_blank')
+        }}
+      >
+        <FaExternalLinkAlt className="w-4 h-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="solid"
+        color="green-600"
+        title={translate('::App.Platform.View')}
+        onClick={() => setEditorComponentId(component.id)}
+      >
+        <FaCog className="w-4 h-4" />
+      </Button>
+      {canDelete && (
+        <Button
+          type="button"
+          variant="solid"
+          color="red-600"
+          title={translate('::App.Platform.Delete')}
+          onClick={() => handleDelete(component.id)}
+        >
+          <FaTrashAlt className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  )
+
   return (
     <div className="space-y-4">
       <PageTitle title={translate('::' + 'App.DeveloperKit.Components')} />
@@ -181,6 +274,22 @@ const ComponentManager: React.FC = () => {
             </Button>
           </div>
         )}
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            icon={<FaTh />}
+            variant={viewMode === 'card' ? 'solid' : 'default'}
+            title={translate('::App.Platform.CardView')}
+            onClick={() => setViewMode('card')}
+          />
+          <Button
+            type="button"
+            icon={<FaList />}
+            variant={viewMode === 'grid' ? 'solid' : 'default'}
+            title={translate('::App.Platform.ListView')}
+            onClick={() => setViewMode('grid')}
+          />
+        </div>
       </div>
 
       {/* Components List */}
@@ -191,148 +300,158 @@ const ComponentManager: React.FC = () => {
           </div>
         </div>
       ) : filteredComponents?.length > 0 ? (
-        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
-          {filteredComponents.map((component) => (
-            <div
-              key={component.id}
-              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 dark:text-gray-100">
-                        {component.name}
-                      </h3>
-                      <div
-                        className={`w-2 h-2 rounded-full ${
-                          component.isActive ? 'bg-green-500' : 'bg-slate-300 dark:bg-gray-700'
-                        }`}
-                      />
-                    </div>
+        viewMode === 'card' ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
+            {filteredComponents.map((component) => (
+              <div
+                key={component.id}
+                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-4">
+                  <div className="flex items-start justify-between">
+                    {/* Sol taraf */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3
+                          className="text-base font-semibold text-slate-900 dark:text-gray-100 truncate"
+                          title={component.name}
+                        >
+                          {component.name}
+                        </h3>
+                        <div
+                          className={`w-2 h-2 shrink-0 rounded-full ${
+                            component.isActive ? 'bg-green-500' : 'bg-slate-300 dark:bg-gray-700'
+                          }`}
+                        />
+                      </div>
 
-                    <p className="text-slate-600 dark:text-gray-300 text-sm mb-2">
-                      {parseComponentDependencies(component.dependencies).join(', ') ||
-                        translate('::App.DeveloperKitComponent.NoDependencies')}
-                    </p>
-
-                    <p className="text-slate-600 dark:text-gray-300 text-sm mb-2">
-                      {component.routePath}
-                    </p>
-
-                    {component.description && (
-                      <p className="text-slate-600 dark:text-gray-300 text-sm mb-2">
-                        {component.description}
+                      <p className="text-slate-600 dark:text-gray-300 text-sm mb-2 truncate">
+                        {parseComponentDependencies(component.dependencies).join(', ') ||
+                          translate('::App.DeveloperKitComponent.NoDependencies')}
                       </p>
-                    )}
 
-                    {componentErrors[component.name] && (
                       <p
-                        className="text-xs text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded px-2 py-1 mb-2 break-words"
-                        title={componentErrors[component.name]}
+                        className="text-slate-600 dark:text-gray-300 text-sm mb-2 truncate"
+                        title={component.routePath}
                       >
-                        {componentErrors[component.name]}
+                        {component.routePath}
                       </p>
-                    )}
-                  </div>
 
-                  {/* Sağ taraf */}
-                  {component.lastModificationTime && (
-                    <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() ?? ''}
-                      </span>
-                    </div>
-                  )}
-                </div>
-
-                {/* Actions */}
-                <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
-                      type="button"
-                      variant="plain"
-                      shape="circle"
-                      disabled={!canUpdate}
-                      className={`!inline-flex !h-auto items-center gap-1 rounded !px-2 py-1 text-xs font-medium transition-colors`}
-                      onClick={() => handleToggleActive(component.id, !component.isActive)}
-                    >
-                      {component.isActive ? (
-                        <>
-                          <FaEye className="w-4 h-4" />
-                          {translate('::App.Listform.ListformField.IsActive')}
-                        </>
-                      ) : (
-                        <>
-                          <FaEyeSlash className="w-4 h-4" />
-                          {translate('::App.Platform.Passive')}
-                        </>
+                      {component.description && (
+                        <p className="text-slate-600 dark:text-gray-300 text-sm mb-2 line-clamp-2">
+                          {component.description}
+                        </p>
                       )}
-                    </Button>
+
+                      {componentErrors[component.name] && (
+                        <p
+                          className="text-xs text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded px-2 py-1 mb-2 break-words"
+                          title={componentErrors[component.name]}
+                        >
+                          {componentErrors[component.name]}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Sag taraf */}
+                    {component.lastModificationTime && (
+                      <div className="flex items-center gap-1 text-xs text-slate-500 dark:text-gray-400 ml-2 whitespace-nowrap">
+                        <FaCalendarAlt className="w-3 h-3" />
+                        <span>
+                          {new Date(component.lastModificationTime).toLocaleDateString() ?? ''}
+                        </span>
+                      </div>
+                    )}
                   </div>
-                  <div className="flex items-center gap-1">
-                    {canUpdate && (
-                      <Button
-                        type="button"
-                        variant="solid"
-                        color="blue-600"
-                        title={translate('::App.Platform.Edit')}
-                        onClick={() =>
-                          window.open(
-                            ROUTES_ENUM.protected.saas.developerKit.componentsEdit.replace(
-                              ':id',
-                              component.id,
-                            ),
-                            '_blank',
-                          )
-                        }
-                      >
-                        <FaRegEdit className="w-4 h-4" />
-                      </Button>
-                    )}
-                    <Button
-                      type="button"
-                      variant="solid"
-                      color="gray-600"
-                      disabled={!component.isActive || !component.routePath?.trim()}
-                      title={translate('::App.Platform.OpenUrl')}
-                      onClick={() => {
-                        const routePath = component.routePath.startsWith('/')
-                          ? component.routePath
-                          : `/${component.routePath}`
-                        window.open(routePath, '_blank')
-                      }}
-                    >
-                      <FaExternalLinkAlt className="w-4 h-4" />
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="solid"
-                      color="green-600"
-                      title={translate('::App.Platform.View')}
-                      onClick={() => setEditorComponentId(component.id)}
-                    >
-                      <FaCog className="w-4 h-4" />
-                    </Button>
-                    {canDelete && (
-                      <Button
-                        type="button"
-                        variant="solid"
-                        color="red-600"
-                        title={translate('::App.Platform.Delete')}
-                        onClick={() => handleDelete(component.id)}
-                      >
-                        <FaTrashAlt className="w-4 h-4" />
-                      </Button>
-                    )}
+
+                  {/* Actions */}
+                  <div className="flex items-center justify-between gap-1 pt-2 border-t border-slate-100 dark:border-gray-700">
+                    {renderStatusToggle(component)}
+                    {renderActions(component)}
                   </div>
                 </div>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        ) : (
+          <div className="bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 shadow-sm overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-slate-50 dark:bg-gray-800 text-slate-600 dark:text-gray-300">
+                <tr>
+                  <th className="text-left font-medium px-4 py-2">
+                    {translate('::App.Platform.Name')}
+                  </th>
+                  <th className="text-left font-medium px-4 py-2">
+                    {translate('::App.Platform.Dependencies')}
+                  </th>
+                  <th className="text-left font-medium px-4 py-2">
+                    {translate('::App.Platform.RoutePath')}
+                  </th>
+                  <th className="text-left font-medium px-4 py-2">
+                    {translate('::App.Platform.Description')}
+                  </th>
+                  <th className="text-left font-medium px-4 py-2 whitespace-nowrap">
+                    {translate('::App.Platform.Modified')}
+                  </th>
+                  <th className="text-left font-medium px-4 py-2">
+                    {translate('::App.Platform.Status')}
+                  </th>
+                  <th className="text-right font-medium px-4 py-2">
+                    {translate('::App.Platform.Actions')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredComponents.map((component) => (
+                  <tr
+                    key={component.id}
+                    className="border-t border-slate-100 dark:border-gray-700 hover:bg-slate-50 dark:hover:bg-gray-800"
+                  >
+                    <td className="px-4 py-2">
+                      <div className="flex items-center gap-2">
+                        <div
+                          className={`w-2 h-2 shrink-0 rounded-full ${
+                            component.isActive ? 'bg-green-500' : 'bg-slate-300 dark:bg-gray-700'
+                          }`}
+                        />
+                        <span className="font-medium text-slate-900 dark:text-gray-100">
+                          {component.name}
+                        </span>
+                      </div>
+                      {componentErrors[component.name] && (
+                        <p
+                          className="mt-1 text-xs text-red-700 dark:text-red-300 break-words"
+                          title={componentErrors[component.name]}
+                        >
+                          {componentErrors[component.name]}
+                        </p>
+                      )}
+                    </td>
+                    <td className="px-4 py-2 text-slate-600 dark:text-gray-300">
+                      {parseComponentDependencies(component.dependencies).join(', ') ||
+                        translate('::App.DeveloperKitComponent.NoDependencies')}
+                    </td>
+                    <td className="px-4 py-2 text-slate-600 dark:text-gray-300">
+                      {component.routePath}
+                    </td>
+                    <td className="px-4 py-2 text-slate-600 dark:text-gray-300">
+                      {component.description}
+                    </td>
+                    <td className="px-4 py-2 text-slate-500 dark:text-gray-400 whitespace-nowrap">
+                      {component.lastModificationTime
+                        ? new Date(component.lastModificationTime).toLocaleDateString()
+                        : ''}
+                    </td>
+                    <td className="px-4 py-2">{renderStatusToggle(component)}</td>
+                    <td className="px-4 py-2">
+                      <div className="flex justify-end">{renderActions(component)}</div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )
       ) : (
         <div className="text-center py-12">
           <div className="mx-auto">
diff --git a/ui/src/views/forum/admin/CategoryManagement.tsx b/ui/src/views/forum/admin/CategoryManagement.tsx
index 128edc90..cb86eaef 100644
--- a/ui/src/views/forum/admin/CategoryManagement.tsx
+++ b/ui/src/views/forum/admin/CategoryManagement.tsx
@@ -16,7 +16,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Formik, Form, Field, FieldProps } from 'formik'
 import * as Yup from 'yup'
 import { FormContainer, FormItem } from '@/components/ui/Form'
-import { Input, Checkbox, Button, Select } from '@/components/ui'
+import { Input, Checkbox, Button, Select, Dialog } from '@/components/ui'
 import { ConfirmDialog } from '@/components/shared'
 import { CategoryIconOption, resolveCategoryIconOptions } from './categoryIcons'
 
@@ -69,6 +69,11 @@ export function CategoryManagement({
     setShowCreateForm(true)
   }
 
+  const handleCloseForm = () => {
+    setShowCreateForm(false)
+    setEditingCategory(null)
+  }
+
   const handleToggleActive = async (category: ForumCategory) => {
     try {
       await onUpdateCategoryActiveState(category.id)
@@ -87,16 +92,24 @@ export function CategoryManagement({
 
   return (
     <div className="space-y-3">
-      {/* Create/Edit Form */}
-      {showCreateForm && (
-        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
+      {/* Create/Edit Modal */}
+      <Dialog
+        isOpen={showCreateForm}
+        width={720}
+        onClose={handleCloseForm}
+        onRequestClose={handleCloseForm}
+      >
+        <div className="pb-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {editingCategory
               ? translate('::App.ForumCategoryManagement.EditCategory')
               : translate('::App.ForumCategoryManagement.AddCategory')}
           </h3>
+        </div>
 
+        <div className="pt-4 max-h-[70vh] overflow-y-auto">
           <Formik
+            enableReinitialize
             initialValues={{
               name: editingCategory?.name ?? '',
               slug: editingCategory?.slug ?? '',
@@ -221,14 +234,7 @@ export function CategoryManagement({
                   </div>
 
                   <div className="mt-4 flex justify-end space-x-3">
-                    <Button
-                      variant="plain"
-                      type="button"
-                      onClick={() => {
-                        setShowCreateForm(false)
-                        setEditingCategory(null)
-                      }}
-                    >
+                    <Button variant="plain" type="button" onClick={handleCloseForm}>
                       {translate('::App.Platform.Cancel')}
                     </Button>
                     <Button variant="solid" type="submit" loading={isSubmitting}>
@@ -242,7 +248,7 @@ export function CategoryManagement({
             )}
           </Formik>
         </div>
-      )}
+      </Dialog>
 
       {/* Categories List */}
       <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
@@ -321,7 +327,7 @@ export function CategoryManagement({
 
                     <div className="flex items-center space-x-2">
                       <Button
-                        size="xs"
+                        size="sm"
                         className={`p-1 rounded-lg transition-colors ${
                           category.isActive
                             ? 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
@@ -335,14 +341,14 @@ export function CategoryManagement({
                         onClick={() => handleToggleActive(category)}
                       >
                         {category.isActive ? (
-                          <FaEye className="w-3 h-3" />
+                          <FaEye className="w-4 h-4" />
                         ) : (
-                          <FaEyeSlash className="w-3 h-3" />
+                          <FaEyeSlash className="w-4 h-4" />
                         )}
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         className={`p-1 rounded-lg transition-colors ${
                           category.isLocked
                             ? 'text-yellow-600 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900'
@@ -356,28 +362,28 @@ export function CategoryManagement({
                         onClick={() => handleToggleLocked(category)}
                       >
                         {category.isLocked ? (
-                          <FaLock className="w-3 h-3" />
+                          <FaLock className="w-4 h-4" />
                         ) : (
-                          <FaUnlock className="w-3 h-3" />
+                          <FaUnlock className="w-4 h-4" />
                         )}
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         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.ForumCategoryManagement.EditCategory')}
                         onClick={() => handleEdit(category)}
                       >
-                        <FaEdit className="w-3 h-3" />
+                        <FaEdit className="w-4 h-4" />
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         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.ForumCategoryManagement.DeleteCategory')}
                         onClick={() => confirmDeleteCategory(category)}
                       >
-                        <FaTrash className="w-3 h-3" />
+                        <FaTrash className="w-4 h-4" />
                       </Button>
                     </div>
                   </div>
diff --git a/ui/src/views/forum/admin/PostManagement.tsx b/ui/src/views/forum/admin/PostManagement.tsx
index 6907e80d..0eca6528 100644
--- a/ui/src/views/forum/admin/PostManagement.tsx
+++ b/ui/src/views/forum/admin/PostManagement.tsx
@@ -15,7 +15,7 @@ import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Formik, Form, Field, FieldProps } from 'formik'
 import * as Yup from 'yup'
-import { FormContainer, FormItem, Button } from '@/components/ui'
+import { FormContainer, FormItem, Button, Dialog } from '@/components/ui'
 import { ConfirmDialog } from '@/components/shared'
 import { formatForumDate, sanitizeForumHtml, stripHtml } from '../forum/utils'
 import {
@@ -72,6 +72,11 @@ export function PostManagement({
     setShowCreateForm(true)
   }
 
+  const handleCloseForm = () => {
+    setShowCreateForm(false)
+    setEditingPost(null)
+  }
+
   const handleToggleAcceptedAnswer = async (post: ForumPost) => {
     try {
       if (post.isAcceptedAnswer) {
@@ -89,15 +94,22 @@ export function PostManagement({
 
   return (
     <div className="space-y-3">
-      {/* Create/Edit Form */}
-      {showCreateForm && (
-        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
+      {/* Create/Edit Modal */}
+      <Dialog
+        isOpen={showCreateForm}
+        width={900}
+        onClose={handleCloseForm}
+        onRequestClose={handleCloseForm}
+      >
+        <div className="pb-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {editingPost
               ? translate('::App.ForumPostManagement.EditPost')
               : translate('::App.ForumPostManagement.AddPost')}
           </h3>
+        </div>
 
+        <div className="pt-4 max-h-[70vh] overflow-y-auto">
           <Formik
             enableReinitialize
             initialValues={{
@@ -234,14 +246,7 @@ export function PostManagement({
                   </FormItem>
 
                   <div className="flex justify-end space-x-3 pt-2">
-                    <Button
-                      variant="plain"
-                      type="button"
-                      onClick={() => {
-                        setShowCreateForm(false)
-                        setEditingPost(null)
-                      }}
-                    >
+                    <Button variant="plain" type="button" onClick={handleCloseForm}>
                       {translate('::App.Platform.Cancel')}
                     </Button>
                     <Button
@@ -260,7 +265,7 @@ export function PostManagement({
             )}
           </Formik>
         </div>
-      )}
+      </Dialog>
 
       {/* Posts List */}
       <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
@@ -304,7 +309,7 @@ export function PostManagement({
                         <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 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" />
+                            <FaCheckCircle className="w-4 h-4" />
                             <span>{translate('::App.ForumPostManagement.AcceptedAnswer')}</span>
                           </div>
                         )}
@@ -336,7 +341,7 @@ export function PostManagement({
 
                     <div className="flex items-center space-x-2 ml-4">
                       <Button
-                        size="xs"
+                        size="sm"
                         className={`p-1 rounded-lg transition-colors ${
                           post.isAcceptedAnswer
                             ? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900'
@@ -350,28 +355,28 @@ export function PostManagement({
                         onClick={() => handleToggleAcceptedAnswer(post)}
                       >
                         {post.isAcceptedAnswer ? (
-                          <FaCheckCircle className="w-3 h-3" />
+                          <FaCheckCircle className="w-4 h-4" />
                         ) : (
-                          <FaCircle className="w-3 h-3" />
+                          <FaCircle className="w-4 h-4" />
                         )}
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         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.ForumPostManagement.EditPost')}
                         onClick={() => handleEdit(post)}
                       >
-                        <FaEdit className="w-3 h-3" />
+                        <FaEdit className="w-4 h-4" />
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         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.ForumPostManagement.DeletePost')}
                         onClick={() => confirmDeletePost(post)}
                       >
-                        <FaTrashAlt className="w-3 h-3" />
+                        <FaTrashAlt className="w-4 h-4" />
                       </Button>
                     </div>
                   </div>
diff --git a/ui/src/views/forum/admin/TopicManagement.tsx b/ui/src/views/forum/admin/TopicManagement.tsx
index 9a0aa32f..abe9d4af 100644
--- a/ui/src/views/forum/admin/TopicManagement.tsx
+++ b/ui/src/views/forum/admin/TopicManagement.tsx
@@ -17,7 +17,7 @@ import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Formik, Form, Field, FieldProps } from 'formik'
 import * as Yup from 'yup'
-import { FormContainer, FormItem, Button, Select } from '@/components/ui'
+import { FormContainer, FormItem, Button, Select, Dialog } from '@/components/ui'
 import { ConfirmDialog } from '@/components/shared'
 import { formatForumDate } from '../forum/utils'
 
@@ -84,6 +84,11 @@ export function TopicManagement({
     setShowCreateForm(true)
   }
 
+  const handleCloseForm = () => {
+    setShowCreateForm(false)
+    setEditingTopic(null)
+  }
+
   const handlePin = async (topic: ForumTopic) => {
     try {
       if (topic.isPinned) {
@@ -141,15 +146,22 @@ export function TopicManagement({
 
   return (
     <div className="space-y-3">
-      {/* Create/Edit Form */}
-      {showCreateForm && (
-        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
+      {/* Create/Edit Modal */}
+      <Dialog
+        isOpen={showCreateForm}
+        width={720}
+        onClose={handleCloseForm}
+        onRequestClose={handleCloseForm}
+      >
+        <div className="pb-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {editingTopic
               ? translate('::App.ForumTopicManagement.EditTopic')
               : translate('::App.ForumTopicManagement.AddTopic')}
           </h3>
+        </div>
 
+        <div className="pt-4 max-h-[70vh] overflow-y-auto">
           <Formik
             enableReinitialize
             initialValues={
@@ -260,14 +272,7 @@ export function TopicManagement({
                   </FormItem>
 
                   <div className="flex justify-end space-x-3 pt-2">
-                    <Button
-                      variant="plain"
-                      type="button"
-                      onClick={() => {
-                        setShowCreateForm(false)
-                        setEditingTopic(null)
-                      }}
-                    >
+                    <Button variant="plain" type="button" onClick={handleCloseForm}>
                       {translate('::App.Platform.Cancel')}
                     </Button>
                     <Button variant="solid" type="submit" loading={isSubmitting}>
@@ -279,7 +284,7 @@ export function TopicManagement({
             )}
           </Formik>
         </div>
-      )}
+      </Dialog>
 
       {/* Topics List */}
       <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
@@ -366,7 +371,7 @@ export function TopicManagement({
 
                     <div className="flex items-center space-x-2 ml-4">
                       <Button
-                        size="xs"
+                        size="sm"
                         className={`p-1 rounded-lg transition-colors ${
                           topic.isPinned
                             ? 'text-orange-600 dark:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-900'
@@ -379,11 +384,11 @@ export function TopicManagement({
                         }
                         onClick={() => handlePin(topic)}
                       >
-                        <FaThumbtack className="h-3 w-3" />
+                        <FaThumbtack className="h-4 w-4" />
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         className={`p-1 rounded-lg transition-colors ${
                           topic.isLocked
                             ? 'text-yellow-600 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900'
@@ -397,14 +402,14 @@ export function TopicManagement({
                         onClick={() => handleLock(topic)}
                       >
                         {topic.isLocked ? (
-                          <FaLock className="w-3 h-3" />
+                          <FaLock className="w-4 h-4" />
                         ) : (
-                          <FaUnlock className="w-3 h-3" />
+                          <FaUnlock className="w-4 h-4" />
                         )}
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         className={`p-1 rounded-lg transition-colors ${
                           topic.isSolved
                             ? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900'
@@ -418,28 +423,28 @@ export function TopicManagement({
                         onClick={() => handleSolved(topic)}
                       >
                         {topic.isSolved ? (
-                          <FaCheckCircle className="w-3 h-3" />
+                          <FaCheckCircle className="w-4 h-4" />
                         ) : (
-                          <FaCircle className="w-3 h-3" />
+                          <FaCircle className="w-4 h-4" />
                         )}
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         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.ForumTopicManagement.EditTopic')}
                         onClick={() => handleEdit(topic)}
                       >
-                        <FaEdit className="w-3 h-3" />
+                        <FaEdit className="w-4 h-4" />
                       </Button>
 
                       <Button
-                        size="xs"
+                        size="sm"
                         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.ForumTopicManagement.DeleteTopic')}
                         onClick={() => confirmDeleteTopic(topic)}
                       >
-                        <FaTrashAlt className="w-3 h-3" />
+                        <FaTrashAlt className="w-4 h-4" />
                       </Button>
                     </div>
                   </div>