diff --git a/app/[locale]/(protected)/admin/add-experts/component/table.tsx b/app/[locale]/(protected)/admin/add-experts/component/table.tsx
index d3f08916..57be718c 100644
--- a/app/[locale]/(protected)/admin/add-experts/component/table.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/component/table.tsx
@@ -201,7 +201,7 @@ const AddExpertTable = () => {
   }
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex justify-between mb-10 items-center">
         <p className="text-xl font-medium text-default-900">Tenaga Ahli</p>
         <Link href="/admin/add-experts/create">
diff --git a/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
index ba1382e0..5ed4bfd1 100644
--- a/app/[locale]/(protected)/admin/add-experts/create/page.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
@@ -268,7 +268,7 @@ export default function AddExpertForm() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
         >
           <p className="fonnt-semibold">Campaign</p>
           <FormField
diff --git a/app/[locale]/(protected)/admin/analysis/content-management/page.tsx b/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
index f85d6a2e..2141c268 100644
--- a/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
@@ -133,8 +133,8 @@ export default function ContentManagement() {
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
         <Accordion id="polri" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               KONTEN YANG DISIMPAN OLEH PENGGUNA POLRI INDONESIA
             </AccordionTrigger>
             <AccordionContent>
@@ -161,8 +161,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="2" type="single" collapsible className="w-full">
-          <AccordionItem value="item-2" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-2" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
             </AccordionTrigger>
             <AccordionContent>
@@ -189,8 +189,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="3" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               KONTEN YANG DISIMPAN OLEH PENGGUNA JURNALIS INTERNASIONAL
             </AccordionTrigger>
             <AccordionContent>
@@ -217,8 +217,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="4" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               PENAMBAHAN JUMLAH PENGGUNA POLRI INDONESIA
             </AccordionTrigger>
             <AccordionContent>
@@ -245,8 +245,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="5" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
             </AccordionTrigger>
             <AccordionContent>
@@ -273,8 +273,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="6" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               PENAMBAHAN JUMLAH PENGGUNA JURNALIS INTERNASIONAL
             </AccordionTrigger>
             <AccordionContent>
diff --git a/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx b/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
index 5a3b72c8..a83cf14b 100644
--- a/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
@@ -88,8 +88,8 @@ export default function EmergencyIssue() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               ANALISA BERKAITAN DENGAN AKUN PELAPOR{" "}
             </AccordionTrigger>
             <AccordionContent>
diff --git a/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx b/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
index 0518e0fc..1610003f 100644
--- a/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
@@ -89,8 +89,8 @@ export default function FeedbackCenter() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               TICKET PADA FEEDBACK CENTER{" "}
             </AccordionTrigger>
             <AccordionContent>
diff --git a/app/[locale]/(protected)/admin/analysis/schedule/page.tsx b/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
index 99eff969..c033ac90 100644
--- a/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
@@ -114,8 +114,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               PUBLISH JADWAL PRESS CONFERENCE TERBANYAK
             </AccordionTrigger>
             <AccordionContent>
@@ -147,8 +147,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               JUMLAH PRODUKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
             </AccordionTrigger>
             <AccordionContent>
@@ -180,8 +180,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               TINGKAT INTERAKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
             </AccordionTrigger>
             <AccordionContent>
@@ -213,8 +213,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
               AKTIFITAS MEDIA BERKAITAN DENGAN PERS RILIS
             </AccordionTrigger>
             <AccordionContent>
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
index f7d3bc28..434d6061 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
@@ -286,7 +286,7 @@ const AccountListTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex justify-between mb-3 items-center">
         <p className="text-xl font-medium text-default-900">Daftar Akun</p>
         <div className="flex flex-row gap-3">
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
index 13e8e641..5d8c6a1c 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
@@ -143,7 +143,7 @@ const CampaignListTable = () => {
   }
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex justify-between mb-10 items-center">
         <p className="text-xl font-medium text-default-900">Daftar Campaign</p>
         <div className="flex flex-row gap-2">
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
index 210c8241..a3c4f2f5 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
@@ -101,7 +101,7 @@ export default function CreateCampaign() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
         >
           <p className="fonnt-semibold">Campaign</p>
           <FormField
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx
index 7cd610db..51b2de73 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx
@@ -260,7 +260,7 @@ export default function BroadcastCampaignDetail({
   };
 
   return (
-    <div className="bg-white container-fluid rounded ">
+    <div className="bg-white dark:bg-black container-fluid rounded ">
       <div className="mt-1 p-4">
         <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-4">
           <Button
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
index 01064f1f..4e968bec 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
@@ -130,7 +130,7 @@ export default function EditCampaign() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
         >
           <p className="fonnt-semibold">Campaign</p>
           <FormField
diff --git a/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
index 151b650e..730cae19 100644
--- a/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
@@ -204,7 +204,7 @@ const BroadcastEmailTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex justify-between ">
         <Link href="/admin/broadcast/campaign-list" className="mr-3">
           <Button color="primary" size="md" className="text-sm">
diff --git a/app/[locale]/(protected)/admin/broadcast/page.tsx b/app/[locale]/(protected)/admin/broadcast/page.tsx
index 5a4f4936..d1ced467 100644
--- a/app/[locale]/(protected)/admin/broadcast/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/page.tsx
@@ -16,7 +16,7 @@ export default function AdminBroadcast() {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
         {tab === "Email Blast" && <BroadcastEmailTable />}
         {tab === "WhatsApp Blast" && <BroadcastWhatsAppTable />}
       </div>
diff --git a/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx b/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
index ba4eb2de..4e0bdbcc 100644
--- a/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
@@ -343,7 +343,7 @@ export default function CreateUserForm() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
+          className="space-y-6 bg-white dark:bg-black p-10 w-full"
         >
           <p className="text-xl">Data Pengelola Media Hub</p>
           <FormField
diff --git a/app/[locale]/(protected)/admin/management-user/page.tsx b/app/[locale]/(protected)/admin/management-user/page.tsx
index a3692b2a..5cca5a45 100644
--- a/app/[locale]/(protected)/admin/management-user/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/page.tsx
@@ -36,7 +36,7 @@ export default function ManagementUser() {
         <ManagementUserVisualization />
       </section>
 
-      <section className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5">
+      <section className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3 mt-5">
         <div className="flex justify-between py-3">
           <p className="text-lg">
             Data User {isInternal ? "Internal" : "Eksternal"}
diff --git a/app/[locale]/(protected)/admin/media-tracking/results/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/results/component/table.tsx
index 43edac80..ea13f365 100644
--- a/app/[locale]/(protected)/admin/media-tracking/results/component/table.tsx
+++ b/app/[locale]/(protected)/admin/media-tracking/results/component/table.tsx
@@ -257,7 +257,7 @@ const ResultTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3 border ">
       <div className="flex flex-col sm:flex-row lg:flex-row justify-end sm:items-center md:items-center lg:items-center">
         <div className=" flex flex-row justify-end items-center gap-3">
           <div className="flex items-center">
diff --git a/app/[locale]/(protected)/admin/settings/category/component/column.tsx b/app/[locale]/(protected)/admin/settings/category/component/column.tsx
index ec43df57..b7b48fa2 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/column.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/column.tsx
@@ -100,7 +100,7 @@ const columns: ColumnDef<any>[] = [
         router.push("/admin/settings/category?dataChange=true");
       };
       return (
-        <Menubar className="border-none">
+        <Menubar className="border-none dark:bg-black">
           <MenubarMenu>
             <MenubarTrigger>
               <Button
diff --git a/app/[locale]/(protected)/admin/settings/category/component/create.tsx b/app/[locale]/(protected)/admin/settings/category/component/create.tsx
index c3a1f512..d362daa1 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/create.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/create.tsx
@@ -253,7 +253,7 @@ export default function CreateCategoryModal() {
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
+            className="space-y-3 bg-white dark:bg-[#1f2937] rounded-sm"
           >
             <FormField
               control={form.control}
diff --git a/app/[locale]/(protected)/admin/settings/category/component/table.tsx b/app/[locale]/(protected)/admin/settings/category/component/table.tsx
index bd91488d..f63857b0 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/table.tsx
@@ -186,7 +186,7 @@ const AdminCategoryTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex justify-between mb-10 items-center">
         <p className="text-xl font-medium text-default-900">{t("category", { defaultValue: "Category" })}</p>
         <CreateCategoryModal />
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
index b6978627..4a3986ac 100644
--- a/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
@@ -188,7 +188,7 @@ const AdminSettingTrackingTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex items-end justify-between">
         {/* <CreateSettingTracking /> */}
         <div className="flex-none">
diff --git a/app/[locale]/(protected)/admin/survey/component/table.tsx b/app/[locale]/(protected)/admin/survey/component/table.tsx
index ae1f97ff..b8d03e40 100644
--- a/app/[locale]/(protected)/admin/survey/component/table.tsx
+++ b/app/[locale]/(protected)/admin/survey/component/table.tsx
@@ -190,7 +190,7 @@ const SurveyListTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex-1 text-xl font-medium text-default-900">Survey</div>
       <div className="flex flex-row gap-2 items-center justify-between">
         <div className="w-full md:w-[200px] lg:w-[300px] px-2">
diff --git a/app/[locale]/(protected)/admin/survey/page.tsx b/app/[locale]/(protected)/admin/survey/page.tsx
index 0f7d981f..8697a827 100644
--- a/app/[locale]/(protected)/admin/survey/page.tsx
+++ b/app/[locale]/(protected)/admin/survey/page.tsx
@@ -10,7 +10,7 @@ export default function AdminSurvey() {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="w-full overflow-x-auto bg-white  p-4 rounded-sm space-y-3">
         <SurveyListTable />
       </div>
     </div>
diff --git a/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx b/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
index e6ebbf69..bcf133c2 100644
--- a/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
+++ b/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
@@ -276,7 +276,7 @@ const TaskTaTable = () => {
                     onClick={() => setActiveTab("special")}
                     className={`px-4 py-1 rounded transition ${
                       activeTab === "special"
-                        ? "bg-default-900 text-white"
+                        ? "bg-default-900 text-white dark:text-black"
                         : "border dark:text-default-700"
                     }`}
                   >
@@ -287,7 +287,7 @@ const TaskTaTable = () => {
                     onClick={() => setActiveTab("ta")}
                     className={`px-4 py-1 rounded transition ${
                       activeTab === "ta"
-                        ? "bg-default-900 text-white"
+                        ? "bg-default-900 text-white dark:text-black"
                         : "border dark:text-default-700"
                     }`}
                   >
@@ -298,7 +298,7 @@ const TaskTaTable = () => {
                     onClick={() => setActiveTab("daily")}
                     className={`px-4 py-1 rounded transition ${
                       activeTab === "daily"
-                        ? "bg-default-900 text-white"
+                        ? "bg-default-900 text-white dark:text-black"
                         : "border dark:text-default-700"
                     }`}
                   >
diff --git a/app/[locale]/(protected)/curator/feedback/page.tsx b/app/[locale]/(protected)/curator/feedback/page.tsx
index 5986ffc6..4bafd195 100644
--- a/app/[locale]/(protected)/curator/feedback/page.tsx
+++ b/app/[locale]/(protected)/curator/feedback/page.tsx
@@ -35,7 +35,7 @@ export default function UserFeedback() {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="flex flex-col gap-2 bg-white p-4">
+      <div className="flex flex-col gap-2 bg-white dark:bg-black p-4">
         <p className="text-lg">Hasil Feedback</p>
         <div className="grid grid-cols-2 gap-5">
           {listData?.map(
@@ -43,7 +43,7 @@ export default function UserFeedback() {
               list?.avgScore !== "NaN" && (
                 <div
                   key={list?.id}
-                  className="flex flex-col gap-2 bg-gray-100 rounded-md p-5"
+                  className="flex flex-col gap-2 bg-gray-100 dark:bg-blue-950 rounded-md p-5"
                 >
                   <div className="flex flex-row gap-3 items-center">
                     <p className="text-3xl">{parseInt(list?.avgScore)}</p>
diff --git a/components/main/document-detail.tsx b/components/main/document-detail.tsx
index 13ec23cf..96020b32 100644
--- a/components/main/document-detail.tsx
+++ b/components/main/document-detail.tsx
@@ -158,8 +158,11 @@ const DetailDocument = () => {
     }
   };
 
-  const size = [{ label: "DOC" }, { label: "PPT" }, { label: "PDF" }];
-
+  const sizeOptions = [
+    { label: "DOC", format: ".docx" },
+    { label: "PPT", format: ".pptx" },
+    { label: "PDF", format: ".pdf" },
+  ];
   function formatBytes(kb: any, decimals = 2) {
     if (kb == 0 || kb == null) return "0 KB";
 
@@ -582,7 +585,7 @@ const DetailDocument = () => {
               {t("docSize", { defaultValue: "Doc Size" })}
             </h4>
             <div className="border-t border-black my-4"></div>
-            <div className="space-y-2">
+            {/* <div className="space-y-2">
               {size.map((size: any) => (
                 <div className="flex flex-row justify-between">
                   <div
@@ -604,6 +607,44 @@ const DetailDocument = () => {
                   </div>
                 </div>
               ))}
+            </div> */}
+            <div className="space-y-2">
+              {sizeOptions.map((opt) => {
+                // cari file dengan format sesuai
+                let matchedFile = detailDataDocument?.files?.find(
+                  (f: any) =>
+                    f.format.toLowerCase() === opt.format.toLowerCase()
+                );
+
+                // kalau tidak ada, pakai file pertama
+                if (!matchedFile && detailDataDocument?.files?.length > 0) {
+                  matchedFile = detailDataDocument.files[0];
+                }
+
+                return (
+                  <div
+                    key={opt.label}
+                    className="flex flex-row justify-between"
+                  >
+                    <div className="items-center flex flex-row gap-2 cursor-pointer">
+                      <input
+                        type="radio"
+                        name="size"
+                        value={opt.label}
+                        checked={selectedSize === opt.label}
+                        onChange={() => setSelectedSize(opt.label)}
+                        className="text-red-600 focus:ring-red-600"
+                      />
+                      <div className="text-sm">{opt.label}</div>
+                    </div>
+                    <div className="text-sm">
+                      {matchedFile
+                        ? formatBytes(Number(matchedFile.size))
+                        : "0 KB"}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
 
             {/* Download Semua */}
diff --git a/components/table/task-plan/single-view-social-media-table.tsx b/components/table/task-plan/single-view-social-media-table.tsx
index 825c026f..fef6705c 100644
--- a/components/table/task-plan/single-view-social-media-table.tsx
+++ b/components/table/task-plan/single-view-social-media-table.tsx
@@ -386,7 +386,7 @@ export default function SingleViewSocialMediaTable() {
             ))}
           </div>
         ) : (
-          <div className="flex justify-center bg-slate-200 rounded-full py-1">
+          <div className="flex justify-center bg-slate-200 dark:bg-black rounded-full py-1">
             Rencana Bulanan Belum Tersedia
           </div>
         )}
@@ -408,7 +408,7 @@ export default function SingleViewSocialMediaTable() {
             ))}
           </div>
         ) : (
-          <div className="flex justify-center bg-slate-200 rounded-full py-1">
+          <div className="flex justify-center bg-slate-200 dark:bg-black rounded-full py-1">
             Rencana Mingguan Belum Tersedia
           </div>
         )}
@@ -434,7 +434,7 @@ export default function SingleViewSocialMediaTable() {
                 <li
                   key={`day-${index}`}
                   className={`p-2 text-end min-h-[100px] ${
-                    day.isCurrentMonth ? "" : "bg-slate-200 text-slate-400"
+                    day.isCurrentMonth ? "" : "bg-slate-200 dark:bg-black text-slate-400"
                   }`}
                 >
                   <span
diff --git a/components/table/task-plan/single-view-table.tsx b/components/table/task-plan/single-view-table.tsx
index cc67198c..60503c4a 100644
--- a/components/table/task-plan/single-view-table.tsx
+++ b/components/table/task-plan/single-view-table.tsx
@@ -273,7 +273,7 @@ export default function SingleViewTable() {
             ))}
           </div>
         ) : (
-          <div className="flex justify-center bg-slate-200 rounded-full py-1">
+          <div className="flex justify-center bg-slate-200 dark:bg-black rounded-full py-1">
             Rencana Bulanan Belum Tersedia
           </div>
         )}
@@ -295,7 +295,7 @@ export default function SingleViewTable() {
             ))}
           </div>
         ) : (
-          <div className="flex justify-center bg-slate-200 rounded-full py-1">
+          <div className="flex justify-center bg-slate-200 dark:bg-black rounded-full py-1">
             Rencana Mingguan Belum Tersedia
           </div>
         )}
diff --git a/components/visualization/content-production.tsx b/components/visualization/content-production.tsx
index bfb6386c..2b46494c 100644
--- a/components/visualization/content-production.tsx
+++ b/components/visualization/content-production.tsx
@@ -83,7 +83,7 @@ export default function ContentProductionVisualization() {
   };
 
   return (
-    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+    <div className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
       <p className="text-lg">
         <b>
           {isInternational[0]
diff --git a/components/visualization/management-user-viz.tsx b/components/visualization/management-user-viz.tsx
index da9c963f..a80eab81 100644
--- a/components/visualization/management-user-viz.tsx
+++ b/components/visualization/management-user-viz.tsx
@@ -28,7 +28,7 @@ export default function ManagementUserVisualization() {
   }, []);
 
   return (
-    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+    <div className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
       {isInternational ? (
         <p className="font-semibold">STATISTICS TO THE NUMBER OF USERS</p>
       ) : (
diff --git a/components/visualization/pattern-relation-viz.tsx b/components/visualization/pattern-relation-viz.tsx
index 332ba6b4..ea68a8ed 100644
--- a/components/visualization/pattern-relation-viz.tsx
+++ b/components/visualization/pattern-relation-viz.tsx
@@ -96,7 +96,7 @@ export default function PatternRelationVisualization() {
   };
 
   return (
-    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+    <div className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
       <p className="text-lg">
         <b>
           {isInternational[0]
diff --git a/components/visualization/performance-polda.tsx b/components/visualization/performance-polda.tsx
index 7242af91..2533b173 100644
--- a/components/visualization/performance-polda.tsx
+++ b/components/visualization/performance-polda.tsx
@@ -70,7 +70,7 @@ export default function PerformancePoldaViz() {
   };
 
   return (
-    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+    <div className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
       <p className="text-lg">
         <b>{isInternational[0] ? "POLRES PERFORMANCE" : "POLFORMANCE POLDA"}</b>
       </p>