diff --git a/app/[locale]/(admin)/admin/settings/tenant/component/columns.tsx b/app/[locale]/(admin)/admin/settings/tenant/component/columns.tsx
index 86c10b2..b8c8993 100644
--- a/app/[locale]/(admin)/admin/settings/tenant/component/columns.tsx
+++ b/app/[locale]/(admin)/admin/settings/tenant/component/columns.tsx
@@ -412,7 +412,7 @@ const useTableColumns = (onEdit?: (data: any) => void) => {
                 ) : detailData ? (
                   <Tabs defaultValue="basic" className="w-full mt-4">
                     <TabsList className="grid w-full grid-cols-3">
-                      <TabsTrigger value="basic">Basic Information</TabsTrigger>
+                      <TabsTrigger className="border border-black" value="basic">Basic Information</TabsTrigger>
                       <TabsTrigger value="menus">Menu Access</TabsTrigger>
                       <TabsTrigger value="actions">Action Access</TabsTrigger>
                     </TabsList>
@@ -467,7 +467,7 @@ const useTableColumns = (onEdit?: (data: any) => void) => {
                             </div>
                             <div>
                               <span className="text-sm font-medium text-gray-600">Created At:</span>
-                              <p className="text-base text-sm">
+                              <p className="text-sm">
                                 {detailData.createdAt
                                   ? new Date(detailData.createdAt).toLocaleString("id-ID")
                                   : "-"}
@@ -475,7 +475,7 @@ const useTableColumns = (onEdit?: (data: any) => void) => {
                             </div>
                             <div>
                               <span className="text-sm font-medium text-gray-600">Updated At:</span>
-                              <p className="text-base text-sm">
+                              <p className="text-sm">
                                 {detailData.updatedAt
                                   ? new Date(detailData.updatedAt).toLocaleString("id-ID")
                                   : "-"}
@@ -595,7 +595,7 @@ const useTableColumns = (onEdit?: (data: any) => void) => {
                 )}
 
                 <div className="flex justify-end mt-5">
-                  <Button onClick={() => setIsDialogOpen(false)}>Tutup</Button>
+                  <Button variant="outline" onClick={() => setIsDialogOpen(false)}>Tutup</Button>
                 </div>
               </DialogContent>
             </Dialog>
diff --git a/app/[locale]/(admin)/admin/settings/tenant/component/tenant-settings-content-table.tsx b/app/[locale]/(admin)/admin/settings/tenant/component/tenant-settings-content-table.tsx
index 548e5cb..c15ae20 100644
--- a/app/[locale]/(admin)/admin/settings/tenant/component/tenant-settings-content-table.tsx
+++ b/app/[locale]/(admin)/admin/settings/tenant/component/tenant-settings-content-table.tsx
@@ -60,7 +60,10 @@ import { close, loading } from "@/config/swal";
 import DetailTenant from "@/components/form/tenant/tenant-detail-update-form";
 
 function TenantSettingsContentTable() {
-  const [activeTab, setActiveTab] = useLocalStorage('tenant-settings-active-tab', 'profile');
+  const [activeTab, setActiveTab] = useLocalStorage(
+    "tenant-settings-active-tab",
+    "profile",
+  );
   const [isUserLevelDialogOpen, setIsUserLevelDialogOpen] = useState(false);
   const [workflow, setWorkflow] =
     useState<ComprehensiveWorkflowResponse | null>(null);
@@ -120,7 +123,7 @@ function TenantSettingsContentTable() {
   };
 
   const handleWorkflowSave = async (
-    data: CreateApprovalWorkflowWithClientSettingsRequest
+    data: CreateApprovalWorkflowWithClientSettingsRequest,
   ) => {
     setIsEditingWorkflow(false);
     await loadData();
@@ -160,7 +163,7 @@ function TenantSettingsContentTable() {
 
   const columns = React.useMemo(
     () => useTableColumns((data) => handleEditUserLevel(data)),
-    []
+    [],
   );
   const [showData, setShowData] = React.useState("10");
   const [page, setPage] = React.useState(1);
@@ -252,7 +255,7 @@ function TenantSettingsContentTable() {
               Approval Workflow Setup
             </h2>
             {workflow && !isEditingWorkflow && (
-              <Button
+              <Button variant="outline"
                 onClick={() => setIsEditingWorkflow(true)}
                 className="flex items-center gap-2"
               >
@@ -667,7 +670,10 @@ function TenantSettingsContentTable() {
               onOpenChange={setIsUserLevelDialogOpen}
             >
               <DialogTrigger asChild>
-                <Button className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  className="flex items-center gap-2 hover:bg-muted focus-visible:bg-muted"
+                >
                   <PlusIcon className="h-4 w-4" />
                   Create User Level
                 </Button>
@@ -830,7 +836,7 @@ function TenantSettingsContentTable() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </TableHead>
                   ))}
@@ -849,7 +855,7 @@ function TenantSettingsContentTable() {
                       <TableCell key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </TableCell>
                     ))}
diff --git a/app/[locale]/(admin)/admin/settings/tenant/page.tsx b/app/[locale]/(admin)/admin/settings/tenant/page.tsx
index faaa04e..f749fe8 100644
--- a/app/[locale]/(admin)/admin/settings/tenant/page.tsx
+++ b/app/[locale]/(admin)/admin/settings/tenant/page.tsx
@@ -3,8 +3,21 @@ import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { PlusIcon, SettingsIcon, UsersIcon, WorkflowIcon, DotsIcon, DeleteIcon } from "@/components/icons";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  PlusIcon,
+  SettingsIcon,
+  UsersIcon,
+  WorkflowIcon,
+  DotsIcon,
+  DeleteIcon,
+} from "@/components/icons";
 import { ApprovalWorkflowForm } from "@/components/form/ApprovalWorkflowForm";
 import { UserLevelsForm } from "@/components/form/UserLevelsForm";
 import { useWorkflowModal } from "@/components/modals/WorkflowModalProvider";
@@ -42,11 +55,14 @@ import TenantSettingsPageTable from "./component/tenant-settings-content-table";
 function TenantSettingsContent() {
   const [activeTab, setActiveTab] = useState("workflows");
   const [isUserLevelDialogOpen, setIsUserLevelDialogOpen] = useState(false);
-  const [workflow, setWorkflow] = useState<ComprehensiveWorkflowResponse | null>(null);
+  const [workflow, setWorkflow] =
+    useState<ComprehensiveWorkflowResponse | null>(null);
   const [userLevels, setUserLevels] = useState<UserLevel[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isEditingWorkflow, setIsEditingWorkflow] = useState(false);
-  const [editingUserLevel, setEditingUserLevel] = useState<UserLevel | null>(null);
+  const [editingUserLevel, setEditingUserLevel] = useState<UserLevel | null>(
+    null,
+  );
   const { checkWorkflowStatus } = useWorkflowStatusCheck();
   const { showWorkflowModal } = useWorkflowModal();
 
@@ -59,7 +75,7 @@ function TenantSettingsContent() {
     setIsLoading(true);
     try {
       const [comprehensiveWorkflowRes, userLevelsRes] = await Promise.all([
-        getApprovalWorkflowComprehensiveDetails(), 
+        getApprovalWorkflowComprehensiveDetails(),
         getUserLevels(),
       ]);
 
@@ -68,7 +84,7 @@ function TenantSettingsContent() {
       } else {
         setWorkflow(null);
       }
-      
+
       if (!userLevelsRes?.error) {
         setUserLevels(userLevelsRes?.data?.data || []);
       }
@@ -79,7 +95,9 @@ function TenantSettingsContent() {
     }
   };
 
-  const handleWorkflowSave = async (data: CreateApprovalWorkflowWithClientSettingsRequest) => {
+  const handleWorkflowSave = async (
+    data: CreateApprovalWorkflowWithClientSettingsRequest,
+  ) => {
     setIsEditingWorkflow(false);
     await loadData(); // Reload data after saving
   };
@@ -87,7 +105,7 @@ function TenantSettingsContent() {
   const handleUserLevelSave = async (data: UserLevelsCreateRequest) => {
     try {
       const response = await createUserLevel(data);
-      
+
       if (response?.error) {
         console.error("Error creating user level:", response?.message);
         // You can add error handling here (e.g., show error message)
@@ -98,7 +116,7 @@ function TenantSettingsContent() {
     } catch (error) {
       console.error("Error creating user level:", error);
     }
-    
+
     setIsUserLevelDialogOpen(false);
     setEditingUserLevel(null);
     await loadData(); // Reload data after saving
@@ -110,7 +128,11 @@ function TenantSettingsContent() {
   };
 
   const handleDeleteUserLevel = async (userLevel: UserLevel) => {
-    if (window.confirm(`Are you sure you want to delete "${userLevel.name}"? This action cannot be undone.`)) {
+    if (
+      window.confirm(
+        `Are you sure you want to delete "${userLevel.name}"? This action cannot be undone.`,
+      )
+    ) {
       try {
         // TODO: Implement delete API call
         console.log("Delete user level:", userLevel.id);
@@ -137,15 +159,11 @@ function TenantSettingsContent() {
         </div>
         <div className="flex items-center gap-2">
           <SettingsIcon className="h-6 w-6 text-gray-500" />
-          <Button 
-            variant="outline" 
-            size="sm"
-            onClick={checkWorkflowStatus}
-          >
+          <Button variant="outline" size="sm" onClick={checkWorkflowStatus}>
             Check Workflow Status
           </Button>
-          <Button 
-            variant="outline" 
+          <Button
+            variant="outline"
             size="sm"
             onClick={() => showWorkflowModal({ hasWorkflowSetup: false })}
             className="bg-red-50 text-red-600 border-red-200 hover:bg-red-100"
@@ -172,7 +190,8 @@ function TenantSettingsContent() {
           <div className="flex items-center justify-between">
             <h2 className="text-2xl font-semibold">Approval Workflow Setup</h2>
             {workflow && !isEditingWorkflow && (
-              <Button 
+              <Button
+                variant="outline"
                 onClick={() => setIsEditingWorkflow(true)}
                 className="flex items-center gap-2"
               >
@@ -197,34 +216,47 @@ function TenantSettingsContent() {
               </CardHeader>
               <CardContent>
                 <ApprovalWorkflowForm
-                  initialData={workflow ? {
-                    name: workflow.workflow.name,
-                    description: workflow.workflow.description,
-                    isDefault: workflow.workflow.isDefault,
-                    isActive: workflow.workflow.isActive,
-                    requiresApproval: workflow.workflow.requiresApproval,
-                    autoPublish: workflow.workflow.autoPublish,
-                    steps: workflow.steps?.map(step => ({
-                      stepOrder: step.stepOrder,
-                      stepName: step.stepName,
-                      requiredUserLevelId: step.requiredUserLevelId,
-                      canSkip: step.canSkip,
-                      autoApproveAfterHours: step.autoApproveAfterHours,
-                      isActive: step.isActive,
-                      conditionType: step.conditionType,
-                      conditionValue: step.conditionValue,
-                    })) || [],
-                    clientApprovalSettings: {
-                      approvalExemptCategories: workflow.clientSettings.exemptCategoriesDetails || [],
-                      approvalExemptRoles: workflow.clientSettings.exemptRolesDetails || [],
-                      approvalExemptUsers: workflow.clientSettings.exemptUsersDetails || [],
-                      autoPublishArticles: workflow.clientSettings.autoPublishArticles,
-                      isActive: workflow.clientSettings.isActive,
-                      requireApprovalFor: workflow.clientSettings.requireApprovalFor || [],
-                      requiresApproval: workflow.clientSettings.requiresApproval,
-                      skipApprovalFor: workflow.clientSettings.skipApprovalFor || []
-                    }
-                  } : undefined}
+                  initialData={
+                    workflow
+                      ? {
+                          name: workflow.workflow.name,
+                          description: workflow.workflow.description,
+                          isDefault: workflow.workflow.isDefault,
+                          isActive: workflow.workflow.isActive,
+                          requiresApproval: workflow.workflow.requiresApproval,
+                          autoPublish: workflow.workflow.autoPublish,
+                          steps:
+                            workflow.steps?.map((step) => ({
+                              stepOrder: step.stepOrder,
+                              stepName: step.stepName,
+                              requiredUserLevelId: step.requiredUserLevelId,
+                              canSkip: step.canSkip,
+                              autoApproveAfterHours: step.autoApproveAfterHours,
+                              isActive: step.isActive,
+                              conditionType: step.conditionType,
+                              conditionValue: step.conditionValue,
+                            })) || [],
+                          clientApprovalSettings: {
+                            approvalExemptCategories:
+                              workflow.clientSettings.exemptCategoriesDetails ||
+                              [],
+                            approvalExemptRoles:
+                              workflow.clientSettings.exemptRolesDetails || [],
+                            approvalExemptUsers:
+                              workflow.clientSettings.exemptUsersDetails || [],
+                            autoPublishArticles:
+                              workflow.clientSettings.autoPublishArticles,
+                            isActive: workflow.clientSettings.isActive,
+                            requireApprovalFor:
+                              workflow.clientSettings.requireApprovalFor || [],
+                            requiresApproval:
+                              workflow.clientSettings.requiresApproval,
+                            skipApprovalFor:
+                              workflow.clientSettings.skipApprovalFor || [],
+                          },
+                        }
+                      : undefined
+                  }
                   workflowId={workflow?.workflow.id}
                   onSave={handleWorkflowSave}
                   onCancel={() => setIsEditingWorkflow(false)}
@@ -258,28 +290,38 @@ function TenantSettingsContent() {
                 <p className="text-gray-600 text-sm mb-4">
                   {workflow.workflow.description}
                 </p>
-                
+
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                   <div className="text-center p-4 bg-gray-50 rounded-lg">
-                    <div className="text-2xl font-bold text-blue-600">{workflow.workflow.totalSteps}</div>
-                    <div className="text-sm text-gray-600">Total Steps</div>
-                  </div>
-                  
-                  <div className="text-center p-4 bg-gray-50 rounded-lg">
-                    <div className="text-2xl font-bold text-green-600">{workflow.workflow.activeSteps}</div>
-                    <div className="text-sm text-gray-600">Active Steps</div>
-                  </div>
-                  
-                  <div className="text-center p-4 bg-gray-50 rounded-lg">
-                    <div className={`text-2xl font-bold ${workflow.workflow.requiresApproval ? 'text-green-600' : 'text-red-600'}`}>
-                      {workflow.workflow.requiresApproval ? 'Yes' : 'No'}
+                    <div className="text-2xl font-bold text-blue-600">
+                      {workflow.workflow.totalSteps}
                     </div>
-                    <div className="text-sm text-gray-600">Requires Approval</div>
+                    <div className="text-sm text-gray-600">Total Steps</div>
                   </div>
 
                   <div className="text-center p-4 bg-gray-50 rounded-lg">
-                    <div className={`text-2xl font-bold ${workflow.workflow.autoPublish ? 'text-green-600' : 'text-red-600'}`}>
-                      {workflow.workflow.autoPublish ? 'Yes' : 'No'}
+                    <div className="text-2xl font-bold text-green-600">
+                      {workflow.workflow.activeSteps}
+                    </div>
+                    <div className="text-sm text-gray-600">Active Steps</div>
+                  </div>
+
+                  <div className="text-center p-4 bg-gray-50 rounded-lg">
+                    <div
+                      className={`text-2xl font-bold ${workflow.workflow.requiresApproval ? "text-green-600" : "text-red-600"}`}
+                    >
+                      {workflow.workflow.requiresApproval ? "Yes" : "No"}
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      Requires Approval
+                    </div>
+                  </div>
+
+                  <div className="text-center p-4 bg-gray-50 rounded-lg">
+                    <div
+                      className={`text-2xl font-bold ${workflow.workflow.autoPublish ? "text-green-600" : "text-red-600"}`}
+                    >
+                      {workflow.workflow.autoPublish ? "Yes" : "No"}
                     </div>
                     <div className="text-sm text-gray-600">Auto Publish</div>
                   </div>
@@ -291,7 +333,10 @@ function TenantSettingsContent() {
                     <h4 className="text-lg font-medium mb-3">Workflow Steps</h4>
                     <div className="space-y-2">
                       {workflow.steps.map((step: any, index: number) => (
-                        <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <div
+                          key={index}
+                          className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+                        >
                           <div className="flex items-center gap-3">
                             <div className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium">
                               {step.stepOrder}
@@ -299,9 +344,12 @@ function TenantSettingsContent() {
                             <div>
                               <div className="font-medium">{step.stepName}</div>
                               <div className="text-sm text-gray-500">
-                                {step.conditionType && `Condition: ${step.conditionType}`}
-                                {step.autoApproveAfterHours && ` • Auto-approve after ${step.autoApproveAfterHours}h`}
-                                {step.requiredUserLevelName && ` • Required Level: ${step.requiredUserLevelName}`}
+                                {step.conditionType &&
+                                  `Condition: ${step.conditionType}`}
+                                {step.autoApproveAfterHours &&
+                                  ` • Auto-approve after ${step.autoApproveAfterHours}h`}
+                                {step.requiredUserLevelName &&
+                                  ` • Required Level: ${step.requiredUserLevelName}`}
                               </div>
                             </div>
                           </div>
@@ -343,25 +391,45 @@ function TenantSettingsContent() {
                   <h4 className="text-lg font-medium mb-3">Client Settings</h4>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Default Workflow</div>
-                      <div className="text-sm text-gray-600">{workflow.clientSettings.defaultWorkflowName}</div>
-                    </div>
-                    <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Auto Publish Articles</div>
-                      <div className={`text-sm font-medium ${workflow.clientSettings.autoPublishArticles ? 'text-green-600' : 'text-red-600'}`}>
-                        {workflow.clientSettings.autoPublishArticles ? 'Yes' : 'No'}
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Default Workflow
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        {workflow.clientSettings.defaultWorkflowName}
                       </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Requires Approval</div>
-                      <div className={`text-sm font-medium ${workflow.clientSettings.requiresApproval ? 'text-green-600' : 'text-red-600'}`}>
-                        {workflow.clientSettings.requiresApproval ? 'Yes' : 'No'}
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Auto Publish Articles
+                      </div>
+                      <div
+                        className={`text-sm font-medium ${workflow.clientSettings.autoPublishArticles ? "text-green-600" : "text-red-600"}`}
+                      >
+                        {workflow.clientSettings.autoPublishArticles
+                          ? "Yes"
+                          : "No"}
                       </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Settings Active</div>
-                      <div className={`text-sm font-medium ${workflow.clientSettings.isActive ? 'text-green-600' : 'text-red-600'}`}>
-                        {workflow.clientSettings.isActive ? 'Yes' : 'No'}
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Requires Approval
+                      </div>
+                      <div
+                        className={`text-sm font-medium ${workflow.clientSettings.requiresApproval ? "text-green-600" : "text-red-600"}`}
+                      >
+                        {workflow.clientSettings.requiresApproval
+                          ? "Yes"
+                          : "No"}
+                      </div>
+                    </div>
+                    <div className="p-3 bg-gray-50 rounded-lg">
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Settings Active
+                      </div>
+                      <div
+                        className={`text-sm font-medium ${workflow.clientSettings.isActive ? "text-green-600" : "text-red-600"}`}
+                      >
+                        {workflow.clientSettings.isActive ? "Yes" : "No"}
                       </div>
                     </div>
                   </div>
@@ -369,68 +437,116 @@ function TenantSettingsContent() {
 
                 {/* Statistics */}
                 <div className="mb-6">
-                  <h4 className="text-lg font-medium mb-3">Workflow Statistics</h4>
+                  <h4 className="text-lg font-medium mb-3">
+                    Workflow Statistics
+                  </h4>
                   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Total Articles Processed</div>
-                      <div className="text-2xl font-bold text-blue-600">{workflow.statistics.totalArticlesProcessed}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Total Articles Processed
+                      </div>
+                      <div className="text-2xl font-bold text-blue-600">
+                        {workflow.statistics.totalArticlesProcessed}
+                      </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Pending Articles</div>
-                      <div className="text-2xl font-bold text-yellow-600">{workflow.statistics.pendingArticles}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Pending Articles
+                      </div>
+                      <div className="text-2xl font-bold text-yellow-600">
+                        {workflow.statistics.pendingArticles}
+                      </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Approved Articles</div>
-                      <div className="text-2xl font-bold text-green-600">{workflow.statistics.approvedArticles}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Approved Articles
+                      </div>
+                      <div className="text-2xl font-bold text-green-600">
+                        {workflow.statistics.approvedArticles}
+                      </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Rejected Articles</div>
-                      <div className="text-2xl font-bold text-red-600">{workflow.statistics.rejectedArticles}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Rejected Articles
+                      </div>
+                      <div className="text-2xl font-bold text-red-600">
+                        {workflow.statistics.rejectedArticles}
+                      </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Average Processing Time</div>
-                      <div className="text-2xl font-bold text-purple-600">{workflow.statistics.averageProcessingTime}h</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Average Processing Time
+                      </div>
+                      <div className="text-2xl font-bold text-purple-600">
+                        {workflow.statistics.averageProcessingTime}h
+                      </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Most Active Step</div>
-                      <div className="text-sm text-gray-600">{workflow.statistics.mostActiveStep || 'N/A'}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Most Active Step
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        {workflow.statistics.mostActiveStep || "N/A"}
+                      </div>
                     </div>
                   </div>
                 </div>
 
                 {/* Workflow Metadata */}
                 <div className="mb-6">
-                  <h4 className="text-lg font-medium mb-3">Workflow Information</h4>
+                  <h4 className="text-lg font-medium mb-3">
+                    Workflow Information
+                  </h4>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Client ID</div>
-                      <div className="text-sm text-gray-600 font-mono">{workflow.workflow.clientId}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Client ID
+                      </div>
+                      <div className="text-sm text-gray-600 font-mono">
+                        {workflow.workflow.clientId}
+                      </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Created At</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Created At
+                      </div>
                       <div className="text-sm text-gray-600">
                         {new Date(workflow.workflow.createdAt).toLocaleString()}
                       </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Updated At</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Updated At
+                      </div>
                       <div className="text-sm text-gray-600">
                         {new Date(workflow.workflow.updatedAt).toLocaleString()}
                       </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Workflow ID</div>
-                      <div className="text-sm text-gray-600 font-mono">{workflow.workflow.id}</div>
-                    </div>
-                    <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Has Branches</div>
-                      <div className={`text-sm font-medium ${workflow.workflow.hasBranches ? 'text-green-600' : 'text-gray-600'}`}>
-                        {workflow.workflow.hasBranches ? 'Yes' : 'No'}
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Workflow ID
+                      </div>
+                      <div className="text-sm text-gray-600 font-mono">
+                        {workflow.workflow.id}
                       </div>
                     </div>
                     <div className="p-3 bg-gray-50 rounded-lg">
-                      <div className="text-sm font-medium text-gray-700 mb-1">Max Step Order</div>
-                      <div className="text-sm text-gray-600">{workflow.workflow.maxStepOrder}</div>
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Has Branches
+                      </div>
+                      <div
+                        className={`text-sm font-medium ${workflow.workflow.hasBranches ? "text-green-600" : "text-gray-600"}`}
+                      >
+                        {workflow.workflow.hasBranches ? "Yes" : "No"}
+                      </div>
+                    </div>
+                    <div className="p-3 bg-gray-50 rounded-lg">
+                      <div className="text-sm font-medium text-gray-700 mb-1">
+                        Max Step Order
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        {workflow.workflow.maxStepOrder}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -441,9 +557,12 @@ function TenantSettingsContent() {
               <CardContent className="flex items-center justify-center py-12">
                 <div className="text-center">
                   <WorkflowIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-gray-900 mb-2">No Workflow Configured</h3>
+                  <h3 className="text-lg font-medium text-gray-900 mb-2">
+                    No Workflow Configured
+                  </h3>
                   <p className="text-gray-500 mb-4">
-                    Set up your approval workflow to manage content approval process
+                    Set up your approval workflow to manage content approval
+                    process
                   </p>
                   <Button onClick={() => setIsEditingWorkflow(true)}>
                     <PlusIcon className="h-4 w-4 mr-2" />
@@ -459,7 +578,10 @@ function TenantSettingsContent() {
         <TabsContent value="user-levels" className="space-y-6">
           <div className="flex items-center justify-between">
             <h2 className="text-2xl font-semibold">User Levels</h2>
-            <Dialog open={isUserLevelDialogOpen} onOpenChange={setIsUserLevelDialogOpen}>
+            <Dialog
+              open={isUserLevelDialogOpen}
+              onOpenChange={setIsUserLevelDialogOpen}
+            >
               <DialogTrigger asChild>
                 <Button className="flex items-center gap-2">
                   <PlusIcon className="h-4 w-4" />
@@ -469,22 +591,28 @@ function TenantSettingsContent() {
               <DialogContent className="md:max-w-6xl max-h-[90vh] overflow-y-auto">
                 <DialogHeader>
                   <DialogTitle>
-                    {editingUserLevel ? `Edit User Level: ${editingUserLevel.name}` : "Create New User Level"}
+                    {editingUserLevel
+                      ? `Edit User Level: ${editingUserLevel.name}`
+                      : "Create New User Level"}
                   </DialogTitle>
                 </DialogHeader>
                 <UserLevelsForm
                   mode="single"
-                  initialData={editingUserLevel ? {
-                    // id: editingUserLevel.id,
-                    name: editingUserLevel.name,
-                    aliasName: editingUserLevel.aliasName,
-                    levelNumber: editingUserLevel.levelNumber,
-                    parentLevelId: editingUserLevel.parentLevelId || 0,
-                    provinceId: editingUserLevel.provinceId,
-                    group: editingUserLevel.group || "",
-                    isApprovalActive: editingUserLevel.isApprovalActive,
-                    isActive: editingUserLevel.isActive,
-                  } : undefined}
+                  initialData={
+                    editingUserLevel
+                      ? {
+                          // id: editingUserLevel.id,
+                          name: editingUserLevel.name,
+                          aliasName: editingUserLevel.aliasName,
+                          levelNumber: editingUserLevel.levelNumber,
+                          parentLevelId: editingUserLevel.parentLevelId || 0,
+                          provinceId: editingUserLevel.provinceId,
+                          group: editingUserLevel.group || "",
+                          isApprovalActive: editingUserLevel.isApprovalActive,
+                          isActive: editingUserLevel.isActive,
+                        }
+                      : undefined
+                  }
                   onSave={handleUserLevelSave}
                   onCancel={() => {
                     setIsUserLevelDialogOpen(false);
@@ -499,27 +627,29 @@ function TenantSettingsContent() {
           {userLevels.length > 0 && (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
               <div className="text-center p-4 bg-gray-50 rounded-lg">
-                <div className="text-2xl font-bold text-blue-600">{userLevels.length}</div>
+                <div className="text-2xl font-bold text-blue-600">
+                  {userLevels.length}
+                </div>
                 <div className="text-sm text-gray-600">Total User Levels</div>
               </div>
-              
+
               <div className="text-center p-4 bg-gray-50 rounded-lg">
                 <div className="text-2xl font-bold text-green-600">
-                  {userLevels.filter(ul => ul.isActive).length}
+                  {userLevels.filter((ul) => ul.isActive).length}
                 </div>
                 <div className="text-sm text-gray-600">Active Levels</div>
               </div>
-              
+
               <div className="text-center p-4 bg-gray-50 rounded-lg">
                 <div className="text-2xl font-bold text-purple-600">
-                  {userLevels.filter(ul => ul.isApprovalActive).length}
+                  {userLevels.filter((ul) => ul.isApprovalActive).length}
                 </div>
                 <div className="text-sm text-gray-600">Approval Active</div>
               </div>
 
               <div className="text-center p-4 bg-gray-50 rounded-lg">
                 <div className="text-2xl font-bold text-orange-600">
-                  {userLevels.filter(ul => ul.parentLevelId).length}
+                  {userLevels.filter((ul) => ul.parentLevelId).length}
                 </div>
                 <div className="text-sm text-gray-600">Child Levels</div>
               </div>
@@ -538,9 +668,9 @@ function TenantSettingsContent() {
               <CardContent>
                 <div className="space-y-3">
                   {userLevels
-                    .filter(ul => !ul.parentLevelId) // Root levels
+                    .filter((ul) => !ul.parentLevelId)
                     .sort((a, b) => a.levelNumber - b.levelNumber)
-                    .map(rootLevel => (
+                    .map((rootLevel) => (
                       <div key={rootLevel.id} className="space-y-2">
                         {/* Root Level */}
                         <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
@@ -550,7 +680,8 @@ function TenantSettingsContent() {
                           <div className="flex-1">
                             <div className="font-medium">{rootLevel.name}</div>
                             <div className="text-sm text-gray-500">
-                              {rootLevel.aliasName} • {rootLevel.group || 'No group'}
+                              {rootLevel.aliasName} •{" "}
+                              {rootLevel.group || "No group"}
                             </div>
                           </div>
                           <div className="flex items-center gap-2">
@@ -586,20 +717,26 @@ function TenantSettingsContent() {
                             </Button>
                           </div>
                         </div>
-                        
+
                         {/* Child Levels */}
                         {userLevels
-                          .filter(ul => ul.parentLevelId === rootLevel.id)
+                          .filter((ul) => ul.parentLevelId === rootLevel.id)
                           .sort((a, b) => a.levelNumber - b.levelNumber)
-                          .map(childLevel => (
-                            <div key={childLevel.id} className="ml-8 flex items-center gap-3 p-3 bg-gray-50 rounded-lg border-l-4 border-gray-300">
+                          .map((childLevel) => (
+                            <div
+                              key={childLevel.id}
+                              className="ml-8 flex items-center gap-3 p-3 bg-gray-50 rounded-lg border-l-4 border-gray-300"
+                            >
                               <div className="w-6 h-6 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center text-xs font-medium">
                                 {childLevel.levelNumber}
                               </div>
                               <div className="flex-1">
-                                <div className="font-medium text-sm">{childLevel.name}</div>
+                                <div className="font-medium text-sm">
+                                  {childLevel.name}
+                                </div>
                                 <div className="text-xs text-gray-500">
-                                  {childLevel.aliasName} • {childLevel.group || 'No group'}
+                                  {childLevel.aliasName} •{" "}
+                                  {childLevel.group || "No group"}
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
@@ -618,7 +755,9 @@ function TenantSettingsContent() {
                                 <Button
                                   variant="outline"
                                   size="sm"
-                                  onClick={() => handleEditUserLevel(childLevel)}
+                                  onClick={() =>
+                                    handleEditUserLevel(childLevel)
+                                  }
                                   className="h-7 w-7 p-0 border-gray-300 hover:border-blue-500 hover:bg-blue-50"
                                   title="Edit User Level"
                                 >
@@ -627,7 +766,9 @@ function TenantSettingsContent() {
                                 <Button
                                   variant="outline"
                                   size="sm"
-                                  onClick={() => handleDeleteUserLevel(childLevel)}
+                                  onClick={() =>
+                                    handleDeleteUserLevel(childLevel)
+                                  }
                                   className="h-7 w-7 p-0 border-gray-300 hover:border-red-500 hover:bg-red-50"
                                   title="Delete User Level"
                                 >
@@ -730,7 +871,9 @@ function TenantSettingsContent() {
               <CardContent className="flex items-center justify-center py-12">
                 <div className="text-center">
                   <UsersIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-gray-900 mb-2">No User Levels Found</h3>
+                  <h3 className="text-lg font-medium text-gray-900 mb-2">
+                    No User Levels Found
+                  </h3>
                   <p className="text-gray-500 mb-4">
                     Create your first user level to define approval hierarchy
                   </p>
diff --git a/app/[locale]/(admin)/admin/tenants/[id]/edit/page.tsx b/app/[locale]/(admin)/admin/tenants/[id]/edit/page.tsx
index 460ee43..5352dcb 100644
--- a/app/[locale]/(admin)/admin/tenants/[id]/edit/page.tsx
+++ b/app/[locale]/(admin)/admin/tenants/[id]/edit/page.tsx
@@ -60,9 +60,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { PlusIcon, EditIcon, DeleteIcon } from "@/components/icons";
+import { PlusIcon, DeleteIcon } from "@/components/icons";
 import { errorAutoClose, successAutoClose } from "@/lib/swal";
 import { close, loading } from "@/config/swal";
+import { EditIcon } from "lucide-react";
 
 export default function EditTenantPage() {
   const router = useRouter();
@@ -610,7 +611,7 @@ export default function EditTenantPage() {
                 Approval Workflow Setup
               </h2>
               {workflow && !isEditingWorkflow && (
-                <Button
+                <Button variant="outline"
                   onClick={() => setIsEditingWorkflow(true)}
                   className="flex items-center gap-2"
                 >
diff --git a/components/form/UserLevelsForm.tsx b/components/form/UserLevelsForm.tsx
index d08d46b..4b23680 100644
--- a/components/form/UserLevelsForm.tsx
+++ b/components/form/UserLevelsForm.tsx
@@ -1486,7 +1486,7 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
             </Button>
           )}
 
-          <Button type="submit" disabled={isSubmitting}>
+          <Button variant="outline" type="submit" disabled={isSubmitting}>
             {isSubmitting ? "Saving..." : "Save User Level"}
           </Button>
 
diff --git a/components/form/common/FormField.tsx b/components/form/common/FormField.tsx
index 1027ca0..2ff44b6 100644
--- a/components/form/common/FormField.tsx
+++ b/components/form/common/FormField.tsx
@@ -3,13 +3,28 @@ import React from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
 
 interface FormFieldProps {
   label: string;
   name: string;
-  type?: "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "checkbox";
+  type?:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "url"
+    | "textarea"
+    | "select"
+    | "checkbox";
   placeholder?: string;
   value: any;
   onChange: (value: any) => void;
@@ -68,7 +83,9 @@ export const FormField: React.FC<FormFieldProps> = ({
             onValueChange={(val) => onChange(val)}
             disabled={disabled}
           >
-            <SelectTrigger className={`${hasError ? "border-red-500" : ""} ${className}`}>
+            <SelectTrigger
+              className={`${hasError ? "border-red-500" : ""} ${className}`}
+            >
               <SelectValue placeholder={placeholder || `Select ${label}`} />
             </SelectTrigger>
             <SelectContent>
@@ -83,20 +100,45 @@ export const FormField: React.FC<FormFieldProps> = ({
 
       case "checkbox":
         return (
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center gap-3">
             <Checkbox
-              id={fieldId}
-              checked={!!value}
-              onCheckedChange={(checked) => onChange(checked)}
-              disabled={disabled}
-              className={hasError ? "border-red-500" : ""}
+              checked={value}
+              onCheckedChange={(v) => onChange(!!v)}
+              className="
+    h-4 w-4
+    rounded-full
+    border border-black
+    text-white
+    data-[state=checked]:bg-black
+    focus-visible:ring-2 focus-visible:ring-black
+  "
             />
-            <Label htmlFor={fieldId} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+
+            <Label
+              htmlFor={fieldId}
+              className="text-sm font-medium leading-none cursor-pointer"
+            >
               {label}
             </Label>
           </div>
         );
 
+      // case "checkbox":
+      //   return (
+      //     <div className="flex items-center space-x-2">
+      //       <Checkbox
+      //         id={fieldId}
+      //         checked={!!value}
+      //         onCheckedChange={(checked) => onChange(checked)}
+      //         disabled={disabled}
+      //         className={hasError ? "border-red-500" : ""}
+      //       />
+      //       <Label htmlFor={fieldId} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      //         {label}
+      //       </Label>
+      //     </div>
+      //   );
+
       case "number":
         return (
           <Input
@@ -104,7 +146,9 @@ export const FormField: React.FC<FormFieldProps> = ({
             type="number"
             placeholder={placeholder}
             value={value || ""}
-            onChange={(e) => onChange(e.target.value ? Number(e.target.value) : "")}
+            onChange={(e) =>
+              onChange(e.target.value ? Number(e.target.value) : "")
+            }
             disabled={disabled}
             className={`${hasError ? "border-red-500" : ""} ${className}`}
             min={min}
@@ -136,16 +180,12 @@ export const FormField: React.FC<FormFieldProps> = ({
           {required && <span className="text-red-500 ml-1">*</span>}
         </Label>
       )}
-      
+
       {renderField()}
-      
-      {helpText && (
-        <p className="text-xs text-gray-500">{helpText}</p>
-      )}
-      
-      {hasError && (
-        <p className="text-red-500 text-xs">{error}</p>
-      )}
+
+      {helpText && <p className="text-xs text-gray-500">{helpText}</p>}
+
+      {hasError && <p className="text-red-500 text-xs">{error}</p>}
     </div>
   );
 };
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index ceee0f6..2ade134 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -180,7 +180,7 @@ export default function Navbar() {
               </Button>
             </Link>
             <Link href="/auth">
-              <Button className="bg-red-700 text-white cursor-pointer hover:bg-white hover:text-red-700">{t("login")}</Button>
+              <Button className="bg-red-700 text-white cursor-pointer hover:bg-white hover:border hover:border-red-700 hover:text-red-700">{t("login")}</Button>
             </Link>
           </>
         ) : (
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index 61d8d44..2ff1794 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -268,7 +268,7 @@ export default function DashboardContainer() {
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.7 }}
         >
-          <div className="flex justify-between items-center mb-6">
+          {/* <div className="flex justify-between items-center mb-6">
             <h3 className="text-lg font-semibold text-gray-900">
               Recent Content
             </h3>
@@ -277,7 +277,7 @@ export default function DashboardContainer() {
                 Create Content
               </Button>
             </Link>
-          </div>
+          </div> */}
 
           <div className="space-y-4 max-h-96 overflow-y-auto scrollbar-thin">
             {article?.map((list: any) => (
diff --git a/components/table/management-user/management-user-internal-column-table.tsx b/components/table/management-user/management-user-internal-column-table.tsx
index e0cf636..95e637d 100644
--- a/components/table/management-user/management-user-internal-column-table.tsx
+++ b/components/table/management-user/management-user-internal-column-table.tsx
@@ -143,14 +143,14 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-slate-200 focus:text-blue-500 rounded-none">
               <Link
                 href={`/admin/management-user/detail/${row.original.id}`}
               >
                 Detail
               </Link>
             </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-slate-200 focus:text-blue-500 rounded-none">
               <Link
                 href={`/admin/management-user/edit/${row.original.id}`}
               >
@@ -159,7 +159,7 @@ const columns: ColumnDef<any>[] = [
             </DropdownMenuItem>
             <DropdownMenuItem
               color="red"
-              className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
+              className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
             >
               <a
                 onClick={() => {