diff --git a/app/[locale]/(admin)/admin/categories/components/table-categories.tsx b/app/[locale]/(admin)/admin/categories/components/table-categories.tsx
index 0534a07..3058a33 100644
--- a/app/[locale]/(admin)/admin/categories/components/table-categories.tsx
+++ b/app/[locale]/(admin)/admin/categories/components/table-categories.tsx
@@ -187,7 +187,7 @@ const TableCategories = () => {
 
   return (
     <>
-      <div className="w-full overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
+      <div className="w-full overflow-x-auto bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
         <div className="flex justify-between items-center px-4 py-2">
           <h2 className="text-lg font-semibold">Daftar Kategori</h2>
 
diff --git a/app/[locale]/(admin)/admin/categories/page.tsx b/app/[locale]/(admin)/admin/categories/page.tsx
index a5c6912..5b4ae77 100644
--- a/app/[locale]/(admin)/admin/categories/page.tsx
+++ b/app/[locale]/(admin)/admin/categories/page.tsx
@@ -127,12 +127,12 @@ const ReactTableImagePage = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-default-50">
       {/* <SiteBreadcrumb /> */}
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
-            <CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
+            <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
               <CardTitle>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
@@ -140,7 +140,7 @@ const ReactTableImagePage = () => {
                       <UploadIcon className="w-4 h-4 text-blue-600" />
                     </div>
                     <div>
-                      <h1 className="text-xl font-semibold text-gray-900">
+                      <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Categories Management
                       </h1>
                       <p className="text-sm text-gray-500">
@@ -294,7 +294,7 @@ const ReactTableImagePage = () => {
                 </div>
               </CardTitle>
             </CardHeader>
-            <CardContent className="p-6 bg-gray-50">
+            <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
               <TableCategories />
             </CardContent>
           </Card>
diff --git a/app/[locale]/(admin)/admin/content/audio/components/audio-tabs.tsx b/app/[locale]/(admin)/admin/content/audio/components/audio-tabs.tsx
index 0901fc2..a778546 100644
--- a/app/[locale]/(admin)/admin/content/audio/components/audio-tabs.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/components/audio-tabs.tsx
@@ -35,7 +35,7 @@ const AudioTabs = () => {
         </div> 
         
         <TabsContent value="submitted" className="mt-0">
-          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
             <TableAudio />
           </div>
         </TabsContent>
diff --git a/app/[locale]/(admin)/admin/content/audio/create/page.tsx b/app/[locale]/(admin)/admin/content/audio/create/page.tsx
index dbbdd08..0ea968b 100644
--- a/app/[locale]/(admin)/admin/content/audio/create/page.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/create/page.tsx
@@ -3,7 +3,7 @@ import FormAudio from "@/components/form/content/audio/audio-form";
 const AudioCreatePage = async () => {
   return (
     <div>
-      <div className="space-y-4 bg-slate-100">
+      <div className="space-y-4 bg-slate-100 dark:bg-default-50">
         <FormAudio />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
index 56d1ca3..cb88567 100644
--- a/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
@@ -5,7 +5,7 @@ const AudioDetailPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-4 bg-slate-100">
+      <div className="space-y-4 bg-slate-100 dark:bg-default-50">
         <FormAudioDetail />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/audio/page.tsx b/app/[locale]/(admin)/admin/content/audio/page.tsx
index c7ecfbd..cb952bd 100644
--- a/app/[locale]/(admin)/admin/content/audio/page.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/page.tsx
@@ -12,12 +12,12 @@ const ReactTableAudioPage = () => {
   const { can } = usePermission();
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-default-50">
       <SiteBreadcrumb />
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
-            <CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
+            <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
               <CardTitle>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
@@ -25,7 +25,7 @@ const ReactTableAudioPage = () => {
                       <UploadIcon className="w-4 h-4 text-blue-600" />
                     </div>
                     <div>
-                      <h1 className="text-xl font-semibold text-gray-900">
+                      <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Audio Management
                       </h1>
                       <p className="text-sm text-gray-500">
@@ -49,7 +49,7 @@ const ReactTableAudioPage = () => {
                 </div>
               </CardTitle>
             </CardHeader>
-            <CardContent className="p-6 bg-gray-50">
+            <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
               <AudioTabs />
             </CardContent>
           </Card>
diff --git a/app/[locale]/(admin)/admin/content/image/components/image-tabs.tsx b/app/[locale]/(admin)/admin/content/image/components/image-tabs.tsx
index 333d4fb..8714c40 100644
--- a/app/[locale]/(admin)/admin/content/image/components/image-tabs.tsx
+++ b/app/[locale]/(admin)/admin/content/image/components/image-tabs.tsx
@@ -35,7 +35,7 @@ const ImageTabs = () => {
         </div>
          */}
         <TabsContent value="submitted" className="mt-0">
-          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
             <TableImage />
           </div>
         </TabsContent>
diff --git a/app/[locale]/(admin)/admin/content/image/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/image/detail/[id]/page.tsx
index 51bfcac..b784fa8 100644
--- a/app/[locale]/(admin)/admin/content/image/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/content/image/detail/[id]/page.tsx
@@ -5,7 +5,7 @@ const ImageDetailPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-4 bg-slate-100">
+      <div className="space-y-4 bg-slate-100 dark:bg-default-50">
         <FormImageDetail />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/image/page.tsx b/app/[locale]/(admin)/admin/content/image/page.tsx
index 901b6c6..7d0a9e1 100644
--- a/app/[locale]/(admin)/admin/content/image/page.tsx
+++ b/app/[locale]/(admin)/admin/content/image/page.tsx
@@ -12,12 +12,12 @@ const ReactTableImagePage = () => {
   const { can } = usePermission();
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-default-50">
       <SiteBreadcrumb />
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
-            <CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
+            <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
               <CardTitle>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
@@ -25,7 +25,7 @@ const ReactTableImagePage = () => {
                       <UploadIcon className="w-4 h-4 text-blue-600" />
                     </div>
                     <div>
-                      <h1 className="text-xl font-semibold text-gray-900">
+                      <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Image Management
                       </h1>
                       <p className="text-sm text-gray-500">
@@ -55,7 +55,7 @@ const ReactTableImagePage = () => {
                 </div>
               </CardTitle>
             </CardHeader>
-            <CardContent className="p-6 bg-gray-50">
+            <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
               <ImageTabs />
             </CardContent>
           </Card>
diff --git a/app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx b/app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx
index a18fae1..74e67bb 100644
--- a/app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx
+++ b/app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx
@@ -35,7 +35,7 @@ const DocumentTabs = () => {
         </div>
         
         <TabsContent value="submitted" className="mt-0">
-          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
             <TableTeks />
           </div>
         </TabsContent>
diff --git a/app/[locale]/(admin)/admin/content/text/create/page.tsx b/app/[locale]/(admin)/admin/content/text/create/page.tsx
index b69509f..6dc8036 100644
--- a/app/[locale]/(admin)/admin/content/text/create/page.tsx
+++ b/app/[locale]/(admin)/admin/content/text/create/page.tsx
@@ -5,7 +5,7 @@ const TeksCreatePage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-4 bg-slate-100">
+      <div className="space-y-4 bg-slate-100 dark:bg-default-50">
         <FormTeks />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
index 38ba463..dd554b2 100644
--- a/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
@@ -5,7 +5,7 @@ const TeksDetailPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-4 bg-slate-100">
+      <div className="space-y-4 bg-slate-100 dark:bg-default-50">
         <FormTeksDetail />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/text/page.tsx b/app/[locale]/(admin)/admin/content/text/page.tsx
index ee951a9..6df7522 100644
--- a/app/[locale]/(admin)/admin/content/text/page.tsx
+++ b/app/[locale]/(admin)/admin/content/text/page.tsx
@@ -12,12 +12,12 @@ const ReactTableDocumentPage = () => {
   const { can } = usePermission();
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* <SiteBreadcrumb /> */}
+    <div className="min-h-screen bg-gray-50 dark:bg-default-50">
+      <SiteBreadcrumb />
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
-            <CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
+            <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
               <CardTitle>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
@@ -25,7 +25,7 @@ const ReactTableDocumentPage = () => {
                       <UploadIcon className="w-4 h-4 text-blue-600" />
                     </div>
                     <div>
-                      <h1 className="text-xl font-semibold text-gray-900">
+                      <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Document Management
                       </h1>
                       <p className="text-sm text-gray-500">
@@ -50,7 +50,7 @@ const ReactTableDocumentPage = () => {
                 </div>
               </CardTitle>
             </CardHeader>
-            <CardContent className="p-6 bg-gray-50">
+            <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
               <DocumentTabs />
             </CardContent>
           </Card>
diff --git a/app/[locale]/(admin)/admin/content/video/components/audio-visual-tabs.tsx b/app/[locale]/(admin)/admin/content/video/components/audio-visual-tabs.tsx
index 77d5669..0115eae 100644
--- a/app/[locale]/(admin)/admin/content/video/components/audio-visual-tabs.tsx
+++ b/app/[locale]/(admin)/admin/content/video/components/audio-visual-tabs.tsx
@@ -35,7 +35,7 @@ const AudioVisualTabs = () => {
         </div> */}
         
         <TabsContent value="submitted" className="mt-0">
-          <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
             <TableVideo />
           </div>
         </TabsContent>
diff --git a/app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx
index 84ad3d3..5ce318e 100644
--- a/app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx
@@ -5,7 +5,7 @@ const VideoDetailPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-4 bg-slate-100">
+      <div className="space-y-4 bg-slate-100 dark:bg-default-50">
         <FormVideoDetail />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/video/page.tsx b/app/[locale]/(admin)/admin/content/video/page.tsx
index ce98eb3..aa92422 100644
--- a/app/[locale]/(admin)/admin/content/video/page.tsx
+++ b/app/[locale]/(admin)/admin/content/video/page.tsx
@@ -12,20 +12,20 @@ const ReactTableAudioVisualPage = () => {
   const { can } = usePermission();
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-default-50">
       <SiteBreadcrumb />
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
-            <CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
+            <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
               <CardTitle>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
+                    <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                       <UploadIcon className="w-4 h-4 text-blue-600" />
                     </div>
                     <div>
-                      <h1 className="text-xl font-semibold text-gray-900">
+                      <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Audio-Visual Management
                       </h1>
                       <p className="text-sm text-gray-500">
@@ -50,7 +50,7 @@ const ReactTableAudioVisualPage = () => {
                 </div>
               </CardTitle>
             </CardHeader>
-            <CardContent className="p-6 bg-gray-50">
+            <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
               <AudioVisualTabs />
             </CardContent>
           </Card>
diff --git a/app/[locale]/(admin)/admin/management-user/page.tsx b/app/[locale]/(admin)/admin/management-user/page.tsx
index c8b764a..8ac134c 100644
--- a/app/[locale]/(admin)/admin/management-user/page.tsx
+++ b/app/[locale]/(admin)/admin/management-user/page.tsx
@@ -32,7 +32,7 @@ export default function ManagementUser() {
   return (
     <div>
       <SiteBreadcrumb />
-      <section className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5 border">
+      <section className="flex flex-col gap-2 bg-white dark:bg-default-50 rounded-lg p-3 mt-5 border">
         <div className="flex justify-between py-3">
           <p className="text-lg">
             Data User
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index 3732f90..685a31e 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -133,6 +133,25 @@
   }
 }
 
+@layer base {
+  /* CKEditor – force light mode even in dark */
+  .ck-viewer .ck.ck-editor__main > .ck-editor__editable {
+    @apply bg-white text-black;
+  }
+
+  .ck-viewer .ck-content {
+    @apply text-black;
+  }
+
+  .ck-viewer .ck-content h1,
+  .ck-viewer .ck-content h2,
+  .ck-viewer .ck-content h3,
+  .ck-viewer .ck-content p,
+  .ck-viewer .ck-content li {
+    @apply text-black;
+  }
+}
+
 
 /* @import "tailwindcss";
 @import "tw-animate-css";
diff --git a/components/editor/view-editor.js b/components/editor/view-editor.js
index 2dae74e..96c53c3 100644
--- a/components/editor/view-editor.js
+++ b/components/editor/view-editor.js
@@ -1,18 +1,39 @@
+// import React from "react";
+// import { CKEditor } from "@ckeditor/ckeditor5-react";
+// import Editor from "@/vendor/ckeditor5/build/ckeditor";
+
+// function ViewEditor(props) {
+//   return (
+//     <CKEditor
+//       editor={Editor}
+//       data={props.initialData}
+//       disabled={true}
+//       config={{
+//         // toolbar: [],
+//         isReadOnly: true,
+//       }}
+//     />
+//   );
+// }
+
+// export default ViewEditor;
+
 import React from "react";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
 import Editor from "@/vendor/ckeditor5/build/ckeditor";
 
-function ViewEditor(props) {
+function ViewEditor({ initialData }) {
   return (
-    <CKEditor
-      editor={Editor}
-      data={props.initialData}
-      disabled={true}
-      config={{
-        // toolbar: [],
-        isReadOnly: true,
-      }}
-    />
+    <div className="ck-viewer">
+      <CKEditor
+        editor={Editor}
+        data={initialData}
+        disabled
+        config={{
+          isReadOnly: true,
+        }}
+      />
+    </div>
   );
 }
 
diff --git a/components/form/categories/categories-update-form.tsx b/components/form/categories/categories-update-form.tsx
index 7551a7e..856e7cb 100644
--- a/components/form/categories/categories-update-form.tsx
+++ b/components/form/categories/categories-update-form.tsx
@@ -225,13 +225,13 @@ export default function CategoriesUpdateForm() {
               </div>
             </div>
 
-            <Button
+            <button
               type="submit"
-              className="w-full mt-4 bg-green-600 text-white"
+              className="w-full mt-4 bg-[#1f2937] text-white py-2 rounded-xl hover:bg-slate-500"
               disabled={isSubmitting || isUploading}
             >
               {isSubmitting ? "Menyimpan..." : "Simpan Perubahan"}
-            </Button>
+            </button>
           </Card>
 
           {/* SIDEBAR */}
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index caf3c67..1a971fb 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -75,7 +75,7 @@ export default function Navbar() {
   const fullname = Cookies.get("ufne");
 
   return (
-    <header className="relative max-w-[1400px] mx-auto flex items-center justify-between px-4 py-3 border-b bg-white z-50">
+    <header className="relative max-w-[1400px] mx-auto flex items-center justify-between px-4 py-3 border-b bg-white dark:bg-default-50 z-50">
       <div className="flex flex-row items-center justify-between space-x-4 z-10">
         <Menu
           className="w-6 h-6 cursor-pointer"
@@ -92,6 +92,10 @@ export default function Navbar() {
         </Link>
 
         <DynamicLogoTenant />
+
+        <div className="hidden custom-lg-button:flex items-end">
+          <ThemeSwitcher />
+        </div>
       </div>
 
       {/* 🌐 NAV MENU */}
@@ -171,10 +175,6 @@ export default function Navbar() {
         })}
       </nav>
 
-      {/* <div className="hidden custom-lg-button:flex text-left">
-        <ThemeSwitcher />
-      </div> */}
-
       {/* 🔹 PROFILE / LOGIN SECTION */}
       <nav className="hidden md:flex items-center gap-3 z-10 relative">
         {!isLoggedIn ? (
@@ -357,7 +357,7 @@ export default function Navbar() {
                   </Link>
                   <Link
                     href="/auth/register"
-                    className="block text-lg text-gray-800"
+                    className="block text-lg text-gray-800 dark:text-white"
                   >
                     {t("register")}
                   </Link>
diff --git a/components/table/management-user/management-user-internal-table.tsx b/components/table/management-user/management-user-internal-table.tsx
index 15407f6..21ff721 100644
--- a/components/table/management-user/management-user-internal-table.tsx
+++ b/components/table/management-user/management-user-internal-table.tsx
@@ -193,7 +193,7 @@ const UserInternalTable = () => {
   };
 
   return (
-    <div className="bg-white">
+    <div className="bg-white dark:bg-default-50">
       <div className="flex justify-between py-3">
         <Input
           type="text"