diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
index 4984ce42..12dd6e04 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
+import { Link } from "@/components/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -139,12 +140,12 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <a href="/contributor/task/detail/[id]">
+            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
               </DropdownMenuItem>
-            </a>
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete
diff --git a/app/[locale]/(protected)/contributor/content/image/detail/[id]/page.tsx b/app/[locale]/(protected)/contributor/content/image/detail/[id]/page.tsx
new file mode 100644
index 00000000..c4c3a5ac
--- /dev/null
+++ b/app/[locale]/(protected)/contributor/content/image/detail/[id]/page.tsx
@@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+
+const ImageDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormImageDetail />
+      </div>
+    </div>
+  );
+};
+
+export default ImageDetailPage;
diff --git a/app/[locale]/(protected)/contributor/task/components/columns.tsx b/app/[locale]/(protected)/contributor/task/components/columns.tsx
index 3d7be186..b1c9e66c 100644
--- a/app/[locale]/(protected)/contributor/task/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/task/components/columns.tsx
@@ -118,10 +118,12 @@ const columns: ColumnDef<any>[] = [
                 View
               </DropdownMenuItem>
             </Link>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <SquarePen className="w-4 h-4 me-1.5" />
-              Edit
-            </DropdownMenuItem>
+            <Link href={`/contributor/task/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete
diff --git a/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx b/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx
new file mode 100644
index 00000000..f5a9a0d4
--- /dev/null
+++ b/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx
@@ -0,0 +1,18 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormTaskEdit from "@/components/form/task/task-edit-form";
+
+const TaskDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTaskEdit />
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailPage;
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx
index afa89b2b..79479fab 100644
--- a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx
@@ -34,6 +34,7 @@ import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import JoditEditor from "jodit-react";
+import { Badge } from "@/components/ui/badge";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -286,12 +287,19 @@ export default function DetailDocument() {
                         </div>
                       </RadioGroup>
                     </div>
-                    <div className=" py-3">
+                    <div className="py-3">
                       <div className="space-y-2">
                         <Label>Tag</Label>
-                        <p className="border rounded-md text-blue-600 px-2 py-2">
-                          {detail?.tags}
-                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {detail?.tags?.split(",").map((tag, index) => (
+                            <Badge
+                              key={index}
+                              className="border rounded-md  px-2 py-2"
+                            >
+                              {tag.trim()}
+                            </Badge>
+                          ))}
+                        </div>
                       </div>
                     </div>
                     <div className=" py-3">
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx
index 05ad3fff..0fcd0ff1 100644
--- a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx
@@ -33,6 +33,7 @@ import "swiper/css";
 import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -285,12 +286,19 @@ export default function DetailImage() {
                         </div>
                       </RadioGroup>
                     </div>
-                    <div className=" py-3">
+                    <div className="py-3">
                       <div className="space-y-2">
                         <Label>Tag</Label>
-                        <p className="border rounded-md text-blue-600 px-2 py-2">
-                          {detail?.tags}
-                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {detail?.tags?.split(",").map((tag, index) => (
+                            <Badge
+                              key={index}
+                              className="border rounded-md  px-2 py-2"
+                            >
+                              {tag.trim()}
+                            </Badge>
+                          ))}
+                        </div>
                       </div>
                     </div>
                     <div className=" py-3">
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx
index ce86d7b7..39cf0ac5 100644
--- a/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx
@@ -33,6 +33,7 @@ import "swiper/css";
 import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -292,12 +293,19 @@ export default function DetailImage() {
                         </div>
                       </RadioGroup>
                     </div>
-                    <div className=" py-3">
+                    <div className="py-3">
                       <div className="space-y-2">
                         <Label>Tag</Label>
-                        <p className="border rounded-md text-blue-600 px-2 py-2">
-                          {detail?.tags}
-                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {detail?.tags?.split(",").map((tag, index) => (
+                            <Badge
+                              key={index}
+                              className="border rounded-md  px-2 py-2"
+                            >
+                              {tag.trim()}
+                            </Badge>
+                          ))}
+                        </div>
                       </div>
                     </div>
                     <div className=" py-3">
diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx
index 72558a61..bcf720de 100644
--- a/app/[locale]/(public)/audio/filter/page.tsx
+++ b/app/[locale]/(public)/audio/filter/page.tsx
@@ -101,7 +101,7 @@ const FilterPage = () => {
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Audio {">"} <span className="font-bold">Semua Audio</span>
@@ -114,11 +114,14 @@ const FilterPage = () => {
         <Reveal>
           {/* Sidebar Kiri */}
           <div className="lg:w-1/4 w-max bg-white p-4 rounded-lg shadow-md">
-            <h2 className="text-lg font-semibold mb-4">Filter</h2>
+            <h2 className="text-lg font-semibold mb-4">
+              <Icon icon="stash:filter-light" fontSize={30} />
+              Filter
+            </h2>
             <div className="space-y-6">
               {/* Pencarian */}
               <div>
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pencarian
                 </label>
                 <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
@@ -126,7 +129,7 @@ const FilterPage = () => {
 
               {/* Tahun & Bulan */}
               <div>
-                <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pilih Tahun & Bulan
                 </label>
                 <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
@@ -134,7 +137,7 @@ const FilterPage = () => {
 
               {/* Tanggal */}
               <div>
-                <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pilih Tanggal
                 </label>
                 <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
@@ -142,13 +145,13 @@ const FilterPage = () => {
 
               {/* Kategori */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
                 <ul className="mt-2 space-y-2">
                   {categories.map((category) => (
                     <li key={category?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{category.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
                       </label>
                     </li>
                   ))}
@@ -158,18 +161,24 @@ const FilterPage = () => {
               <div className="border-t border-black my-4"></div>
               {/* Garis */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
                 <ul className="mt-2 space-y-2">
                   {formatAudio.map((format) => (
                     <li key={format?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{format.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                       </label>
                     </li>
                   ))}
                 </ul>
               </div>
+              <div className="border-t border-black dark:border-white my-4"></div>
+              <div className="text-center">
+                <a href="#" className="text-[#bb3523]">
+                  <b>Reset Filter</b>
+                </a>
+              </div>
             </div>
           </div>
         </Reveal>
@@ -187,8 +196,12 @@ const FilterPage = () => {
             {/* Card */}
             <div className=" grid grid-cols-1 gap-6 ">
               {audioData?.map((audio: any) => (
-                <Link href={`/audio/detail/${audio?.slug}`} key={audio?.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
-                  <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-16">
+                <Link
+                  href={`/audio/detail/${audio?.slug}`}
+                  key={audio?.id}
+                  className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                >
+                  <div className="flex items-center justify-center bg-[#bb3523] text-white rounded-lg w-16 h-16">
                     <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx
index 78de1a74..039b88cd 100644
--- a/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -18,6 +18,7 @@ const DetailDocument = () => {
   const params = useParams();
   const slug = params?.slug;
   const [detailDataDocument, setDetailDataDocument] = useState<any>();
+  const [selectedDocument, setSelectedDocument] = useState(0);
 
   useEffect(() => {
     initFetch();
@@ -39,19 +40,34 @@ const DetailDocument = () => {
 
   return (
     <>
-      <div className="min-h-screen px-4 md:px-24 py-4">
-        {/* Container Utama */}
+      <div className="px-4 md:px-24 py-4">
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
-            <div className="relative h-full rounded-lg bg-gray-600">
-              <img src="/assets/text-icon.png" className="flex items-center self-center" width={40} height={40} />
+            <div className="relative">
+              <img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
               <div className="absolute top-4 left-4"></div>
             </div>
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp;
+                {detailDataDocument?.clickCount}
+              </p>
+              <p>Kreator: {detailDataDocument?.creatorName}</p>
+            </div>
+
+            {/* Keterangan */}
+            <div className="md:w-3/4">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-gray-300 rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -74,9 +90,7 @@ const DetailDocument = () => {
 
             {/* Opsi Ukuran Foto */}
             <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
-
             <div className="border-t border-black my-4"></div>
-
             <div className="space-y-2">
               {sizes.map((size) => (
                 <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
@@ -105,30 +119,15 @@ const DetailDocument = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp;
-            {detailDataDocument?.clickCount}
-          </p>
-          <p>Kreator: {detailDataDocument?.creatorName}</p>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
-        </div>
       </div>
       <div className="w-full mb-8">
         {/* Comment */}
-        <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
-          <p className="flex items-start text-lg">Berikan Komentar</p>
-          <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
-          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+          <div className="gap-5 flex flex-col px-4 lg:px-20">
+            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <Textarea placeholder="Type your comments here." className="flex w-full" />
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+          </div>
         </div>
 
         {/* Konten Serupa */}
diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx
index 943e7412..8cd92fad 100644
--- a/app/[locale]/(public)/document/filter/page.tsx
+++ b/app/[locale]/(public)/document/filter/page.tsx
@@ -105,7 +105,7 @@ const DocumentPage = () => {
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Teks {">"} <span className="font-bold">Semua Teks</span>
@@ -116,63 +116,70 @@ const DocumentPage = () => {
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
         {/* Sidebar Kiri */}
-        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
-          <h2 className="text-lg font-semibold mb-4">Filter</h2>
+        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4 flex items-center gap-1">
+            <Icon icon="stash:filter-light" fontSize={30} />
+            Filter
+          </h2>
+          <div className="border-t border-black dark:border-white my-4"></div>
           <div className="space-y-6">
             {/* Pencarian */}
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
               <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
-
             {/* Tahun & Bulan */}
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pilih Tahun & Bulan
               </label>
               <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
-
             {/* Tanggal */}
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pilih Tanggal
               </label>
               <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
-
             {/* Kategori */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{category.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
             {/* Garis */}
-            <div className="border-t border-black my-4"></div>
+            <div className="border-t border-black dark:border-white my-4"></div>
             {/* Garis */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
               <ul className="mt-2 space-y-2">
                 {formatAudio.map((format) => (
                   <li key={format?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{format.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
+            <div className="border-t border-black dark:border-white my-4"></div>
+            <div className="text-center">
+              <a href="#" className="text-[#bb3523]">
+                <b>Reset Filter</b>
+              </a>
+            </div>
           </div>
         </div>
 
@@ -203,12 +210,12 @@ const DocumentPage = () => {
                     </svg>
                   </div>
 
-                  <div className="flex flex-col flex-1">
-                    <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
+                  <div className="flex flex-col flex-1 gap-2">
+                    <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center gap-2 text-xs">
                       {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
                     </div>
                     <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
-                    <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
+                    <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
                       <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
                         <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
                       </svg>
diff --git a/app/[locale]/(public)/feedback/page.tsx b/app/[locale]/(public)/feedback/page.tsx
index f6dad1aa..d5f7f250 100644
--- a/app/[locale]/(public)/feedback/page.tsx
+++ b/app/[locale]/(public)/feedback/page.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import { Reveal } from "@/components/landing-page/Reveal";
+import { error, loading, successCallback } from "@/config/swal";
 import { getFeedback, postUserFeedback } from "@/service/landing/landing";
 import React, { useEffect, useState } from "react";
+import { any } from "zod";
 
 interface RatingProps {
   label: string;
@@ -32,6 +34,12 @@ const Rating: React.FC<RatingProps> = ({ label, onRate }) => {
 };
 
 const FeedbackForm: React.FC = () => {
+  const [ratings, setRatings] = useState({
+    accessibility: 0,
+    appearance: 0,
+    content: 0,
+  });
+
   useEffect(() => {
     async function initState() {
       const response = await getFeedback();
@@ -41,22 +49,71 @@ const FeedbackForm: React.FC = () => {
 
     initState();
   }, []);
-  const [ratings, setRatings] = useState({
-    accessibility: 0,
-    appearance: 0,
-    content: 0,
-  });
 
-  const handleRatingChange = (field: keyof typeof ratings, value: number) => {
-    setRatings((prev) => ({ ...prev, [field]: value }));
+  type Feedback = {
+    feedbackId: any;
+    score: any;
   };
+  
+  const [userFeedbacks, setUserFeedbacks] = useState<Feedback[]>([]);
+  const [hasMounted, setHasMounted] = useState(false);
 
-  const handleSubmit = async () => {
-    const response = await postUserFeedback();
-    console.log("Feedback submitted:", ratings);
-    alert("Terima kasih atas feedback Anda!");
+  const handleRatingChange = (id: any, score: any) => {
+    const listData = [...userFeedbacks];
+    const dataIdx = userFeedbacks.findIndex((o) => o.feedbackId === id);
     
+
+    console.log("idx :", dataIdx);
+    console.log("Before :", listData);
+  
+    if (dataIdx !== -1) {
+      console.log("update");
+      listData[dataIdx].score = score;
+    } else {
+      const data = {
+        feedbackId: id,
+        score,
+      };
+  
+      listData.push(data);
+    }
+  
+    setUserFeedbacks(listData);
+    console.log("After :", userFeedbacks);
   };
+  const handleSubmit = async () => {
+    loading();
+    console.log("Save Feedback :", userFeedbacks);
+    const response = await postUserFeedback();
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    successCallback("Terima kasih, feedback Anda telah terkirim");
+  };
+  async function onSubmit() {
+    //     loading();
+    //     let finalData = {
+    //       name: data.name,
+    //       email: data.email,
+    //       title : data.title,
+    //       message: data.title
+    //     }
+    //     console.log(finalData);
+    //     const response = await sendMessage(finalData);
+    //     close();
+    //     successCallback();
+  }
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
 
   return (
     <Reveal>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index 489bba71..a76d06a4 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -1,56 +1,12 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { Textarea } from "@/components/ui/textarea";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { textEllipsis } from "@/utils/globals";
 import { getDetail } from "@/service/landing/landing";
 import NewContent from "@/components/landing-page/new-content";
-import { Reveal } from "@/components/landing-page/Reveal";
-
-const dummyImage = [
-  { id: 1, thumbnail: "/assets/banner-sample.png" },
-  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
-  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
-  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
-  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
-];
-
-const dummyData = {
-  id: 12312,
-  title: "TITLE",
-  createdBy: "Mabes",
-  createdAt: "21-21-2021",
-  time: "18:23",
-  desc: "sdaasd",
-  htmlDescription:
-    '<p>Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.</p><p>Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.</p><p>"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.</p><p>Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.</p><p>“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.</p>',
-};
-
-const dummyImageContent = [
-  { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-];
-
-const dummyDescription = [
-  { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-];
 
 const DetailInfo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -85,8 +41,7 @@ const DetailInfo = () => {
       <div className="min-h-screen px-4 md:px-24 py-4">
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
-
-          <div className="md:w-[70%]">
+          <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
               <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
@@ -101,10 +56,26 @@ const DetailInfo = () => {
                 </a>
               ))}
             </div>
+
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <div className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp; {detailDataImage?.clickCount} &nbsp;
+                <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
+              </div>
+            </div>
+
+            {/* Keterangan */}
+            <div className="w-full">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-[30%] p-4 bg-gray-300 rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -133,10 +104,10 @@ const DetailInfo = () => {
 
             <div className="space-y-2">
               {sizes.map((size) => (
-                <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
-                  <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                <label key={size?.label} className="flex items-center space-x-2 cursor-pointer">
+                  <input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={() => setSelectedSize(size?.label)} className="text-red-600 focus:ring-red-600" />
                   <div className="text-sm">
-                    {size.label}&nbsp;{size.value}
+                    {size?.label}&nbsp;{size?.value}
                   </div>
                 </label>
               ))}
@@ -159,29 +130,15 @@ const DetailInfo = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <div className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp; {detailDataImage?.clickCount} &nbsp;
-            <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
-          </div>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
-        </div>
       </div>
       <div className="w-full mb-8">
         {/* Comment */}
-        <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
-          <p className="flex items-start text-lg">Berikan Komentar</p>
-          <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
-          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
+            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <Textarea placeholder="Type your comments here." className="flex w-full" />
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+          </div>
         </div>
 
         {/* Konten Serupa */}
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 4fe764dc..1d4aecc4 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -5,11 +5,12 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { formatDateToIndonesian } from "@/utils/globals";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
-import { getListContent } from "@/service/landing/landing";
+import { getListContent, listCategory } from "@/service/landing/landing";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
 import { Link } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -40,7 +41,7 @@ const formatPicture = [
 
 const FilterPage = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const asPath = usePathname();
   const params = useParams();
   const searchParams = useSearchParams();
   const locale = params?.locale;
@@ -56,6 +57,13 @@ const FilterPage = () => {
     pageSize: 10,
   });
   const [page, setPage] = useState(1);
+  const [totalContent, setTotalContent] = useState();
+  const [contentImage, setContentImage] = useState([]);
+  const [, setGetTotalPage] = useState();
+  const [categories, setCategories] = useState<any>([]);
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [search, setSearch] = useState();
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -100,11 +108,48 @@ const FilterPage = () => {
     },
   });
 
+  // async function getCategories() {
+  //   const category = await listCategory("1");
+  //   const resCategory = category?.data?.data?.content;
+  //   setCategories(resCategory);
+  // }
+
+  // function getSelectedCategory() {
+  //   const filter = [];
+
+  //   if (category) {
+  //     const categoryArr = category.split(",");
+
+  //     for (const element of categoryArr) {
+  //       filter.push(Number(element));
+  //     }
+
+  //     setCategoryFilter(filter);
+  //   }
+  // }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (search == "" || search == undefined) {
+      router.push("");
+    } else {
+      router.push(`?title=${search}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
   return (
     <div className="flex flex-col">
       {/* Header */}
 
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Foto {">"} <span className="font-bold">Semua Foto</span>
@@ -115,59 +160,69 @@ const FilterPage = () => {
 
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
-          <h2 className="text-lg font-semibold mb-4">Filter</h2>
+        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+            <Icon icon="stash:filter-light" fontSize={30} />
+            Filter
+          </h2>
+          <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
-              <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <Input onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Tahun & Bulan
               </label>
               <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Tanggal
               </label>
               <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
-                {categories.map((category) => (
+                {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{category.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
             {/* Garis */}
-            <div className="border-t border-black my-4"></div>
+            <div className="border-t border-black my-4 dark:border-white"></div>
             {/* Garis */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
               <ul className="mt-2 space-y-2">
                 {formatPicture.map((format) => (
                   <li key={format?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{format.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
+            <div className="border-t border-black dark:border-white my-4"></div>
+            <div className="text-center">
+              <a href="#" className="text-[#bb3523]">
+                <b>Reset Filter</b>
+              </a>
+            </div>
           </div>
         </div>
 
@@ -186,8 +241,8 @@ const FilterPage = () => {
               {imageData?.map((image: any) => (
                 <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
                   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                    <Link href={`/image/detail/${image?.slug}`} >
-                      <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
+                    <Link href={`/image/detail/${image?.slug}`}>
+                      <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                       <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                         {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
                         {image?.clickCount}{" "}
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index 8d00a23e..3dcafa08 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -54,10 +54,12 @@ const IndeksDetail = () => {
 
       <div className="w-full">
         {/* Comment */}
-        <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
-          <p className="flex items-start text-lg">Berikan Komentar</p>
-          <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
-          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
+            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <Textarea placeholder="Type your comments here." className="flex w-full" />
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+          </div>
         </div>
 
         {/* Konten Serupa */}
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx
index 1a7be29d..df2bdc31 100644
--- a/app/[locale]/(public)/schedule/page.tsx
+++ b/app/[locale]/(public)/schedule/page.tsx
@@ -318,7 +318,7 @@ const Schedule = () => {
   return (
     <>
       {/* Awal Komponen Kiri */}
-      <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-gray-50 dark:bg-slate-800">
+      <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
         <Popover>
           <PopoverTrigger asChild>
             <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
@@ -410,10 +410,14 @@ const Schedule = () => {
                     <thead className="text-md">
                       <tr className="h-full">
                         <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
-                        <th
-                          onClick={() => changePrevWeek()}
-                          className={`text-center cursor-pointer border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}
-                        >
+                        <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
+                          <a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
+                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
+                            </svg>
+                          </a>
+                        </th>
+                        <th className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
                           {/* <a className="cursor-pointer h-fit self-center bottom-0" >
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                               <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
@@ -441,7 +445,9 @@ const Schedule = () => {
                         </th>
                         <th
                           onClick={() => changeNextWeek()}
-                          className={`text-center border cursor-pointer border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                          className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""
+                          }`}
                         >
                           <div className="flex flex-col ">
                             <p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
@@ -453,19 +459,30 @@ const Schedule = () => {
                             </svg>
                           </a> */}
                         </th>
+                        <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
+                          <a onClick={() => changeNextWeek()} className="cursor-pointer">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
+                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
+                            </svg>
+                          </a>
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
                       {timeList.map((times) => (
                         <tr key={times.id}>
                           <th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th>
-                          <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[0])}</td>
+                          <td colSpan={2} className="p-3 border border-gray-100 dark:border-gray-700 ">
+                            {setItemSchedule(times.id, dateList[0])}
+                          </td>
                           <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td>
                           <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td>
                           <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td>
                           <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td>
                           <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[6])}</td>
+                          <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[6])}
+                          </td>
                         </tr>
                       ))}
                     </tbody>
@@ -523,11 +540,11 @@ const Schedule = () => {
             </Collapsible> */}
             <Accordion type="single" collapsible className="w-full">
               <AccordionItem value="item-1">
-                <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
-                {prevdayList?.map((list: any) => (
-                  <AccordionContent>
+                <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
+                {todayList?.map((list: any) => (
+                  <AccordionContent className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="iconamoon:clock-thin" />
@@ -548,11 +565,11 @@ const Schedule = () => {
               </AccordionItem>
 
               <AccordionItem value="item-2">
-                <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
-                {todayList?.map((list: any) => (
-                  <AccordionContent>
+                <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
+                {prevdayList?.map((list: any) => (
+                  <AccordionContent className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="iconamoon:clock-thin" />
@@ -575,9 +592,9 @@ const Schedule = () => {
               <AccordionItem value="item-3">
                 <AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
                 {nextdayList?.map((list: any) => (
-                  <AccordionContent>
+                  <AccordionContent className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="iconamoon:clock-thin" />
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index ad5742b5..32b952a4 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-
 import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
@@ -10,7 +9,6 @@ import NewContent from "@/components/landing-page/new-content";
 import { Link } from "@/i18n/routing";
 import { Textarea } from "@/components/ui/textarea";
 
-
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
   const [selectedTab, setSelectedTab] = useState("video");
@@ -40,7 +38,7 @@ const DetailVideo = () => {
 
   return (
     <>
-      <div className="min-h-screen px-4 md:px-24 py-4">
+      <div className="px-4 md:px-24 py-4">
         {/* Container Utama */}
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
@@ -49,10 +47,27 @@ const DetailVideo = () => {
               <VideoPlayer url={detailDataVideo?.files[0]?.url} />
               <div className="absolute top-4 left-4"></div>
             </div>
+
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp;
+                {detailDataVideo?.clickCount}
+              </p>
+              <p>Kreator: {detailDataVideo?.creatorName}</p>
+            </div>
+
+            {/* Keterangan */}
+            <div className="w-full">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-gray-300 rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4 h-fit">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -106,30 +121,15 @@ const DetailVideo = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp;
-            {detailDataVideo?.clickCount}
-          </p>
-          <p>Kreator: {detailDataVideo?.creatorName}</p>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
-        </div>
       </div>
       <div className="w-full mb-8">
         {/* Comment */}
-        <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
-          <p className="flex items-start text-lg">Berikan Komentar</p>
-          <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
-          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
+            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <Textarea placeholder="Type your comments here." className="flex w-full" />
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+          </div>
         </div>
 
         {/* Konten Serupa */}
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 5954131d..3e173a11 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -102,10 +102,12 @@ const FilterPage = () => {
     setTotalPage(data?.totalPages);
   };
 
+  
+
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
@@ -115,60 +117,70 @@ const FilterPage = () => {
       </div>
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
+        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <Reveal>
-            <h2 className="text-lg font-semibold mb-4">Filter</h2>
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+              <Icon icon="stash:filter-light" fontSize={30} />
+              Filter
+            </h2>
+            <div className="border-t border-black dark:border-white my-4"></div>
             <div className="space-y-6">
               <div>
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pencarian
                 </label>
                 <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
               </div>
 
               <div>
-                <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Tahun & Bulan
                 </label>
                 <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
               </div>
 
               <div>
-                <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Tanggal
                 </label>
                 <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
               </div>
 
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
                 <ul className="mt-2 space-y-2">
                   {categories.map((category) => (
                     <li key={category?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{category.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
                       </label>
                     </li>
                   ))}
                 </ul>
               </div>
               {/* Garis */}
-              <div className="border-t border-black my-4"></div>
+              <div className="border-t border-black dark:border-white my-4"></div>
               {/* Garis */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
                 <ul className="mt-2 space-y-2">
                   {formatPicture.map((format) => (
                     <li key={format?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{format.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                       </label>
                     </li>
                   ))}
                 </ul>
               </div>
+              <div className="border-t border-black dark:border-white my-4"></div>
+              <div className="text-center">
+                <a href="#" className="text-[#bb3523]">
+                  <b>Reset Filter</b>
+                </a>
+              </div>
             </div>
           </Reveal>
         </div>
@@ -189,15 +201,18 @@ const FilterPage = () => {
                 <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
                   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                     <Link href={`/video/detail/${video?.slug}`}>
-                    <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center rounded-lg" />
-                    <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                      {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
-                      {video?.clickCount}{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
-                        <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
-                      </svg>{" "}
-                    </div>
-                    <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                      <img src={video?.thumbnailLink} className=" h-60 object-cover items-center w-full justify-center rounded-lg" />
+                      <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                        {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                        {video?.clickCount}{" "}
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          <path
+                            fill="#f00"
+                            d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
+                          />
+                        </svg>{" "}
+                      </div>
+                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
                     </Link>
                   </CardContent>
                 </Card>
diff --git a/components/form/blog/blog--detail-form.tsx b/components/form/blog/blog--detail-form.tsx
index 6ed692d2..e875e29d 100644
--- a/components/form/blog/blog--detail-form.tsx
+++ b/components/form/blog/blog--detail-form.tsx
@@ -30,12 +30,13 @@ import {
   listEnableCategory,
 } from "@/service/content/content";
 import { getBlog, postBlog } from "@/service/blog/blog";
+import { Badge } from "@/components/ui/badge";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
+  narration: z
     .string()
     .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   categoryName: z.string().min(1, { message: "Kategori diperlukan" }),
@@ -49,11 +50,12 @@ type Category = {
 type Detail = {
   id: string;
   title: string;
-  description: string;
+  narration: string;
   slug: string;
   metadata: string;
   categoryName: string;
   thumbnailLink: string;
+  tags: string;
 };
 
 const initialCategories: Category[] = [
@@ -115,17 +117,6 @@ export default function FormBlogDetail() {
     resolver: zodResolver(taskSchema),
   });
 
-  // const handleKeyDown = (e: any) => {
-  //   const newTag = e.target.value.trim(); // Ambil nilai input
-  //   if (e.key === "Enter" && newTag) {
-  //     e.preventDefault(); // Hentikan submit form
-  //     if (!tags.includes(newTag)) {
-  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
-  //       setValue("tags", ""); // Kosongkan input
-  //     }
-  //   }
-  // };
-
   const handleRemoveTag = (index: any) => {
     setTags((prevTags) => prevTags.filter((_, i) => i !== index));
   };
@@ -162,7 +153,7 @@ export default function FormBlogDetail() {
     const requestData = {
       ...data,
       title: data.title,
-      description: data.description,
+      description: data.narration,
       categoryId: selectedTarget,
       slug: data.slug,
       metadata: data.meta,
@@ -244,19 +235,19 @@ export default function FormBlogDetail() {
                   <Label>Deskripsi</Label>
                   <Controller
                     control={control}
-                    name="description"
+                    name="narration"
                     render={({ field: { onChange, value } }) => (
                       <JoditEditor
                         ref={editor}
-                        value={detail.description}
+                        value={detail.narration}
                         onChange={onChange}
                         className="dark:text-black"
                       />
                     )}
                   />
-                  {errors.description?.message && (
+                  {errors.narration?.message && (
                     <p className="text-red-400 text-sm">
-                      {errors.description.message}
+                      {errors.narration.message}
                     </p>
                   )}
                 </div>
@@ -336,7 +327,7 @@ export default function FormBlogDetail() {
                   />
                 </Card>
               </div>
-              <div className="px-3 py-3">
+              <div className="px-3 py-3 mt-6">
                 <label
                   htmlFor="kategori"
                   className="block text-sm font-medium text-gray-700"
@@ -372,39 +363,18 @@ export default function FormBlogDetail() {
                 />
               </div>
               <div className="px-3 py-3">
-                <Label>Tags</Label>
-                {/* <Controller
-                control={control}
-                name="tags"
-                render={({ field }) => (
-                  <Input
-                    size="md"
-                    type="text"
-                    value={field.value}
-                    onChange={field.onChange}
-                    placeholder="Enter Title"
-                    onKeyDown={handleKeyDown}
-                  />
-                )}
-              /> */}
-                <div className="text-sm text-red-500">
-                  {tags.length === 0 && "Please add at least one tag."}
-                </div>
-                <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
-                  {tags.map((tag, index) => (
-                    <div
-                      key={index}
-                      className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
-                    >
-                      <span>{tag}</span>
-                      <button
-                        className="text-blue-600 hover:text-blue-800 focus:outline-none"
-                        onClick={() => handleRemoveTag(index)}
+                <div className="space-y-2">
+                  <Label>Tag</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {detail?.tags?.split(",").map((tag, index) => (
+                      <Badge
+                        key={index}
+                        className="border rounded-md  px-2 py-2"
                       >
-                        ×
-                      </button>
-                    </div>
-                  ))}
+                        {tag.trim()}
+                      </Badge>
+                    ))}
+                  </div>
                 </div>
               </div>
             </Card>
diff --git a/components/form/blog/blog-form.tsx b/components/form/blog/blog-form.tsx
index a35c7a7f..534aad02 100644
--- a/components/form/blog/blog-form.tsx
+++ b/components/form/blog/blog-form.tsx
@@ -29,16 +29,16 @@ import {
   getTagsBySubCategoryId,
   listEnableCategory,
 } from "@/service/content/content";
-import { postBlog } from "@/service/blog/blog";
+import { postBlog, uploadThumbnailBlog } from "@/service/blog/blog";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
+  narration: z
     .string()
     .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
-  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
 type Category = {
@@ -81,6 +81,8 @@ export default function FormBlog() {
   const [selectedCategory, setSelectedCategory] = useState<any>();
   const [tags, setTags] = useState<any[]>([]);
   const [isDraft, setIsDraft] = useState(false);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
 
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -115,14 +117,6 @@ export default function FormBlog() {
     setTags((prevTags) => prevTags.filter((_, i) => i !== index));
   };
 
-  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
-      const files = Array.from(event.target.files);
-      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
-      console.log("DATAFILE::", selectedFiles);
-    }
-  };
-
   const handleRemoveImage = (index: number) => {
     setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
   };
@@ -166,11 +160,11 @@ export default function FormBlog() {
     const requestData = {
       ...data,
       title: data.title,
-      description: data.description,
+      narration: data.narration,
       categoryId: selectedTarget,
       slug: data.slug,
       metadata: data.meta,
-      // tags: data.tags,
+      tags: data.tags,
       isDraft,
     };
 
@@ -178,15 +172,25 @@ export default function FormBlog() {
     console.log("Form Data Submitted:", requestData);
     console.log("response", response);
 
-    MySwal.fire({
-      title: "Sukses",
-      text: "Data berhasil disimpan.",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then(() => {
-      router.push("/en/contributor/blog");
-    });
+    if (response.error) {
+      MySwal.fire("Error", response.message, "error");
+      return;
+    }
+
+    const blogId = response.data.data.id;
+    if (blogId && thumbnail) {
+      const formMedia = new FormData();
+      formMedia.append("file", thumbnail);
+
+      const responseThumbnail = await uploadThumbnailBlog(blogId, formMedia);
+
+      if (responseThumbnail.error) {
+        MySwal.fire("Error", responseThumbnail.message, "error");
+        return;
+      }
+    }
+
+    MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
   };
 
   const onSubmit = (data: TaskSchema) => {
@@ -195,9 +199,8 @@ export default function FormBlog() {
       text: "Apakah Anda yakin ingin menyimpan data ini?",
       icon: "warning",
       showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
       confirmButtonText: "Simpan",
+      cancelButtonText: "Batal",
     }).then((result) => {
       if (result.isConfirmed) {
         save(data);
@@ -205,6 +208,17 @@ export default function FormBlog() {
     });
   };
 
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
   const handlePublish = () => {
     setIsDraft(false);
   };
@@ -245,7 +259,7 @@ export default function FormBlog() {
                 <Label>Deskripsi</Label>
                 <Controller
                   control={control}
-                  name="description"
+                  name="narration"
                   render={({ field: { onChange, value } }) => (
                     <JoditEditor
                       ref={editor}
@@ -255,9 +269,9 @@ export default function FormBlog() {
                     />
                   )}
                 />
-                {errors.description?.message && (
+                {errors.narration?.message && (
                   <p className="text-red-400 text-sm">
-                    {errors.description.message}
+                    {errors.narration.message}
                   </p>
                 )}
               </div>
@@ -311,22 +325,20 @@ export default function FormBlog() {
           </div>
         </Card>
         <div className="w-4/12">
-          <Card className=" h-[500px]">
+          <Card className=" h-[550px]">
             <div className="px-3 py-3">
               <Label htmlFor="fileInput">Gambar Utama</Label>
-              <Input
-                id="fileInput"
-                type="file"
-                // onChange={(e) => {
-                //   const file = e.target.files[0];
-                //   if (file) {
-                //     console.log("Selected File:", file);
-                //     // Tambahkan logika jika diperlukan, misalnya upload file ke server
-                //   }
-                // }}
-                className=""
-              />
+              <Input id="fileInput" type="file" onChange={handleImageChange} />
             </div>
+            {preview && (
+              <div className="mt-3 px-3">
+                <img
+                  src={preview}
+                  alt="Thumbnail Preview"
+                  className="w-full h-auto rounded"
+                />
+              </div>
+            )}
             <div className="px-3 py-3">
               <label
                 htmlFor="kategori"
@@ -355,7 +367,7 @@ export default function FormBlog() {
             </div>
             <div className="px-3 py-3">
               <Label>Tags</Label>
-              {/* <Controller
+              <Controller
                 control={control}
                 name="tags"
                 render={({ field }) => (
@@ -365,11 +377,10 @@ export default function FormBlog() {
                     value={field.value}
                     onChange={field.onChange}
                     placeholder="Enter Title"
-                    onKeyDown={handleKeyDown}
                   />
                 )}
-              /> */}
-              <div className="text-sm text-red-500">
+              />
+              {/* <div className="text-sm text-red-500">
                 {tags.length === 0 && "Please add at least one tag."}
               </div>
               <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
@@ -387,7 +398,7 @@ export default function FormBlog() {
                     </button>
                   </div>
                 ))}
-              </div>
+              </div> */}
             </div>
           </Card>
           <div className="flex flex-row justify-end gap-3">
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
new file mode 100644
index 00000000..204fcedb
--- /dev/null
+++ b/components/form/content/image-detail-form.tsx
@@ -0,0 +1,427 @@
+"use client";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import { createTask } from "@/config/api";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  category: {
+    id: number;
+    name: string;
+  };
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+export default function FormImageDetail() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "1";
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  const handleRemoveTag = (index: any) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
+      console.log("DATAFILE::", selectedFiles);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const handleCheckboxChange = (id: number) => {
+    setSelectedPublishers((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category.data.data.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response.data?.data;
+
+        setDetail(details);
+
+        if (details.publishedForObject) {
+          const publisherIds = details.publishedForObject.map(
+            (obj: any) => obj.id
+          );
+          setSelectedPublishers(publisherIds);
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const save = async (data: ImageSchema) => {
+    const requestData = {
+      ...data,
+      title: data.title,
+      description: data.description,
+      htmlDescription: data.description,
+      fileTypeId,
+      categoryId: selectedTarget,
+      subCategoryId: selectedTarget,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: "6",
+      creatorName: data.creatorName,
+      tags: "siap",
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/content/image");
+    });
+  };
+
+  const onSubmit = (data: ImageSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">Form Konten Foto</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>Judul</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.title}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <div className="py-3 w-full">
+                    <Label>Kategori</Label>
+                    <Select
+                      value={detail?.category.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.name}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3">
+                  <Label>Deskripsi</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <JoditEditor
+                        ref={editor}
+                        value={detail?.description}
+                        onChange={onChange}
+                        className="dark:text-black"
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>Kreator</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.categoryName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="mt-3 px-3">
+                <Label>Pratinjau Gambar Utama</Label>
+                <Card className="mt-2">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="w-full h-auto rounded"
+                  />
+                </Card>
+              </div>
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>Tag</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {detail?.tags?.split(",").map((tag, index) => (
+                      <Badge
+                        key={index}
+                        className="border rounded-md  px-2 py-2"
+                      >
+                        {tag.trim()}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6">
+                  <Label>Target Publish</Label>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="5"
+                      checked={selectedPublishers.includes(5)}
+                      onChange={() => handleCheckboxChange(5)}
+                    />
+                    <Label htmlFor="5">UMUM</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="6"
+                      checked={selectedPublishers.includes(6)}
+                      onChange={() => handleCheckboxChange(6)}
+                    />
+                    <Label htmlFor="6">JOURNALIS</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="7"
+                      checked={selectedPublishers.includes(7)}
+                      onChange={() => handleCheckboxChange(7)}
+                    />
+                    <Label htmlFor="7">POLRI</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="8"
+                      checked={selectedPublishers.includes(8)}
+                      onChange={() => handleCheckboxChange(8)}
+                    />
+                    <Label htmlFor="8">KSP</Label>
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">Kotak Saran (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>Keterangan:</p>
+                {/* <p>{detail?.status}</p> */}
+              </div>
+            </Card>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index ec996b60..4d94d1a6 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -30,7 +30,7 @@ import {
   listEnableCategory,
 } from "@/service/content/content";
 
-const taskSchema = z.object({
+const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   description: z
     .string()
@@ -48,7 +48,7 @@ export default function FormImage() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
   const editor = useRef(null);
-  type TaskSchema = z.infer<typeof taskSchema>;
+  type ImageSchema = z.infer<typeof imageSchema>;
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
@@ -74,8 +74,8 @@ export default function FormImage() {
     handleSubmit,
     setValue,
     formState: { errors },
-  } = useForm<TaskSchema>({
-    resolver: zodResolver(taskSchema),
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
   });
 
   // const handleKeyDown = (e: any) => {
@@ -140,7 +140,7 @@ export default function FormImage() {
     }
   };
 
-  const save = async (data: TaskSchema) => {
+  const save = async (data: ImageSchema) => {
     const requestData = {
       ...data,
       title: data.title,
@@ -151,7 +151,7 @@ export default function FormImage() {
       subCategoryId: selectedTarget,
       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
       statusId: "1",
-      publishedFor: 1,
+      publishedFor: "6",
       creatorName: data.creatorName,
       tags: "siap",
       isYoutube: false,
@@ -168,11 +168,11 @@ export default function FormImage() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/contributor/content/image");
+      router.push("/en/contributor/content/image");
     });
   };
 
-  const onSubmit = (data: TaskSchema) => {
+  const onSubmit = (data: ImageSchema) => {
     MySwal.fire({
       title: "Simpan Data",
       text: "Apakah Anda yakin ingin menyimpan data ini?",
@@ -220,9 +220,9 @@ export default function FormImage() {
                   <Label>Kategori</Label>
                   <Select
                     value={selectedTarget} // Ensure selectedTarget is updated correctly
-                    onValueChange={(value) => {
-                      console.log("Selected Category ID:", value);
-                      setSelectedTarget(value);
+                    onValueChange={(id) => {
+                      console.log("Selected Category ID:", id);
+                      setSelectedTarget(id);
                     }}
                   >
                     <SelectTrigger size="md">
diff --git a/components/form/contest/contest-detail-form.tsx b/components/form/contest/contest-detail-form.tsx
index bbe69784..345a23ed 100644
--- a/components/form/contest/contest-detail-form.tsx
+++ b/components/form/contest/contest-detail-form.tsx
@@ -55,7 +55,7 @@ export type taskDetail = {
     id: number;
     name: string;
   };
-
+  createdAt: string;
   targetOutput: string;
   targetParticipantTopLevel: string;
   description: string;
@@ -120,14 +120,10 @@ export default function FormContestDetail() {
         const details = response.data?.data;
 
         setDetail(details);
-        // if (details?.createdAt) {
-        //   // Memisahkan string duration menjadi start dan end date
-        //   const [startDate, endDate] = details.createdAt.split(" - ");
-        //   setDate({
-        //     from: parseISO(startDate),
-        //     to: parseISO(endDate),
-        //   });
-        // }
+        if (details?.createdAt) {
+          const parsedDate = parseISO(details.createdAt);
+          setDate({ from: parsedDate, to: parsedDate });
+        }
       }
     }
     initState();
@@ -278,6 +274,7 @@ export default function FormContestDetail() {
                 <Popover>
                   <PopoverTrigger asChild>
                     <Button
+                      value={detail?.createdAt}
                       id="date"
                       variant={"outline"}
                       className={cn(
@@ -331,7 +328,7 @@ export default function FormContestDetail() {
                   ))}
                 </div>
               </div>
-              <div className="flex flex-col mt-5">
+              <div className="flex flex-col mt-7">
                 <Label>Pelaksana Tugas</Label>
                 <div className="flex flex-row mt-2 gap-2">
                   {Object.keys(unitSelection).map((key) => (
@@ -352,8 +349,7 @@ export default function FormContestDetail() {
                   ))}
                 </div>
               </div>
-
-              <div className="mt-5">
+              <div className="mt-7">
                 <Label>Narasi Penugasan</Label>
                 <Controller
                   control={control}
@@ -375,12 +371,11 @@ export default function FormContestDetail() {
               </div>
             </div>
 
-            {/* Submit Button */}
-            <div className="mt-4">
+            {/* <div className="mt-4">
               <Button type="submit" color="primary">
                 Submit
               </Button>
-            </div>
+            </div> */}
           </form>
         ) : (
           ""
diff --git a/components/form/planning/mediahub-publish.tsx b/components/form/planning/mediahub-publish.tsx
index 49060fa6..11ed447f 100644
--- a/components/form/planning/mediahub-publish.tsx
+++ b/components/form/planning/mediahub-publish.tsx
@@ -20,16 +20,27 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import JoditEditor from "jodit-react";
-import { createTask } from "@/service/task";
+import { createTask, getUserLevelForAssignments } from "@/service/task";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
 import { id } from "date-fns/locale";
-import { getPlanningById } from "@/service/planning/planning";
+import { getPlanningById, publishPlanning } from "@/service/planning/planning";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { AlertDialogHeader } from "@/components/ui/alert-dialog";
+import { Description } from "@radix-ui/react-toast";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  naration: z.string().min(2, {
+  description: z.string().min(2, {
     message: "Narasi Penugasan harus lebih dari 2 karakter.",
   }),
 });
@@ -37,8 +48,10 @@ const taskSchema = z.object({
 export type mediahubDetail = {
   id: number;
   title: string;
+  name: string;
   fileTypeOutput: string;
   assignedToTopLevel: string;
+  assignedToLevel: string;
   assignmentType: {
     id: number;
     name: string;
@@ -70,6 +83,10 @@ export default function PublishMediahub() {
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [detail, setDetail] = useState<mediahubDetail>();
   const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -93,6 +110,29 @@ export default function PublishMediahub() {
 
     setPlatformTypeVisible(selectedValue === 2);
   };
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
 
   useEffect(() => {
     async function initState() {
@@ -102,7 +142,14 @@ export default function PublishMediahub() {
 
         setDetail(details);
         if (details?.date) {
-          setStartDate(new Date(details.date)); // Konversi string tanggal ke objek Date
+          setStartDate(new Date(details.date));
+        }
+
+        if (details?.assignedToLevel) {
+          const levels = new Set(
+            details.assignedToLevel.split(",").map(Number)
+          );
+          setCheckedLevels(levels);
         }
       }
     }
@@ -111,7 +158,7 @@ export default function PublishMediahub() {
 
   useEffect(() => {
     if (detail?.fileTypeOutput) {
-      const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
+      const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number));
       setTaskOutput({
         all: outputSet.has(0),
         video: outputSet.has(2),
@@ -126,7 +173,7 @@ export default function PublishMediahub() {
     if (detail?.assignedToTopLevel) {
       const outputSet = new Set(
         detail.assignedToTopLevel.split(",").map(Number)
-      ); // Membagi string ke dalam array dan mengonversi ke nomor
+      );
       setUnitSelection({
         allUnit: outputSet.has(0),
         mabes: outputSet.has(1),
@@ -136,6 +183,22 @@ export default function PublishMediahub() {
     }
   }, [detail?.fileTypeOutput]);
 
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
       all: "1",
@@ -145,31 +208,61 @@ export default function PublishMediahub() {
       text: "5",
     };
 
-    const selectedOutputs = Object.keys(taskOutput)
-      .filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
-      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
       .join(",");
 
-    const requestData = {
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput])
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
+      .join(",");
+
+    const requestData: {
+      id?: number;
+      title: string;
+      target: string;
+      assignedToLevel: any;
+      assignmentPurpose: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      description: string;
+      platformType: string | null;
+      date: any;
+      assignmentMainTypeId: number;
+      planningTypeId: number;
+      time: string;
+    } = {
       ...data,
       // assignmentType,
       // assignmentCategory,
       target: selectedTarget,
-      unitSelection,
-      assignedToRole: "3",
-      taskType: taskType,
-      broadcastType: broadcastType,
-      assignmentMainTypeId: mainType,
-      assignmentPurpose: "1",
+      assignedToLevel: handlePoldaPolresChange(),
+      assignmentPurpose: assignmentPurposeString,
       assignmentTypeId: type,
       fileTypeOutput: selectedOutputs,
-      id: null,
-      narration: data.naration,
+      description: data.description,
       platformType: "",
       title: data.title,
+      date: startDate,
+      planningTypeId: 1,
+      time: "1",
+      assignmentMainTypeId: 1,
     };
 
-    const response = await createTask(requestData);
+    if (id) {
+      requestData.id = parseInt(id, 10); // Ensure id is a number
+    }
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await publishPlanning(requestData);
 
     console.log("Form Data Submitted:", requestData);
     console.log("response", response);
@@ -181,7 +274,7 @@ export default function PublishMediahub() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/task");
+      router.push("/en/contributor/planning/mediahub");
     });
   };
 
@@ -201,6 +294,13 @@ export default function PublishMediahub() {
     });
   };
 
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
   return (
     <Card>
       <div className="px-6 py-6">
@@ -218,7 +318,7 @@ export default function PublishMediahub() {
                     <Input
                       size="md"
                       type="text"
-                      value={detail?.title}
+                      defaultValue={detail?.title}
                       onChange={field.onChange}
                       placeholder="Enter Title"
                     />
@@ -228,7 +328,7 @@ export default function PublishMediahub() {
                   <p className="text-red-400 text-sm">{errors.title.message}</p>
                 )}
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Output Tugas</Label>
                 <div className="flex flex-wrap gap-3 mt-1">
                   {Object.keys(taskOutput).map((key) => (
@@ -247,10 +347,12 @@ export default function PublishMediahub() {
                   ))}
                 </div>
               </div>
-              <div className="flex flex-row items-center">
-                <div className="mt-5">
-                  <Label>Pelaksana Tugas</Label>
-                  <div className="flex flex-wrap mt-1 gap-2">
+              <div className="mt-6">
+                <Label>Pelaksana Tugas</Label>
+              </div>
+              <div className="flex flex-row items-center gap-3">
+                <div className="">
+                  <div className="flex flex-wrap gap-2">
                     {Object.keys(unitSelection).map((key) => (
                       <div className="flex items-center gap-2" key={key}>
                         <Checkbox
@@ -269,12 +371,91 @@ export default function PublishMediahub() {
                     ))}
                   </div>
                 </div>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button variant="soft" size="sm" color="primary">
+                      [Kustom]
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                    <DialogHeader>
+                      <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
+                    </DialogHeader>
+                    <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                      {listDest.map((polda: any) => (
+                        <div key={polda.id} className="border p-2">
+                          <Label className="flex items-center">
+                            <Checkbox
+                              checked={checkedLevels.has(polda.id)}
+                              onCheckedChange={() =>
+                                handleCheckboxChange(polda.id)
+                              }
+                              className="mr-3"
+                            />
+                            {polda.name}
+                            <button
+                              onClick={() => toggleExpand(polda.id)}
+                              className="ml-2 focus:outline-none"
+                            >
+                              {expandedPolda[polda.id] ? (
+                                <ChevronUp size={16} />
+                              ) : (
+                                <ChevronDown size={16} />
+                              )}
+                            </button>
+                          </Label>
+                          {expandedPolda[polda.id] && (
+                            <div className="ml-6 mt-2">
+                              <Label className="block">
+                                <Checkbox
+                                  checked={polda?.subDestination?.every(
+                                    (polres: any) =>
+                                      checkedLevels.has(polres.id)
+                                  )}
+                                  onCheckedChange={(isChecked) => {
+                                    const updatedLevels = new Set(
+                                      checkedLevels
+                                    );
+                                    polda?.subDestination?.forEach(
+                                      (polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
+                                        }
+                                      }
+                                    );
+                                    setCheckedLevels(updatedLevels);
+                                  }}
+                                  className="mr-2"
+                                />
+                                Pilih Semua Polres
+                              </Label>
+                              {polda?.subDestination?.map((polres: any) => (
+                                <Label key={polres.id} className="block mt-1">
+                                  <Checkbox
+                                    checked={checkedLevels.has(polres.id)}
+                                    onCheckedChange={() =>
+                                      handleCheckboxChange(polres.id)
+                                    }
+                                    className="mr-2"
+                                  />
+                                  {polres.name}
+                                </Label>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </DialogContent>
+                </Dialog>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Jenis Penugasan</Label>
                 <RadioGroup
-                  value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
-                  onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
+                  value={detail?.assignmentType?.id.toString()}
+                  onValueChange={(value) => setType(value)}
                   className="flex flex-wrap gap-3"
                 >
                   <div className="flex items-center gap-2">
@@ -291,12 +472,12 @@ export default function PublishMediahub() {
                   </div>
                 </RadioGroup>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <div className="flex flex-col">
                   <Label>Date</Label>
                   <div>
                     <Button
-                      value={detail.date}
+                      defaultValue={detail?.date}
                       variant="outline"
                       size="md"
                       className={cn(
@@ -314,11 +495,11 @@ export default function PublishMediahub() {
                   </div>
                 </div>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Narasi Penugasan</Label>
                 <Controller
                   control={control}
-                  name="naration"
+                  name="description"
                   render={({ field: { onChange, value } }) => (
                     <JoditEditor
                       ref={editor}
@@ -328,9 +509,9 @@ export default function PublishMediahub() {
                     />
                   )}
                 />
-                {errors.naration?.message && (
+                {errors.description?.message && (
                   <p className="text-red-400 text-sm">
-                    {errors.naration.message}
+                    {errors.description.message}
                   </p>
                 )}
               </div>
diff --git a/components/form/planning/medsos-publish.tsx b/components/form/planning/medsos-publish.tsx
index 5124f4a4..12381adb 100644
--- a/components/form/planning/medsos-publish.tsx
+++ b/components/form/planning/medsos-publish.tsx
@@ -20,16 +20,23 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import JoditEditor from "jodit-react";
-import { createTask } from "@/service/task";
+import { createTask, getUserLevelForAssignments } from "@/service/task";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
 import { id } from "date-fns/locale";
-import { getPlanningById } from "@/service/planning/planning";
+import { getPlanningById, publishPlanning } from "@/service/planning/planning";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  naration: z.string().min(2, {
+  description: z.string().min(2, {
     message: "Narasi Penugasan harus lebih dari 2 karakter.",
   }),
 });
@@ -70,6 +77,10 @@ export default function PublishMedsos() {
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [detail, setDetail] = useState<medsosDetail>();
   const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -94,6 +105,30 @@ export default function PublishMedsos() {
     setPlatformTypeVisible(selectedValue === 2);
   };
 
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
   useEffect(() => {
     async function initState() {
       if (id) {
@@ -104,6 +139,13 @@ export default function PublishMedsos() {
         if (details?.date) {
           setStartDate(new Date(details.date)); // Konversi string tanggal ke objek Date
         }
+
+        if (details?.assignedToLevel) {
+          const levels = new Set(
+            details.assignedToLevel.split(",").map(Number)
+          );
+          setCheckedLevels(levels);
+        }
       }
     }
     initState();
@@ -136,6 +178,22 @@ export default function PublishMedsos() {
     }
   }, [detail?.fileTypeOutput]);
 
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
       all: "1",
@@ -145,31 +203,59 @@ export default function PublishMedsos() {
       text: "5",
     };
 
-    const selectedOutputs = Object.keys(taskOutput)
-      .filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
-      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
       .join(",");
 
-    const requestData = {
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput])
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
+      .join(",");
+
+    const requestData: {
+      id?: number;
+      title: string;
+      target: string;
+      assignedToLevel: any;
+      assignmentPurpose: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      description: string;
+      platformType: string | null;
+      date: any;
+      assignmentMainTypeId: number;
+      planningTypeId: number;
+    } = {
       ...data,
       // assignmentType,
       // assignmentCategory,
       target: selectedTarget,
-      unitSelection,
-      assignedToRole: "3",
-      taskType: taskType,
-      broadcastType: broadcastType,
-      assignmentMainTypeId: mainType,
-      assignmentPurpose: "1",
+      assignedToLevel: handlePoldaPolresChange(),
+      assignmentPurpose: assignmentPurposeString,
       assignmentTypeId: type,
       fileTypeOutput: selectedOutputs,
-      id: null,
-      narration: data.naration,
+      description: data.description,
       platformType: "",
       title: data.title,
+      date: startDate,
+      planningTypeId: 2,
+      assignmentMainTypeId: 1,
     };
 
-    const response = await createTask(requestData);
+    if (id) {
+      requestData.id = parseInt(id, 10); // Ensure id is a number
+    }
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await publishPlanning(requestData);
 
     console.log("Form Data Submitted:", requestData);
     console.log("response", response);
@@ -181,7 +267,7 @@ export default function PublishMedsos() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/task");
+      router.push("/en/contributor/planning/medsos-mediahub");
     });
   };
 
@@ -201,6 +287,13 @@ export default function PublishMedsos() {
     });
   };
 
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
   return (
     <Card>
       <div className="px-6 py-6">
@@ -218,7 +311,7 @@ export default function PublishMedsos() {
                     <Input
                       size="md"
                       type="text"
-                      value={detail?.title}
+                      defaultValue={detail?.title}
                       onChange={field.onChange}
                       placeholder="Enter Title"
                     />
@@ -228,7 +321,7 @@ export default function PublishMedsos() {
                   <p className="text-red-400 text-sm">{errors.title.message}</p>
                 )}
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Output Tugas</Label>
                 <div className="flex flex-wrap gap-3 mt-1">
                   {Object.keys(taskOutput).map((key) => (
@@ -247,10 +340,12 @@ export default function PublishMedsos() {
                   ))}
                 </div>
               </div>
-              <div className="flex flex-row items-center">
-                <div className="mt-5">
-                  <Label>Pelaksana Tugas</Label>
-                  <div className="flex flex-wrap mt-1 gap-2">
+              <div className="mt-6">
+                <Label>Pelaksana Tugas</Label>
+              </div>
+              <div className="flex flex-row items-center gap-3">
+                <div>
+                  <div className="flex flex-wrap gap-2">
                     {Object.keys(unitSelection).map((key) => (
                       <div className="flex items-center gap-2" key={key}>
                         <Checkbox
@@ -269,8 +364,87 @@ export default function PublishMedsos() {
                     ))}
                   </div>
                 </div>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button variant="soft" size="sm" color="primary">
+                      [Kustom]
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                    <DialogHeader>
+                      <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
+                    </DialogHeader>
+                    <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                      {listDest.map((polda: any) => (
+                        <div key={polda.id} className="border p-2">
+                          <Label className="flex items-center">
+                            <Checkbox
+                              checked={checkedLevels.has(polda.id)}
+                              onCheckedChange={() =>
+                                handleCheckboxChange(polda.id)
+                              }
+                              className="mr-3"
+                            />
+                            {polda.name}
+                            <button
+                              onClick={() => toggleExpand(polda.id)}
+                              className="ml-2 focus:outline-none"
+                            >
+                              {expandedPolda[polda.id] ? (
+                                <ChevronUp size={16} />
+                              ) : (
+                                <ChevronDown size={16} />
+                              )}
+                            </button>
+                          </Label>
+                          {expandedPolda[polda.id] && (
+                            <div className="ml-6 mt-2">
+                              <Label className="block">
+                                <Checkbox
+                                  checked={polda?.subDestination?.every(
+                                    (polres: any) =>
+                                      checkedLevels.has(polres.id)
+                                  )}
+                                  onCheckedChange={(isChecked) => {
+                                    const updatedLevels = new Set(
+                                      checkedLevels
+                                    );
+                                    polda?.subDestination?.forEach(
+                                      (polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
+                                        }
+                                      }
+                                    );
+                                    setCheckedLevels(updatedLevels);
+                                  }}
+                                  className="mr-2"
+                                />
+                                Pilih Semua Polres
+                              </Label>
+                              {polda?.subDestination?.map((polres: any) => (
+                                <Label key={polres.id} className="block mt-1">
+                                  <Checkbox
+                                    checked={checkedLevels.has(polres.id)}
+                                    onCheckedChange={() =>
+                                      handleCheckboxChange(polres.id)
+                                    }
+                                    className="mr-2"
+                                  />
+                                  {polres.name}
+                                </Label>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </DialogContent>
+                </Dialog>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Jenis Penugasan</Label>
                 <RadioGroup
                   value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
@@ -291,7 +465,7 @@ export default function PublishMedsos() {
                   </div>
                 </RadioGroup>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <div className="flex flex-col">
                   <Label>Date</Label>
                   <div>
@@ -314,11 +488,11 @@ export default function PublishMedsos() {
                   </div>
                 </div>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Narasi Penugasan</Label>
                 <Controller
                   control={control}
-                  name="naration"
+                  name="description"
                   render={({ field: { onChange, value } }) => (
                     <JoditEditor
                       ref={editor}
@@ -328,9 +502,9 @@ export default function PublishMedsos() {
                     />
                   )}
                 />
-                {errors.naration?.message && (
+                {errors.description?.message && (
                   <p className="text-red-400 text-sm">
-                    {errors.naration.message}
+                    {errors.description.message}
                   </p>
                 )}
               </div>
diff --git a/components/form/schedule/event-detail-form.tsx b/components/form/schedule/event-detail-form.tsx
index 57d9c072..22bec2c8 100644
--- a/components/form/schedule/event-detail-form.tsx
+++ b/components/form/schedule/event-detail-form.tsx
@@ -128,7 +128,7 @@ export default function FormEventDetail() {
                 )}
               </div>
               <div className="flex flex-row items-center">
-                <div className="mt-5">
+                <div className="mt-6">
                   <Label>Live Streaming</Label>
                   <div className="flex items-center gap-3">
                     <p>Aktifkan fitur live streaming</p>
@@ -167,7 +167,7 @@ export default function FormEventDetail() {
                 </div>
               )}
 
-              <div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
+              <div className="flex flex-col lg:flex-row mt-6 items-start lg:items-center justify-between">
                 <div className="flex flex-col">
                   <Label className="mr-3 mb-1">Tanggal</Label>
                   <Popover>
@@ -229,7 +229,7 @@ export default function FormEventDetail() {
                   </div>
                 </div>
               </div>
-              <div>
+              <div className="mt-6">
                 {/* Kirim setValue ke MapHome */}
                 <MapHome
                   draggable
@@ -253,7 +253,9 @@ export default function FormEventDetail() {
                   {errors.location?.message}
                 </div>
               </div>
-              <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
+              <p className="text-sm my-2 font-semibold mt-6">
+                DI SAMPAIKAN OLEH
+              </p>
               <div className="flex flex-col ">
                 <div className="mt-1">
                   <Label>Nama Pangkat</Label>
diff --git a/components/form/schedule/pers-release--detail-form.tsx b/components/form/schedule/pers-release--detail-form.tsx
index ce13efe8..440bb27c 100644
--- a/components/form/schedule/pers-release--detail-form.tsx
+++ b/components/form/schedule/pers-release--detail-form.tsx
@@ -136,7 +136,7 @@ export default function FormDetailPressRillis() {
                 )}
               </div>
               <div className="flex flex-row items-center">
-                <div className="mt-5">
+                <div className="mt-6">
                   <Label>Live Streaming</Label>
                   <div className="flex items-center gap-3">
                     <p>Aktifkan fitur live streaming</p>
@@ -175,7 +175,7 @@ export default function FormDetailPressRillis() {
                 </div>
               )}
 
-              <div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
+              <div className="flex flex-col lg:flex-row mt-6 items-start lg:items-center justify-between">
                 <div className="flex flex-col">
                   <Label className="mr-3 mb-1">Tanggal</Label>
                   <Popover>
@@ -237,7 +237,7 @@ export default function FormDetailPressRillis() {
                   </div>
                 </div>
               </div>
-              <div>
+              <div className="mt-6">
                 {/* Kirim setValue ke MapHome */}
                 <MapHome
                   draggable
@@ -261,7 +261,7 @@ export default function FormDetailPressRillis() {
                   {errors.location?.message}
                 </div>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Invitation</Label>
                 <Select onValueChange={setSelectedTarget}>
                   <SelectTrigger size="md">
@@ -278,7 +278,9 @@ export default function FormDetailPressRillis() {
                   </SelectContent>
                 </Select>
               </div>
-              <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
+              <p className="text-sm my-2 font-semibold mt-6">
+                DI SAMPAIKAN OLEH
+              </p>
               <div className="flex flex-col ">
                 <div className="mt-1">
                   <Label>Nama Pangkat</Label>
diff --git a/components/form/schedule/press-conference-detail-form.tsx b/components/form/schedule/press-conference-detail-form.tsx
index b1e08ba5..a86d35ed 100644
--- a/components/form/schedule/press-conference-detail-form.tsx
+++ b/components/form/schedule/press-conference-detail-form.tsx
@@ -128,7 +128,7 @@ export default function FormDetailPressConference() {
                 )}
               </div>
               <div className="flex flex-row items-center">
-                <div className="mt-5">
+                <div className="mt-6">
                   <Label>Live Streaming</Label>
                   <div className="flex items-center gap-3">
                     <p>Aktifkan fitur live streaming</p>
@@ -167,7 +167,7 @@ export default function FormDetailPressConference() {
                 </div>
               )}
 
-              <div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
+              <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mt-6">
                 <div className="flex flex-col">
                   <Label className="mr-3 mb-1">Tanggal</Label>
                   <Popover>
@@ -229,7 +229,7 @@ export default function FormDetailPressConference() {
                   </div>
                 </div>
               </div>
-              <div>
+              <div className="mt-6">
                 {/* Kirim setValue ke MapHome */}
                 <MapHome
                   draggable
@@ -253,7 +253,9 @@ export default function FormDetailPressConference() {
                   {errors.location?.message}
                 </div>
               </div>
-              <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
+              <p className="text-sm my-2 font-semiboldc mt-6">
+                DI SAMPAIKAN OLEH
+              </p>
               <div className="flex flex-col ">
                 <div className="mt-1">
                   <Label>Nama Pangkat</Label>
diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 58e644e0..f3279960 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -20,9 +20,22 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import JoditEditor from "jodit-react";
-import { createTask, getTask } from "@/service/task";
+import {
+  createTask,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 const taskSchema = z.object({
+  uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
   title: z.string().min(1, { message: "Judul diperlukan" }),
   naration: z.string().min(2, {
     message: "Narasi Penugasan harus lebih dari 2 karakter.",
@@ -31,8 +44,10 @@ const taskSchema = z.object({
 
 export type taskDetail = {
   id: number;
+  uniqueCode: string;
   title: string;
   fileTypeOutput: string;
+  assignedToRole: string;
   assignedToTopLevel: string;
   assignmentType: {
     id: number;
@@ -74,6 +89,10 @@ export default function FormTaskDetail() {
   const [selectedTarget, setSelectedTarget] = useState("all");
   const [detail, setDetail] = useState<taskDetail>();
   const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -98,6 +117,30 @@ export default function FormTaskDetail() {
   //   setPlatformTypeVisible(selectedValue === 2);
   // };
 
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
   useEffect(() => {
     async function initState() {
       if (id) {
@@ -105,6 +148,13 @@ export default function FormTaskDetail() {
         const details = response.data?.data;
 
         setDetail(details);
+
+        if (details?.assignedToLevel) {
+          const levels = new Set(
+            details.assignedToLevel.split(",").map(Number)
+          );
+          setCheckedLevels(levels);
+        }
       }
     }
     initState();
@@ -208,6 +258,25 @@ export default function FormTaskDetail() {
     });
   };
 
+  const handleCheckboxChange = (levelId: any) => {
+    setCheckedLevels((prev: any) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
   return (
     <Card>
       <div className="px-6 py-6">
@@ -215,8 +284,24 @@ export default function FormTaskDetail() {
         {detail !== undefined ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
-              {/* Input Title */}
               <div className="space-y-2">
+                <Label>Kode Unik</Label>
+                <Controller
+                  control={control}
+                  name="uniqueCode"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={detail?.uniqueCode}
+                      onChange={field.onChange}
+                      placeholder="Enter uniqueCode"
+                      readOnly
+                    />
+                  )}
+                />
+              </div>
+              <div className="space-y-2 mt-6">
                 <Label>Judul</Label>
                 <Controller
                   control={control}
@@ -236,20 +321,23 @@ export default function FormTaskDetail() {
                 )}
               </div>
               <div className="flex flex-row items-center">
-                <div className="mt-5">
+                <div className="mt-6">
                   <Label>Tujuan Pemilihan Tugas</Label>
-                  <Select onValueChange={setSelectedTarget}>
+                  <Select
+                    onValueChange={setSelectedTarget}
+                    value={detail.assignedToRole}
+                  >
                     <SelectTrigger size="md">
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="all">Semua Pengguna</SelectItem>
-                      <SelectItem value="contributor">Kontributor</SelectItem>
-                      <SelectItem value="approver">Approver</SelectItem>
+                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
+                      <SelectItem value="4">Kontributor</SelectItem>
+                      <SelectItem value="3">Approver</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="flex flex-wrap gap-3 mt-5 pt-5 ml-3">
+                <div className="flex flex-wrap gap-3 mt-6 pt-5 ml-3">
                   {Object.keys(unitSelection).map((key) => (
                     <div className="flex items-center gap-2" key={key}>
                       <Checkbox
@@ -267,8 +355,91 @@ export default function FormTaskDetail() {
                     </div>
                   ))}
                 </div>
+                <div className="mt-6 pt-5 pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [Kustom]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Tipe Penugasan</Label>
                 <RadioGroup
                   value={detail.assignmentMainType.id.toString()} // State yang dipetakan ke value RadioGroup
@@ -283,7 +454,7 @@ export default function FormTaskDetail() {
                   <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
                 </RadioGroup>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Jenis Tugas </Label>
                 <RadioGroup
                   value={detail.taskType.toString()}
@@ -297,7 +468,7 @@ export default function FormTaskDetail() {
                 </RadioGroup>
               </div>
               {/* RadioGroup Assignment Category */}
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Jenis Penugasan</Label>
                 <RadioGroup
                   value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
@@ -318,7 +489,7 @@ export default function FormTaskDetail() {
                   </div>
                 </RadioGroup>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Output Tugas</Label>
                 <div className="flex flex-wrap gap-3">
                   {Object.keys(taskOutput).map((key) => (
@@ -337,7 +508,7 @@ export default function FormTaskDetail() {
                   ))}
                 </div>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Broadcast </Label>
                 <RadioGroup
                   value={broadcastType} // Nilai terpilih diambil dari state broadcastType
@@ -358,7 +529,7 @@ export default function FormTaskDetail() {
                   </div>
                 </RadioGroup>
               </div>
-              <div className="mt-5">
+              <div className="mt-6">
                 <Label>Narasi Penugasan</Label>
                 <Controller
                   control={control}
diff --git a/components/form/task/task-edit-form.tsx b/components/form/task/task-edit-form.tsx
new file mode 100644
index 00000000..2a8cafcb
--- /dev/null
+++ b/components/form/task/task-edit-form.tsx
@@ -0,0 +1,596 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createTask,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+const taskSchema = z.object({
+  // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+});
+
+export type taskDetail = {
+  id: number;
+  uniqueCode: string;
+  title: string;
+  fileTypeOutput: string;
+  assignedToRole: string;
+  assignedToTopLevel: string;
+  assignmentType: {
+    id: number;
+    name: string;
+  };
+  assignmentMainType: {
+    id: number;
+    name: string;
+  };
+  taskType: string;
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+};
+
+export default function FormTaskEdit() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  // State for various form fields
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+  // };
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getTask(id);
+        const details = response.data?.data;
+
+        setDetail(details);
+
+        if (details?.assignedToLevel) {
+          const levels = new Set(
+            details.assignedToLevel.split(",").map(Number)
+          );
+          setCheckedLevels(levels);
+        }
+
+        // Add more state setting here based on other fields like broadcastType, taskOutput, etc.
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
+  useEffect(() => {
+    if (detail?.broadcastType) {
+      setBroadcastType(detail.broadcastType); // Mengatur nilai broadcastType dari API
+    }
+  }, [detail?.broadcastType]);
+
+  useEffect(() => {
+    if (detail?.fileTypeOutput) {
+      const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
+      setTaskOutput({
+        all: outputSet.has(0),
+        video: outputSet.has(2),
+        audio: outputSet.has(4),
+        image: outputSet.has(1),
+        text: outputSet.has(3),
+      });
+    }
+  }, [detail?.fileTypeOutput]);
+
+  useEffect(() => {
+    if (detail?.assignedToTopLevel) {
+      const outputSet = new Set(
+        detail.assignedToTopLevel.split(",").map(Number)
+      );
+      setUnitSelection({
+        allUnit: outputSet.has(0),
+        mabes: outputSet.has(1),
+        polda: outputSet.has(2),
+        polres: outputSet.has(3),
+      });
+    }
+  }, [detail?.fileTypeOutput]);
+
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const save = async (data: TaskSchema) => {
+    const fileTypeMapping = {
+      all: "1",
+      video: "2",
+      audio: "3",
+      image: "4",
+      text: "5",
+    };
+
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
+      .join(",");
+
+    const requestData: {
+      id?: any;
+      title: string;
+      assignedToLevel: any;
+      assignmentPurpose: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      taskType: string;
+      assignedToRole: string;
+      broadcastType: string;
+    } = {
+      ...data,
+      // assignmentType,
+      // assignmentCategory,
+      id: detail?.id || null,
+      assignedToLevel: handlePoldaPolresChange(),
+      assignmentPurpose: assignmentPurposeString,
+      assignedToRole: selectedTarget,
+      taskType: taskType,
+      broadcastType: broadcastType,
+      assignmentMainTypeId: mainType,
+      assignmentTypeId: type,
+      fileTypeOutput: selectedOutputs,
+      narration: data.naration,
+      platformType: "",
+      title: data.title,
+    };
+
+    const response = await createTask(requestData);
+
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/task");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <p className="text-lg font-semibold mb-3">Form Penugasan</p>
+        {detail !== undefined ? (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="gap-5 mb-5">
+              {/* <div className="space-y-2">
+                <Label>Kode Unik</Label>
+                <Controller
+                  control={control}
+                  name="uniqueCode"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={detail?.uniqueCode}
+                      onChange={field.onChange}
+                      placeholder="Enter uniqueCode"
+                      readOnly
+                    />
+                  )}
+                />
+              </div> */}
+              <div className="space-y-2 mt-6">
+                <Label>Judul</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.title}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+              <div className="flex flex-row items-center">
+                <div className="mt-6">
+                  <Label>Tujuan Pemilihan Tugas</Label>
+                  <Select
+                    onValueChange={setSelectedTarget}
+                    value={detail.assignedToRole}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
+                      <SelectItem value="4">Kontributor</SelectItem>
+                      <SelectItem value="3">Approver</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex flex-wrap gap-3 mt-6 pt-5 ml-3">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          setUnitSelection({ ...unitSelection, [key]: value })
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+                <div className="mt-6 pt-5 pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [Kustom]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+              <div className="mt-6">
+                <Label>Tipe Penugasan</Label>
+                <RadioGroup
+                  value={detail.assignmentMainType.id.toString()} // State yang dipetakan ke value RadioGroup
+                  onValueChange={(value) => setMainType(value)}
+                  // value={String(mainType)}
+                  // onValueChange={(value) => setMainType(Number(value))}
+                  className="flex flex-wrap gap-3"
+                >
+                  <RadioGroupItem value="1" id="mediahub" />
+                  <Label htmlFor="mediahub">Mediahub</Label>
+                  <RadioGroupItem value="2" id="medsos-mediahub" />
+                  <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Jenis Tugas </Label>
+                <RadioGroup
+                  value={detail.taskType.toString()}
+                  onValueChange={(value) => setTaskType(String(value))}
+                  className="flex flex-wrap gap-3"
+                >
+                  <RadioGroupItem value="atensi-khusus" id="khusus" />
+                  <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
+                  <RadioGroupItem value="tugas-harian" id="harian" />
+                  <Label htmlFor="tugas-harian">Tugas Harian</Label>
+                </RadioGroup>
+              </div>
+              {/* RadioGroup Assignment Category */}
+              <div className="mt-6">
+                <Label>Jenis Penugasan</Label>
+                <RadioGroup
+                  value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
+                  onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="1" id="publication" />
+                    <Label htmlFor="publication">Publikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="2" id="amplification" />
+                    <Label htmlFor="amplification">Amplifikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="3" id="contra" />
+                    <Label htmlFor="contra">Kontra</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Output Tugas</Label>
+                <div className="flex flex-wrap gap-3">
+                  {Object.keys(taskOutput).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={taskOutput[key as keyof typeof taskOutput]}
+                        onCheckedChange={(value) =>
+                          setTaskOutput({ ...taskOutput, [key]: value })
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-6">
+                <Label>Broadcast </Label>
+                <RadioGroup
+                  value={broadcastType} // Nilai terpilih diambil dari state broadcastType
+                  onValueChange={(value) => setBroadcastType(value)} // Mengatur nilai saat radio berubah
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="all" id="all" />
+                    <Label htmlFor="all">Semua</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="email" id="email" />
+                    <Label htmlFor="email">Email Blast</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="whatsapp" id="whatsapp" />
+                    <Label htmlFor="whatsapp">WhatsApp Blast</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Narasi Penugasan</Label>
+                <Controller
+                  control={control}
+                  name="naration"
+                  render={({ field: { onChange, value } }) => (
+                    <JoditEditor
+                      ref={editor}
+                      value={detail?.narration}
+                      onChange={onChange}
+                      className="dark:text-black"
+                    />
+                  )}
+                />
+                {errors.naration?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.naration.message}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/form/task/task-form.tsx b/components/form/task/task-form.tsx
index f94037cd..8b74a6b8 100644
--- a/components/form/task/task-form.tsx
+++ b/components/form/task/task-form.tsx
@@ -20,7 +20,19 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import JoditEditor from "jodit-react";
-import { createTask, getTask } from "@/service/task";
+import {
+  createTask,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -34,6 +46,7 @@ export type taskDetail = {
   title: string;
   fileTypeOutput: string;
   assignedToTopLevel: string;
+  assignedToLevel: string;
   assignmentType: {
     id: number;
     name: string;
@@ -71,9 +84,13 @@ export default function FormTask() {
   const [taskType, setTaskType] = useState<string>("atensi-khusus");
   const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
   const [type, setType] = useState<string>("1");
-  const [selectedTarget, setSelectedTarget] = useState("all");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
   const [detail, setDetail] = useState<taskDetail>();
   const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -96,7 +113,47 @@ export default function FormTask() {
   //   setMainType(selectedValue);
 
   //   setPlatformTypeVisible(selectedValue === 2);
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
   // };
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
 
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
@@ -107,25 +164,47 @@ export default function FormTask() {
       text: "5",
     };
 
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
     const selectedOutputs = Object.keys(taskOutput)
       .filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
       .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
       .join(",");
 
-    const requestData = {
+    const requestData: {
+      id?: number;
+      title: string;
+      assignedToLevel: any;
+      assignmentPurpose: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      taskType: string;
+      assignedToRole: string;
+      broadcastType: string;
+    } = {
       ...data,
       // assignmentType,
       // assignmentCategory,
-      target: selectedTarget,
-      unitSelection,
-      assignedToRole: "3",
+      assignedToLevel: handlePoldaPolresChange(),
+      assignmentPurpose: assignmentPurposeString,
+      assignedToRole: selectedTarget,
       taskType: taskType,
       broadcastType: broadcastType,
       assignmentMainTypeId: mainType,
-      assignmentPurpose: "1",
       assignmentTypeId: type,
       fileTypeOutput: selectedOutputs,
-      id: null,
       narration: data.naration,
       platformType: "",
       title: data.title,
@@ -163,6 +242,13 @@ export default function FormTask() {
     });
   };
 
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
   return (
     <Card>
       <div className="px-6 py-6">
@@ -198,9 +284,9 @@ export default function FormTask() {
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="all">Semua Pengguna</SelectItem>
-                    <SelectItem value="contributor">Kontributor</SelectItem>
-                    <SelectItem value="approver">Approver</SelectItem>
+                    <SelectItem value="3,4">Semua Pengguna</SelectItem>
+                    <SelectItem value="4">Kontributor</SelectItem>
+                    <SelectItem value="3">Approver</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
@@ -220,6 +306,82 @@ export default function FormTask() {
                   </div>
                 ))}
               </div>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="soft" size="sm" color="primary">
+                    [Kustom]
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                  <DialogHeader>
+                    <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
+                  </DialogHeader>
+                  <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                    {listDest.map((polda: any) => (
+                      <div key={polda.id} className="border p-2">
+                        <Label className="flex items-center">
+                          <Checkbox
+                            checked={checkedLevels.has(polda.id)}
+                            onCheckedChange={() =>
+                              handleCheckboxChange(polda.id)
+                            }
+                            className="mr-3"
+                          />
+                          {polda.name}
+                          <button
+                            onClick={() => toggleExpand(polda.id)}
+                            className="ml-2 focus:outline-none"
+                          >
+                            {expandedPolda[polda.id] ? (
+                              <ChevronUp size={16} />
+                            ) : (
+                              <ChevronDown size={16} />
+                            )}
+                          </button>
+                        </Label>
+                        {expandedPolda[polda.id] && (
+                          <div className="ml-6 mt-2">
+                            <Label className="block">
+                              <Checkbox
+                                checked={polda?.subDestination?.every(
+                                  (polres: any) => checkedLevels.has(polres.id)
+                                )}
+                                onCheckedChange={(isChecked) => {
+                                  const updatedLevels = new Set(checkedLevels);
+                                  polda?.subDestination?.forEach(
+                                    (polres: any) => {
+                                      if (isChecked) {
+                                        updatedLevels.add(polres.id);
+                                      } else {
+                                        updatedLevels.delete(polres.id);
+                                      }
+                                    }
+                                  );
+                                  setCheckedLevels(updatedLevels);
+                                }}
+                                className="mr-2"
+                              />
+                              Pilih Semua Polres
+                            </Label>
+                            {polda?.subDestination?.map((polres: any) => (
+                              <Label key={polres.id} className="block mt-1">
+                                <Checkbox
+                                  checked={checkedLevels.has(polres.id)}
+                                  onCheckedChange={() =>
+                                    handleCheckboxChange(polres.id)
+                                  }
+                                  className="mr-2"
+                                />
+                                {polres.name}
+                              </Label>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </DialogContent>
+              </Dialog>
             </div>
             <div className="mt-5">
               <Label>Tipe Penugasan</Label>
diff --git a/components/landing-page/coverage.tsx b/components/landing-page/coverage.tsx
index c786bf48..8701aba2 100644
--- a/components/landing-page/coverage.tsx
+++ b/components/landing-page/coverage.tsx
@@ -57,14 +57,10 @@ const Coverage: React.FC = () => {
 
         {/* Pencarian */}
         <div className="flex items-center justify-center gap-4 mb-6">
-          <input
-            type="text"
-            placeholder="Pencarian"
-            className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">Cari Liputan <Icon icon="uil:arrow-right" /></button>
+          <input type="text" placeholder="Pencarian" className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
+          <button className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">
+            Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
         </div>
 
         {/* Grid Wilayah */}
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx
index 2f199dfb..6b59a642 100644
--- a/components/landing-page/division.tsx
+++ b/components/landing-page/division.tsx
@@ -60,8 +60,8 @@ const Division = () => {
         {/* Pencarian */}
         <div className="flex items-center justify-center gap-4 mb-6">
           <input type="text" placeholder="Pencarian" className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
-          <button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
-            Cari Liputan <Icon icon="uil:arrow-right" />
+          <button className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
+            Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
         </div>
 
diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx
index 6c869951..89966169 100644
--- a/components/landing-page/footer.tsx
+++ b/components/landing-page/footer.tsx
@@ -46,7 +46,7 @@ const Footer = () => {
           <Dialog>
             <DialogTrigger>
               <span className="hidden md:inline-block">|</span>
-              <a href="#" className="hover:underline">
+              <a href="#" className="hover:underline px-2">
                 Privacy
               </a>
             </DialogTrigger>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 59ea0e3b..23aae72a 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -2,12 +2,10 @@
 
 import React, { useState } from "react";
 import ThemeSwitcher from "@/components/partials/header/theme-switcher";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { generateLocalizedPath } from "@/utils/globals";
 import { Link } from "@/i18n/routing";
-import { cn } from "@/lib/utils";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 
 const Navbar = () => {
@@ -25,15 +23,15 @@ const Navbar = () => {
   };
 
   return (
-    <div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
-      <div className="flex items-center sm:justify-between px-4 lg:px-20 py-4 gap-3 mx-auto">
+    <div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
+      <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
         {/* Logo */}
         <Link href="/" className="flex items-center">
           <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-fit h-20 md:h-24" />
         </Link>
 
         {/* Mobile Menu Toggle */}
-        <button className="text-black dark:text-white size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+        <button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
           {menuOpen ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <path fill="#000" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
@@ -47,50 +45,149 @@ const Navbar = () => {
 
         {/* Desktop Navigation */}
         <div className="hidden lg:flex items-center gap-5">
-          {/* <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <a className="dark:text-white text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
-                <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
-                    fill="currentColor"
-                  />
-                </svg>
-                Konten
-                <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                  <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
-                </svg>
-              </a>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="p-0 rounded-md overflow-hidden">
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2">
-                  <FiYoutube className="mr-2" />
-                  Audio Visual
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
-                  <FiMusic className="mr-2" />
-                  Audio
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
-                  <FiImage className="mr-2" />
-                  Foto
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
-                  <FiFile className="mr-2" />
-                  Teks
-                </span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu> */}
-
           {/* Nav Menu */}
+          <NavigationMenu>
+            <NavigationMenuList>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>
+                  <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
+                    <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    Konten
+                  </a>
+                </NavigationMenuTrigger>
+                <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 ">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                      <FiYoutube className="mr-2" />
+                      Video
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 ">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                      <FiMusic className="mr-2" />
+                      Audio
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                      <FiImage className="mr-2" />
+                      Foto
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                      <FiFile className="mr-2" />
+                      Teks
+                    </p>
+                  </NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <Link href="/schedule" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                    <span>
+                      <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                    Jadwal
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <Link href="/indeks" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                    <span>
+                      <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                    Indeks
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          <Link href="#" className="flex items-center space-x-1 text-red-600">
+            <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+            <span className="font-medium">Live</span>
+          </Link>
+          <div className="flex items-center space-x-1  ">
+            <a href="https://tvradio.polri.go.id/">
+              <img src="/assets/polriTv.png" className="w-auto lg:max-w-screen-lg h-10 flex-auto " />
+            </a>
+          </div>
+
+          <div className="relative inline-block text-left">
+            {/* Tombol Utama */}
+            <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
+              <img
+                src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
+                alt={language === "id" ? "Ind" : "Eng"}
+                className="w-3 h-3"
+              />
+              <span>{language === "id" ? "Ind" : "Eng"}</span>
+              <span className="text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
+                  <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
+                </svg>
+              </span>
+            </button>
+
+            {/* Dropdown Menu */}
+            {isOpen && (
+              <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
+                <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
+                  <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
+                  <span>Ind</span>
+                </button>
+                <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
+                  <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
+                  <span>Eng</span>
+                </button>
+              </div>
+            )}
+          </div>
+          <ThemeSwitcher />
+          <div className="relative text-gray-600 dark:text-white">
+            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" />
+            <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]">
+              Masuk
+            </Link>
+            <button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">Daftar</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="lg:hidden absolute bg-[#f7f7f7] px-4 py-3 w-full space-y-3 z-50">
           <NavigationMenu>
             <NavigationMenuList>
               <NavigationMenuItem>
@@ -166,196 +263,56 @@ const Navbar = () => {
               </NavigationMenuItem>
             </NavigationMenuList>
           </NavigationMenu>
-
-          {/* <Link href="/contributor/schedule" className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
-            <span>
-              <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            Jadwal
-          </Link> */}
-
-          {/* <Link href={generateLocalizedPath("/schedule", String(locale))} className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
-            <span>
-              <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            Jadwal
-          </Link> */}
-          {/* <Link href="/indeks" className="dark:text-white text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
-            <span>
-              <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            Indeks
-          </Link> */}
-          <Link href="#" className="flex items-center space-x-1 text-red-600">
-            <span className="w-2 h-2 bg-red-500 rounded-full"></span>
-            <span className="font-medium">Live</span>
-          </Link>
-          <div className="flex items-center space-x-1  ">
-            <a href="https://tvradio.polri.go.id/">
-              <img src="/assets/polriTv.png" className="w-auto lg:max-w-screen-lg h-10 flex-auto " />
-            </a>
-          </div>
-
-          <div className="relative inline-block text-left">
-            {/* Tombol Utama */}
-            <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
-              <img
-                src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
-                alt={language === "id" ? "Ind" : "Eng"}
-                className="w-3 h-3"
-              />
-              <span>{language === "id" ? "Ind" : "Eng"}</span>
-              <span className="text-gray-500">
-                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
-                  <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
-                </svg>
-              </span>
-            </button>
-
-            {/* Dropdown Menu */}
-            {isOpen && (
-              <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
-                <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
-                  <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
-                  <span>Ind</span>
-                </button>
-                <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
-                  <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
-                  <span>Eng</span>
-                </button>
-              </div>
-            )}
-          </div>
-          <ThemeSwitcher />
-          <div className="relative text-gray-600 dark:text-white">
-            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none" />
-            <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
-                <path
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">
-              Masuk
-            </Link>
-            <button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-red-600 hover:text-white">Daftar</button>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Menu */}
-      {menuOpen && (
-        <div className="lg:hidden absolute bg-gray-700 px-4 py-3 w-full space-y-3 z-50">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <a className=" text-white flex flex-row items-center cursor-pointer">
-                <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
-                    fill="white"
-                  />
-                </svg>
-                Konten
-                <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                  <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
-                </svg>
+          <div className="flex flex-row justify-between mx-3">
+            <div className="flex items-center space-x-1 mx-3 text-red-600">
+              <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+              <span className="font-medium">Live</span>
+            </div>
+            <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
+              <a href="https://tvradio.polri.go.id/">
+                <img src="/assets/polriTv.png" className="w-21 h-11 flex items-center" />
               </a>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="p-0 rounded-md overflow-hidden">
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center p-3">
-                  <FiYoutube className="mr-2" />
-                  Audio Visual
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center p-3">
-                  <FiMusic className="mr-2" />
-                  Audio
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3">
-                  <FiImage className="mr-2" />
-                  Foto
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3">
-                  <FiFile className="mr-2" />
-                  Teks
-                </span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Link href="#" className="flex  text-white flex-row items-center font-medium hover:text-gray-800">
-            <span>
-              <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
-                  fill="white"
+            </div>
+            <div className="relative inline-block mx-3 text-left">
+              {/* Tombol Utama Bahasa */}
+              <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
+                <img
+                  src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
+                  alt={language === "id" ? "Ind" : "Eng"}
+                  className="w-3 h-3"
                 />
-              </svg>
-            </span>
-            Jadwal
-          </Link>
-          <Link href="#" className="flex text-white flex-row items-center font-medium hover:text-gray-800">
-            <span>
-              <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
-                  fill="white"
-                />
-              </svg>
-            </span>
-            Indeks
-          </Link>
-          <div className="flex items-center space-x-1 text-red-600">
-            <span className="w-2 h-2 bg-red-500 rounded-full"></span>
-            <span className="font-medium">Live</span>
+                <span>{language === "id" ? "Ind" : "Eng"}</span>
+                <span className="text-gray-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
+                    <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
+                  </svg>
+                </span>
+              </button>
+
+              {/* Dropdown Menu */}
+              {isOpen && (
+                <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
+                  <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
+                    <span>Ind</span>
+                  </button>
+                  <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
+                    <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
+                    <span>Eng</span>
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
-          <div className="flex items-center space-x-1 text-yellow-600 font-medium">
-            <a href="https://tvradio.polri.go.id/">
-              <img src="/assets/polriTv.png" className="w-32 h-11 flex items-center" />
-            </a>
+
+          <div className=" py-1 flex items-center mx-3">
+            <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
           </div>
-          <select className="w-full bg-transparent text-black border border-gray-300 py-1 px-2 rounded focus:outline-none" defaultValue="Indonesia">
-            <option>Indonesia</option>
-            <option>English</option>
-          </select>
-          <div className="px-4 py-1 w-24">
-            <input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-gray-600" />
-          </div>
-          <div className="flex flex-col space-y-2">
-            <Link href="/auth" className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
+          <div className="flex justify-center items-center mx-3 gap-5">
+            <Link href="/auth" className="w-full lg:w-fit px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center">
               Masuk
             </Link>
-            <Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
+            <Link href="#" className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white">
               Daftar
             </Link>
           </div>
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 1a976bc7..da266abe 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -42,31 +42,31 @@ const NewContent = (props: { type: string }) => {
               {props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"}
             </h2>
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
-              <TabsList>
+              <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
                 <TabsTrigger
                   value="video"
-                  className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
+                  className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
                 >
                   Audio Visual
                 </TabsTrigger>
-                <div className="text-[#bb3523] text-lg">|</div>
+                <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
                 <TabsTrigger
                   value="audio"
-                  className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
+                  className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
                 >
                   Audio
                 </TabsTrigger>
-                <div className="text-[#bb3523] text-lg">|</div>
+                <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
                 <TabsTrigger
                   value="image"
-                  className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
+                  className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
                 >
                   Foto
                 </TabsTrigger>
-                <div className="text-[#bb3523] text-lg">|</div>
+                <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
                 <TabsTrigger
                   value="text"
-                  className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
+                  className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
                 >
                   Teks
                 </TabsTrigger>
@@ -81,9 +81,9 @@ const NewContent = (props: { type: string }) => {
                     {newContent?.map((video: any) => (
                       <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                         <Link href={`/video/detail/${video?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                           <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                            <h1 className="text-lg font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
+                            <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
                             <p className="flex flex-row items-center text-[10px] gap-2">
                               {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
                             </p>
@@ -105,7 +105,7 @@ const NewContent = (props: { type: string }) => {
                     {newContent?.map((audio: any) => (
                       <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3">
                         <div className="flex flex-row gap-6">
-                          <Link href={`/audio/detail/${audio?.slug}`} className="flex flex-col  sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                          <Link href={`/audio/detail/${audio?.slug}`} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
                             <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
                               <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                                 <path
@@ -139,7 +139,7 @@ const NewContent = (props: { type: string }) => {
                     {newContent?.map((image: any) => (
                       <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
                         <Link href={`/image/detail/${image?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                          <img src={image?.thumbnailLink} className="w-full h-32 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
+                          <img src={image?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
                           <div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
                             <h1 className="text-sm font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h1>
                             <p className="flex flex-row items-center text-sm gap-2">
@@ -173,8 +173,10 @@ const NewContent = (props: { type: string }) => {
                           </div>
 
                           <div className="flex w-full pr-10 flex-col flex-1">
-                            <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-sm">
-                              {formatDateToIndonesian(new Date(text?.createdAt))} {text?.timezone ? text?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {text?.clickCount}{" "}
+                            <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-xs gap-0 lg:gap-1 mt-1 lg:text-sm">
+                              {formatDateToIndonesian(new Date(text?.createdAt))}
+                              {text?.timezone ? text?.timezone : "WIB"}|<Icon icon="formkit:eye" width="15" height="15" />
+                              {text?.clickCount}
                             </div>
                             <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">{text?.title}</div>
                             <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
diff --git a/components/landing-page/search-section.tsx b/components/landing-page/search-section.tsx
index 56f9f3f8..9282833e 100644
--- a/components/landing-page/search-section.tsx
+++ b/components/landing-page/search-section.tsx
@@ -17,7 +17,7 @@ const SearchSection = () => {
         {/* Search Form */}
         <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
           {/* Dropdown */}
-          <div className="flex items-center justify-center rounded-lg overflow-hidden">
+          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
@@ -60,23 +60,25 @@ const SearchSection = () => {
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
+              <span className="material-icons text-black dark:text-white px-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+                  />
+                </svg>
+              </span>
+              <input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
+            </div>
           </div>
 
           {/* Search Input */}
-          <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
-            <span className="material-icons text-black dark:text-white px-4">
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path
-                  fill="currentColor"
-                  d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
-                />
-              </svg>
-            </span>
-            <input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
-          </div>
 
           {/* Button */}
-          <button className="px-6 py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-lg hover:bg-red-700">Cari Liputan <Icon icon="uil:arrow-right" /></button>
+          <button className="px-6 lg:w-[20%] py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-lg hover:bg-red-700">
+            Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
         </div>
       </div>
     </section>
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 1419f566..0913c2c4 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -1,71 +1,37 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
+const NavigationMenu = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Root>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root ref={ref} className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)} {...props}>
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+const NavigationMenuList = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.List>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List ref={ref} className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)} {...props} />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-[#f7f7f7] dark:bg-black px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+);
 
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
+const NavigationMenuTrigger = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), "group", className)} {...props}>
+    {children} <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" />
   </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+const NavigationMenuContent = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>>(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
@@ -74,15 +40,12 @@ const NavigationMenuContent = React.forwardRef<
     )}
     {...props}
   />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
+const NavigationMenuViewport = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>>(({ className, ...props }, ref) => (
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
@@ -93,36 +56,18 @@ const NavigationMenuViewport = React.forwardRef<
       {...props}
     />
   </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
+const NavigationMenuIndicator = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>>(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Indicator
     ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    )}
+    className={cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className)}
     {...props}
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport };
diff --git a/config/swal.ts b/config/swal.ts
new file mode 100644
index 00000000..74f27f17
--- /dev/null
+++ b/config/swal.ts
@@ -0,0 +1,126 @@
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+
+type SweetAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question';
+
+const MySwal = withReactContent(Swal);
+
+export function loading(): void {
+  let timerInterval: NodeJS.Timeout;
+  MySwal.fire({
+    title: '<p class="text-lg font-bold">Loading</p>',
+    allowOutsideClick: false,
+    timerProgressBar: true,
+    didOpen: () => {
+      MySwal.showLoading();
+      timerInterval = setInterval(() => {}, 100);
+    },
+    willClose: () => {
+      clearInterval(timerInterval);
+    },
+  });
+}
+
+export function error(msg: string): void {
+  MySwal.fire({
+    title: '<p class="text-red-600 font-semibold">Gagal</p>',
+    html: `<p class="text-gray-700">${msg}</p>`,
+    icon: 'error',
+  });
+}
+
+export function success(redirect: string): void {
+  MySwal.fire({
+    title: '<p class="text-green-600 font-bold">Sukses</p>',
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+    allowOutsideClick: false,
+  }).then((result) => {
+    if (result.isConfirmed) {
+      window.location.href = redirect;
+    }
+  });
+}
+
+export function successCallback(title?: string): Promise<boolean> {
+  return MySwal.fire({
+    title: `<p class="text-green-600 font-bold">${title || 'Sukses'}</p>`,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+  }).then((result) => result.isConfirmed);
+}
+
+export function successCallbackContent(title?: string): Promise<boolean> {
+  return MySwal.fire({
+    title: `<p class="text-green-600 font-bold">${title || 'Konten Telah Berhasil Disimpan'}</p>`,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+  }).then((result) => result.isConfirmed);
+}
+
+export function close(): void {
+  MySwal.close();
+}
+
+export function welcome(name: string): Promise<boolean> {
+  let timerInterval: NodeJS.Timeout;
+  timerInterval = setInterval(() => {}, 100);
+  return MySwal.fire({
+    title: `<p class="text-green-600 font-bold">Selamat Datang ${name} \nDi Mediahub</p>`,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+    timer: 2000,
+    timerProgressBar: false,
+    willClose: () => {
+      clearInterval(timerInterval);
+    },
+  }).then((result) => result.isConfirmed);
+}
+
+export function welcomeGuest(name: string): Promise<boolean> {
+  let timerInterval: NodeJS.Timeout;
+  timerInterval = setInterval(() => {}, 100);
+  return MySwal.fire({
+    title: `<p class="text-green-600 font-bold">Selamat Datang ${name} \nDi Mediahub</p>`,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+    timer: 2000,
+    timerProgressBar: false,
+    willClose: () => {
+      clearInterval(timerInterval);
+    },
+  }).then((result) => result.isConfirmed);
+}
+
+export function registerConfirm(): void {
+  MySwal.fire({
+    title: '<p class="text-green-600 font-bold">Selamat Anda Telah Terdaftar</p>',
+    html: '<p class="text-gray-700">Mohon Menunggu Email Konfirmasi Untuk Bisa Melakukan Login</p>',
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+  }).then((result) => {
+    if (result.isConfirmed) {
+      window.location.href = '/auth/login';
+    }
+  });
+}
+
+export function warning(text: string, redirect?: string): Promise<boolean> {
+  return MySwal.fire({
+    title: `<p class="text-yellow-600 font-bold">${text}</p>`,
+    icon: 'warning',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '<span class="text-white">OK</span>',
+  }).then((result) => {
+    if (redirect && result.isConfirmed) {
+      window.location.href = redirect;
+    }
+    return result.isConfirmed;
+  });
+}
diff --git a/package-lock.json b/package-lock.json
index 7fef47c2..1f775fc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -153,6 +153,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -1218,6 +1219,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -1234,6 +1236,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -1245,6 +1248,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -1775,6 +1779,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1787,6 +1792,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1795,6 +1801,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1824,6 +1831,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -3733,7 +3741,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4027,6 +4035,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4040,6 +4049,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4053,12 +4063,14 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4103,7 +4115,8 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -4394,12 +4407,14 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -4421,6 +4436,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -4480,6 +4496,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4579,6 +4596,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -4602,6 +4620,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4786,6 +4805,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -4809,6 +4829,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -5484,7 +5505,8 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
     },
     "node_modules/diff": {
       "version": "5.2.0",
@@ -5509,7 +5531,8 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -5610,7 +5633,8 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
     },
     "node_modules/elkjs": {
       "version": "0.9.3",
@@ -5658,7 +5682,8 @@
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
     },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
@@ -6498,6 +6523,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -6513,6 +6539,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -6536,6 +6563,7 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -6579,6 +6607,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6669,6 +6698,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -6737,6 +6767,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6892,6 +6923,7 @@
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -6913,6 +6945,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -6924,6 +6957,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -6932,6 +6966,7 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -7899,6 +7934,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -8030,6 +8066,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8053,6 +8090,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8076,6 +8114,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -8120,6 +8159,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -8368,6 +8408,7 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -8385,6 +8426,7 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8648,6 +8690,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -8756,7 +8799,8 @@
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
     },
     "node_modules/lucide-react": {
       "version": "0.390.0",
@@ -9470,6 +9514,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -10257,6 +10302,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -10317,6 +10363,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -10365,6 +10412,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -10667,6 +10715,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10721,6 +10770,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -11019,6 +11069,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -11032,6 +11083,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -11070,6 +11122,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -11081,6 +11134,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11089,6 +11143,7 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -11106,6 +11161,7 @@
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
       "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11133,6 +11189,7 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -11149,6 +11206,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -11167,6 +11225,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11201,6 +11260,7 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
       "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
+      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -11212,6 +11272,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11236,6 +11297,7 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -11247,7 +11309,8 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
     },
     "node_modules/preact": {
       "version": "10.12.1",
@@ -11357,6 +11420,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11907,6 +11971,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -11915,6 +11980,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -12337,6 +12403,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -12409,6 +12476,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12600,6 +12668,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -12611,6 +12680,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12647,6 +12717,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -12776,6 +12847,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -12793,6 +12865,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -12805,12 +12878,14 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -12822,6 +12897,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -12957,6 +13033,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -12969,6 +13046,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -13073,6 +13151,7 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -13094,6 +13173,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -13267,6 +13347,7 @@
       "version": "3.4.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
       "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
+      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -13326,6 +13407,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -13334,6 +13416,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -13446,6 +13529,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -13508,7 +13592,8 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -13986,7 +14071,8 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
     },
     "node_modules/uuid": {
       "version": "9.0.1",
@@ -14225,6 +14311,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -14331,6 +14418,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -14348,6 +14436,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -14363,12 +14452,14 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14382,6 +14473,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -14393,6 +14485,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -14404,6 +14497,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
diff --git a/providers/mounted.provider.tsx b/providers/mounted.provider.tsx
index 3e92908d..240057cb 100644
--- a/providers/mounted.provider.tsx
+++ b/providers/mounted.provider.tsx
@@ -1,13 +1,13 @@
-"use client"
-import Loader from '@/components/loader'
+"use client";
+import Loader from "@/components/loader";
 
-import { useMounted } from '@/hooks/use-mounted'
-import React from 'react'
+import { useMounted } from "@/hooks/use-mounted";
+import React from "react";
 
 const MountedProvider = ({ children }: { children: React.ReactNode }) => {
-  const mounted = useMounted()
-  if (!mounted) return <Loader />
-  return children
-}
+  const mounted = useMounted();
+  // if (!mounted) return <Loader />
+  return children;
+};
 
-export default MountedProvider
\ No newline at end of file
+export default MountedProvider;
diff --git a/service/blog/blog.ts b/service/blog/blog.ts
index 0254ec6d..c2aa7da2 100644
--- a/service/blog/blog.ts
+++ b/service/blog/blog.ts
@@ -21,3 +21,8 @@ export async function getBlog(id: any) {
   const url = `blog/${id}`;
   return getAPIInterceptor(url);
 }
+
+export async function uploadThumbnailBlog(id: any, data: any) {
+  const url = `blog/${id}/thumbnail`;
+  return postAPIInterceptor(url, data);
+}
diff --git a/service/content/content.ts b/service/content/content.ts
index 70f0254b..d407f706 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -152,6 +152,6 @@ export async function getTags() {
 }
 
 export async function createMedia(data: any) {
-  const pathUrl = "media";
-  return postAPIInterceptor(pathUrl, data);
+  const url = "media";
+  return postAPIInterceptor(url, data);
 }
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 1e693ed2..1d45a4d5 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -37,3 +37,9 @@ export async function getFeedback() {
 export async function postUserFeedback() {
   return await httpGetInterceptor(`feedback/user`);
 }
+
+export async function listCategory(type = "") {
+  return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`);
+}
+
+
diff --git a/service/planning/planning.ts b/service/planning/planning.ts
index c0010852..b80d32c3 100644
--- a/service/planning/planning.ts
+++ b/service/planning/planning.ts
@@ -1,4 +1,4 @@
-import { getAPIInterceptor } from "@/config/api";
+import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
 import { httpGetInterceptor } from "../http-config/http-interceptor-service";
 
 export async function getPlanningSentPagination(
@@ -16,3 +16,8 @@ export async function getPlanningById(id: any) {
   const url = `planning?id=${id}`;
   return getAPIInterceptor(url);
 }
+
+export async function publishPlanning(data: any) {
+  const url = "planning/publish";
+  return postAPIInterceptor(url, data);
+}
diff --git a/service/task.ts b/service/task.ts
index 4aca8bcd..be3908ff 100644
--- a/service/task.ts
+++ b/service/task.ts
@@ -58,7 +58,7 @@ export async function deleteTask(id: any) {
 
 export async function getUserLevelForAssignments() {
   const url = "/users/user-levels/assignment";
-  return getAPIInterceptor({ url });
+  return getAPIInterceptor(url);
 }
 
 export async function getAssignmentResponseList(id: any) {