diff --git a/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx b/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx
index e72f21c6..ad272826 100644
--- a/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx
@@ -76,9 +76,6 @@ export default function EditUserForm() {
     },
   });
 
-  const passwordVal = form.watch("password");
-  const confPasswordVal = form.watch("confirmPassword");
-
   useEffect(() => {
     initData();
   }, []);
diff --git a/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx b/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx
index 38f63d1f..ed402dc7 100644
--- a/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx
@@ -354,7 +354,7 @@ export default function EditUserForm() {
             rules={["minLength", "specialChar", "number", "capital", "match"]}
             minLength={8}
             value={passwordVal || ""}
-            valueAgain={confPasswordVal}
+            valueAgain={confPasswordVal || ""}
             onChange={(isValid) => {
               form.setValue("isValidPassword", isValid);
             }}
diff --git a/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx b/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
index 7311a6ac..ba4eb2de 100644
--- a/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
@@ -752,7 +752,7 @@ export default function CreateUserForm() {
             rules={["minLength", "specialChar", "number", "capital", "match"]}
             minLength={8}
             value={passwordVal || ""}
-            valueAgain={confPasswordVal}
+            valueAgain={confPasswordVal || ""}
             onChange={(isValid) => {
               form.setValue("isValidPassword", isValid);
             }}
diff --git a/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx b/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx
index 4be86550..cec7845c 100644
--- a/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx
@@ -191,8 +191,6 @@ export default function DetailUserForm() {
     },
   });
 
-  const passwordVal = form.watch("password");
-  const confPasswordVal = form.watch("confirmPassword");
   const selectedRole = form.watch("role");
 
   useEffect(() => {
diff --git a/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx b/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
index 7cbeb810..d21b5135 100644
--- a/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
@@ -757,7 +757,7 @@ export default function EditUserForm() {
             rules={["minLength", "specialChar", "number", "capital", "match"]}
             minLength={8}
             value={passwordVal || ""}
-            valueAgain={confPasswordVal}
+            valueAgain={confPasswordVal || ""}
             onChange={(isValid) => {
               form.setValue("isValidPassword", isValid);
             }}
diff --git a/app/[locale]/(protected)/admin/settings/category/component/create.tsx b/app/[locale]/(protected)/admin/settings/category/component/create.tsx
index 569aaa32..c3a1f512 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/create.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/create.tsx
@@ -125,16 +125,16 @@ export default function CreateCategoryModal() {
   });
 
   const contentType = form.watch("contentType");
-  const isAllContentChecked = listContent.every((item) =>
-    contentType?.includes(item.id)
+  const isAllContentChecked = contentType && listContent.every((item) =>
+    contentType.includes(item.id)
   );
 
   const users = form.watch("selectedUser");
-  const isAllUserChecked = userList.every((item) => users?.includes(item.id));
+  const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
   );
 
   const { getRootProps, getInputProps } = useDropzone({
diff --git a/app/[locale]/(protected)/admin/settings/category/component/edit.tsx b/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
index aebf2356..249992cd 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
@@ -146,12 +146,12 @@ export default function EditCategoryModal(props: {
       form.setValue("id", String(data?.id));
       form.setValue("title", String(data?.name));
       form.setValue("description", String(data?.description));
-      form.setValue("contentType", data?.mediaTypes?.split(","));
+      form.setValue("contentType", data?.mediaTypes?.split(",") || []);
       form.setValue(
         "selectedUser",
         removeAndReturn(data?.publishedFor, [2, 3, 4])
       );
-      form.setValue("publishTo", data?.publishedLocation?.split(","));
+      form.setValue("publishTo", data?.publishedLocation?.split(",") || []);
       form.setValue("file", thumbnailLink);
 
       setUnitData(filterString(data?.publishedLocationLevel, "under"));
@@ -183,16 +183,16 @@ export default function EditCategoryModal(props: {
   }
 
   const contentType = form.watch("contentType");
-  const isAllContentChecked = listContent.every((item) =>
-    contentType?.includes(item.id)
+  const isAllContentChecked = contentType && listContent.every((item) =>
+    contentType.includes(item.id)
   );
 
   const users = form.watch("selectedUser");
-  const isAllUserChecked = userList.every((item) => users?.includes(item.id));
+  const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
   );
 
   useEffect(() => {
diff --git a/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx b/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx
index 34f037d6..109583ed 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx
@@ -68,11 +68,11 @@ export function UnitMapping(props: {
 
   const unitType = form.watch("items");
 
-  const isAllUnitChecked = unitList.every((item) =>
-    unitType?.includes(String(item.id))
+  const isAllUnitChecked = unitType && unitList.every((item) =>
+    unitType.includes(String(item.id))
   );
-  const isAllSatkerChecked = satkerList.every((item) =>
-    unitType?.includes(String(item.id))
+  const isAllSatkerChecked = unitType && satkerList.every((item) =>
+    unitType.includes(String(item.id))
   );
 
   const setupUnit = (data: UnitType[]) => {
diff --git a/app/[locale]/(protected)/admin/settings/faq/component/create.tsx b/app/[locale]/(protected)/admin/settings/faq/component/create.tsx
index 504d9fa5..c2de04e6 100644
--- a/app/[locale]/(protected)/admin/settings/faq/component/create.tsx
+++ b/app/[locale]/(protected)/admin/settings/faq/component/create.tsx
@@ -91,8 +91,8 @@ export default function CreateFAQModal() {
   });
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
   );
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx b/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx
index aea59fb3..622519a7 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx
@@ -74,11 +74,11 @@ export function UnitMapping(props: {
 
   const unitType = form.watch("items");
 
-  const isAllUnitChecked = unitList.every((item) =>
-    unitType?.includes(String(item.id))
+  const isAllUnitChecked = unitType && unitList.every((item) =>
+    unitType.includes(String(item.id))
   );
-  const isAllSatkerChecked = satkerList.every((item) =>
-    unitType?.includes(String(item.id))
+  const isAllSatkerChecked = unitType && satkerList.every((item) =>
+    unitType.includes(String(item.id))
   );
   const isAllPolresChecked = polresList.every((item) =>
     unitType?.includes(String(item.id))
diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
index 18b9837b..296424d7 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
@@ -132,29 +132,36 @@ const useTableColumns = () => {
       accessorKey: "statusName",
       header: "Status",
       cell: ({ row }) => {
-        const statusColors: Record<string, string> = {
-          diterima: "bg-green-100 text-green-600",
-          "menunggu review": "bg-orange-100 text-orange-600",
+        const statusId = Number(row.original?.statusId);
+        const reviewedAtLevel = row.original?.reviewedAtLevel || "";
+        const creatorGroupLevelId = Number(row.original?.creatorGroupLevelId);
+        const needApprovalFromLevel = Number(
+          row.original?.needApprovalFromLevel
+        );
+
+        const userHasReviewed = reviewedAtLevel.includes(`:${userLevelId}:`);
+        const isCreator = creatorGroupLevelId === Number(userLevelId);
+
+        const isWaitingForReview =
+          statusId === 2 && !userHasReviewed && !isCreator;
+
+        const isApprovalNeeded =
+          statusId === 1 && needApprovalFromLevel === Number(userLevelId);
+
+        const label =
+          isWaitingForReview || isApprovalNeeded
+            ? "Menunggu Review"
+            : statusId === 2
+            ? "Diterima"
+            : row.original?.statusName;
+
+        const colors: Record<string, string> = {
+          "Menunggu Review": "bg-orange-100 text-orange-600",
+          Diterima: "bg-green-100 text-green-600",
+          default: "bg-red-200 text-red-600",
         };
 
-        const colors = [
-          "bg-orange-100 text-orange-600",
-          "bg-orange-100 text-orange-600",
-          "bg-green-100 text-green-600",
-          "bg-blue-100 text-blue-600",
-          "bg-red-200 text-red-600",
-        ];
-
-        const status =
-          Number(row.original?.statusId) == 2 &&
-          row.original?.reviewedAtLevel !== null &&
-          !row.original?.reviewedAtLevel?.includes(`:${userLevelId}:`) &&
-          Number(row.original?.creatorGroupLevelId) != Number(userLevelId)
-            ? "1"
-            : row.original?.statusId;
-        const statusStyles =
-          colors[Number(status)] || "bg-red-200 text-red-600";
-        // const statusStyles = statusColors[status] || "bg-red-200 text-red-600";
+        const statusStyles = colors[label] || colors.default;
 
         return (
           <Badge
@@ -163,18 +170,7 @@ const useTableColumns = () => {
               statusStyles
             )}
           >
-            {(Number(row.original?.statusId) == 2 &&
-              !row.original?.reviewedAtLevel !== null &&
-              !row.original?.reviewedAtLevel?.includes(
-                `:${Number(userLevelId)}:`
-              ) &&
-              Number(row.original?.creatorGroupLevelId) !=
-                Number(userLevelId)) ||
-            (Number(row.original?.statusId) == 1 &&
-              Number(row.original?.needApprovalFromLevel) ==
-                Number(userLevelId))
-              ? "Menunggu Review"
-              : row.original?.statusName}{" "}
+            {label}
           </Badge>
         );
       },
diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx
index 253f3137..bc3e5de7 100644
--- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx
@@ -281,11 +281,11 @@ export default function DetailDaily() {
 
   const output = form.watch("output");
 
-  const isAllChecked = items.every((item) => output?.includes(item.id));
+  const isAllChecked = output && items.every((item) => output.includes(item.id));
 
   const unit = form.watch("unit");
 
-  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+  const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
 
   const handleAllCheckedChange = (checked: boolean | string) => {
     if (checked) {
@@ -318,11 +318,11 @@ export default function DetailDaily() {
 
   const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
     if (checked) {
-      form.setValue("unit", [...unit, id]);
+      form.setValue("unit", [...(unit ?? []), id]);
     } else {
       if (id == "2") {
         const temp = [];
-        for (const element of unit) {
+        for (const element of unit ?? []) {
           if (element == "1") {
             temp.push("1");
           }
@@ -331,7 +331,7 @@ export default function DetailDaily() {
       } else {
         form.setValue(
           "unit",
-          unit.filter((value) => value !== id)
+          (unit ?? []).filter((value) => value !== id)
         );
       }
     }
@@ -542,14 +542,14 @@ export default function DetailDaily() {
                                         id={list.id}
                                         name={`all${list.id}`}
                                         checked={
-                                          unit.includes("2")
+                                          unit?.includes("2") ?? false
                                             ? true
                                             : !!selected[list.id]
                                         }
                                         onCheckedChange={() =>
                                           handleParentChange(list.id)
                                         }
-                                        disabled={unit.includes("2")}
+                                        disabled={unit?.includes("2") ?? false}
                                       />
                                       <label
                                         htmlFor={list.name}
@@ -564,7 +564,7 @@ export default function DetailDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
+                                              unit?.includes("3") ?? false
                                                 ? true
                                                 : !!selectAll[list.id]
                                             }
@@ -574,7 +574,7 @@ export default function DetailDaily() {
                                                 Boolean(e)
                                               )
                                             }
-                                            disabled={unit.includes("3")}
+                                            disabled={unit?.includes("3") ?? false}
                                           />
                                           <label
                                             htmlFor="all-polres"
@@ -592,7 +592,7 @@ export default function DetailDaily() {
                                               <Checkbox
                                                 id={`${list.id}${subDes.id}`}
                                                 checked={
-                                                  unit.includes("3")
+                                                  unit?.includes("3") ?? false
                                                     ? true
                                                     : !!selected[
                                                         `${list.id}${subDes.id}`
@@ -603,7 +603,7 @@ export default function DetailDaily() {
                                                     `${list.id}${subDes.id}`
                                                   )
                                                 }
-                                                disabled={unit.includes("3")}
+                                                disabled={unit?.includes("3") ?? false}
                                               />
                                               <label
                                                 htmlFor={`${list.id}${subDes.id}`}
diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx
index 507660c6..519d9f6f 100644
--- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx
+++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx
@@ -294,11 +294,11 @@ export default function EditDaily() {
 
   const output = form.watch("output");
 
-  const isAllChecked = items.every((item) => output?.includes(item.id));
+  const isAllChecked = output && items.every((item) => output.includes(item.id));
 
   const unit = form.watch("unit");
 
-  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+  const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
 
   const handleAllCheckedChange = (checked: boolean | string) => {
     if (checked) {
@@ -314,7 +314,7 @@ export default function EditDaily() {
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
     form.setValue(
       "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
+      checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
     );
   };
 
@@ -331,11 +331,11 @@ export default function EditDaily() {
 
   const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
     if (checked) {
-      form.setValue("unit", [...unit, id]);
+      form.setValue("unit", [...(unit ?? []), id]);
     } else {
       if (id == "2") {
         const temp = [];
-        for (const element of unit) {
+        for (const element of unit ?? []) {
           if (element == "1") {
             temp.push("1");
           }
@@ -344,7 +344,7 @@ export default function EditDaily() {
       } else {
         form.setValue(
           "unit",
-          unit.filter((value) => value !== id)
+          (unit ?? []).filter((value) => value !== id)
         );
       }
     }
@@ -506,7 +506,7 @@ export default function EditDaily() {
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
                                     disabled={
-                                      item.id === "3" && !unit.includes("2")
+                                      item.id === "3" && !(unit?.includes("2") ?? false)
                                     }
                                     onCheckedChange={(checked) =>
                                       handleUnitCheckedChange(item.id, checked)
@@ -550,14 +550,14 @@ export default function EditDaily() {
                                         id={list.id}
                                         name={`all${list.id}`}
                                         checked={
-                                          unit.includes("2")
+                                          unit?.includes("2") ?? false
                                             ? true
                                             : !!selected[list.id]
                                         }
                                         onCheckedChange={() =>
                                           handleParentChange(list.id)
                                         }
-                                        disabled={unit.includes("2")}
+                                        disabled={unit?.includes("2") ?? false}
                                       />
                                       <label
                                         htmlFor={list.name}
@@ -572,7 +572,7 @@ export default function EditDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
+                                              unit?.includes("3") ?? false
                                                 ? true
                                                 : !!selectAll[list.id]
                                             }
@@ -582,7 +582,7 @@ export default function EditDaily() {
                                                 Boolean(e)
                                               )
                                             }
-                                            disabled={unit.includes("3")}
+                                            disabled={unit?.includes("3") ?? false}
                                           />
                                           <label
                                             htmlFor="all-polres"
@@ -600,7 +600,7 @@ export default function EditDaily() {
                                               <Checkbox
                                                 id={`${list.id}${subDes.id}`}
                                                 checked={
-                                                  unit.includes("3")
+                                                  unit?.includes("3") ?? false
                                                     ? true
                                                     : !!selected[
                                                         `${list.id}${subDes.id}`
@@ -611,7 +611,7 @@ export default function EditDaily() {
                                                     `${list.id}${subDes.id}`
                                                   )
                                                 }
-                                                disabled={unit.includes("3")}
+                                                disabled={unit?.includes("3") ?? false}
                                               />
                                               <label
                                                 htmlFor={`${list.id}${subDes.id}`}
diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
index 59f50b12..b05bc577 100644
--- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
+++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
@@ -242,11 +242,11 @@ export default function CreateDaily() {
 
   const output = form.watch("output");
 
-  const isAllChecked = items.every((item) => output?.includes(item.id));
+  const isAllChecked = output && items.every((item) => output.includes(item.id));
 
   const unit = form.watch("unit");
 
-  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+  const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
 
   const handleAllCheckedChange = (checked: boolean | string) => {
     if (checked) {
@@ -262,7 +262,7 @@ export default function CreateDaily() {
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
     form.setValue(
       "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
+      checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
     );
   };
 
@@ -279,11 +279,11 @@ export default function CreateDaily() {
 
   const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
     if (checked) {
-      form.setValue("unit", [...unit, id]);
+      form.setValue("unit", [...(unit ?? []), id]);
     } else {
       if (id == "2") {
         const temp = [];
-        for (const element of unit) {
+        for (const element of unit ?? []) {
           if (element == "1") {
             temp.push("1");
           }
@@ -292,7 +292,7 @@ export default function CreateDaily() {
       } else {
         form.setValue(
           "unit",
-          unit.filter((value) => value !== id)
+          (unit ?? []).filter((value) => value !== id)
         );
       }
     }
@@ -472,7 +472,7 @@ export default function CreateDaily() {
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
                                     disabled={
-                                      item.id === "3" && !unit.includes("2")
+                                      item.id === "3" && !(unit?.includes("2") ?? false)
                                     }
                                     onCheckedChange={(checked) =>
                                       handleUnitCheckedChange(item.id, checked)
@@ -516,14 +516,14 @@ export default function CreateDaily() {
                                         id={list.id}
                                         name={`all${list.id}`}
                                         checked={
-                                          unit.includes("2")
+                                          unit?.includes("2") ?? false
                                             ? true
                                             : !!selected[list.id]
                                         }
                                         onCheckedChange={() =>
                                           handleParentChange(list.id)
                                         }
-                                        disabled={unit.includes("2")}
+                                        disabled={unit?.includes("2") ?? false}
                                       />
                                       <label
                                         htmlFor={list.name}
@@ -538,7 +538,7 @@ export default function CreateDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
+                                              unit?.includes("3") ?? false
                                                 ? true
                                                 : !!selectAll[list.id]
                                             }
@@ -548,7 +548,7 @@ export default function CreateDaily() {
                                                 Boolean(e)
                                               )
                                             }
-                                            disabled={unit.includes("3")}
+                                            disabled={unit?.includes("3") ?? false}
                                           />
                                           <label
                                             htmlFor="all-polres"
@@ -566,7 +566,7 @@ export default function CreateDaily() {
                                               <Checkbox
                                                 id={`${list.id}${subDes.id}`}
                                                 checked={
-                                                  unit.includes("3")
+                                                  unit?.includes("3") ?? false
                                                     ? true
                                                     : !!selected[
                                                         `${list.id}${subDes.id}`
@@ -577,7 +577,7 @@ export default function CreateDaily() {
                                                     `${list.id}${subDes.id}`
                                                   )
                                                 }
-                                                disabled={unit.includes("3")}
+                                                disabled={unit?.includes("3") ?? false}
                                               />
                                               <label
                                                 htmlFor={`${list.id}${subDes.id}`}
diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx
index 24c5c0d3..a197ef32 100644
--- a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx
@@ -281,11 +281,11 @@ export default function DetailDaily() {
 
   const output = form.watch("output");
 
-  const isAllChecked = items.every((item) => output?.includes(item.id));
+  const isAllChecked = output && items.every((item) => output.includes(item.id));
 
   const unit = form.watch("unit");
 
-  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+  const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
 
   const handleAllCheckedChange = (checked: boolean | string) => {
     if (checked) {
@@ -301,7 +301,7 @@ export default function DetailDaily() {
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
     form.setValue(
       "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
+      checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
     );
   };
 
@@ -318,11 +318,11 @@ export default function DetailDaily() {
 
   const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
     if (checked) {
-      form.setValue("unit", [...unit, id]);
+      form.setValue("unit", [...(unit ?? []), id]);
     } else {
       if (id == "2") {
         const temp = [];
-        for (const element of unit) {
+        for (const element of unit ?? []) {
           if (element == "1") {
             temp.push("1");
           }
@@ -331,7 +331,7 @@ export default function DetailDaily() {
       } else {
         form.setValue(
           "unit",
-          unit.filter((value) => value !== id)
+          (unit ?? []).filter((value) => value !== id)
         );
       }
     }
@@ -542,14 +542,14 @@ export default function DetailDaily() {
                                         id={list.id}
                                         name={`all${list.id}`}
                                         checked={
-                                          unit.includes("2")
+                                          unit?.includes("2") ?? false
                                             ? true
                                             : !!selected[list.id]
                                         }
                                         onCheckedChange={() =>
                                           handleParentChange(list.id)
                                         }
-                                        disabled={unit.includes("2")}
+                                        disabled={unit?.includes("2") ?? false}
                                       />
                                       <label
                                         htmlFor={list.name}
@@ -564,7 +564,7 @@ export default function DetailDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
+                                              unit?.includes("3") ?? false
                                                 ? true
                                                 : !!selectAll[list.id]
                                             }
@@ -574,7 +574,7 @@ export default function DetailDaily() {
                                                 Boolean(e)
                                               )
                                             }
-                                            disabled={unit.includes("3")}
+                                            disabled={unit?.includes("3") ?? false}
                                           />
                                           <label
                                             htmlFor="all-polres"
@@ -592,7 +592,7 @@ export default function DetailDaily() {
                                               <Checkbox
                                                 id={`${list.id}${subDes.id}`}
                                                 checked={
-                                                  unit.includes("3")
+                                                  unit?.includes("3") ?? false
                                                     ? true
                                                     : !!selected[
                                                         `${list.id}${subDes.id}`
@@ -603,7 +603,7 @@ export default function DetailDaily() {
                                                     `${list.id}${subDes.id}`
                                                   )
                                                 }
-                                                disabled={unit.includes("3")}
+                                                disabled={unit?.includes("3") ?? false}
                                               />
                                               <label
                                                 htmlFor={`${list.id}${subDes.id}`}
diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx
index 160a16a4..2bf69603 100644
--- a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx
+++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx
@@ -294,11 +294,11 @@ export default function EditDaily() {
 
   const output = form.watch("output");
 
-  const isAllChecked = items.every((item) => output?.includes(item.id));
+  const isAllChecked = output && items.every((item) => output.includes(item.id));
 
   const unit = form.watch("unit");
 
-  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+  const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
 
   const handleAllCheckedChange = (checked: boolean | string) => {
     if (checked) {
@@ -314,7 +314,7 @@ export default function EditDaily() {
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
     form.setValue(
       "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
+      checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
     );
   };
 
@@ -331,11 +331,11 @@ export default function EditDaily() {
 
   const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
     if (checked) {
-      form.setValue("unit", [...unit, id]);
+      form.setValue("unit", [...(unit ?? []), id]);
     } else {
       if (id == "2") {
         const temp = [];
-        for (const element of unit) {
+        for (const element of unit ?? []) {
           if (element == "1") {
             temp.push("1");
           }
@@ -344,7 +344,7 @@ export default function EditDaily() {
       } else {
         form.setValue(
           "unit",
-          unit.filter((value) => value !== id)
+          (unit ?? []).filter((value) => value !== id)
         );
       }
     }
@@ -506,7 +506,7 @@ export default function EditDaily() {
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
                                     disabled={
-                                      item.id === "3" && !unit.includes("2")
+                                      item.id === "3" && !(unit?.includes("2") ?? false)
                                     }
                                     onCheckedChange={(checked) =>
                                       handleUnitCheckedChange(item.id, checked)
@@ -550,14 +550,14 @@ export default function EditDaily() {
                                         id={list.id}
                                         name={`all${list.id}`}
                                         checked={
-                                          unit.includes("2")
+                                          unit?.includes("2") ?? false
                                             ? true
                                             : !!selected[list.id]
                                         }
                                         onCheckedChange={() =>
                                           handleParentChange(list.id)
                                         }
-                                        disabled={unit.includes("2")}
+                                        disabled={unit?.includes("2") ?? false}
                                       />
                                       <label
                                         htmlFor={list.name}
@@ -572,7 +572,7 @@ export default function EditDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
+                                              unit?.includes("3") ?? false
                                                 ? true
                                                 : !!selectAll[list.id]
                                             }
@@ -582,7 +582,7 @@ export default function EditDaily() {
                                                 Boolean(e)
                                               )
                                             }
-                                            disabled={unit.includes("3")}
+                                            disabled={unit?.includes("3") ?? false}
                                           />
                                           <label
                                             htmlFor="all-polres"
@@ -600,7 +600,7 @@ export default function EditDaily() {
                                               <Checkbox
                                                 id={`${list.id}${subDes.id}`}
                                                 checked={
-                                                  unit.includes("3")
+                                                  unit?.includes("3") ?? false
                                                     ? true
                                                     : !!selected[
                                                         `${list.id}${subDes.id}`
@@ -611,7 +611,7 @@ export default function EditDaily() {
                                                     `${list.id}${subDes.id}`
                                                   )
                                                 }
-                                                disabled={unit.includes("3")}
+                                                disabled={unit?.includes("3") ?? false}
                                               />
                                               <label
                                                 htmlFor={`${list.id}${subDes.id}`}
diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
index 857fe674..413b1dc2 100644
--- a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
+++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
@@ -264,9 +264,9 @@ export default function CreateDaily() {
   const media = form.watch("media");
   const unit = form.watch("unit");
 
-  const isAllChecked = items.every((item) => output?.includes(item.id));
-  const isAllMediaChecked = medias.every((item) => media?.includes(item.id));
-  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+  const isAllChecked = output && items.every((item) => output.includes(item.id));
+  const isAllMediaChecked = media && medias.every((item) => media.includes(item.id));
+  const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
 
   useEffect(() => {
     async function initState() {
@@ -398,10 +398,8 @@ export default function CreateDaily() {
                                       form.setValue(
                                         "output",
                                         checked
-                                          ? [...output, item.id]
-                                          : output.filter(
-                                              (value) => value !== item.id
-                                            )
+                                          ? [...(output ?? []), item.id]
+                                          : (output ?? []).filter((value) => value !== item.id)
                                       );
                                     }}
                                   />
@@ -464,16 +462,14 @@ export default function CreateDaily() {
                                     checked={unit?.includes(item.id)}
                                     disabled={
                                       item.id === "polres" &&
-                                      !unit.includes("polda")
+                                      !(unit?.includes("polda") ?? false)
                                     }
                                     onCheckedChange={(checked) => {
                                       form.setValue(
                                         "unit",
                                         checked
-                                          ? [...unit, item.id]
-                                          : unit.filter(
-                                              (value) => value !== item.id
-                                            )
+                                          ? [...(unit ?? []), item.id]
+                                          : (unit ?? []).filter((value) => value !== item.id)
                                       );
                                     }}
                                   />
@@ -515,14 +511,14 @@ export default function CreateDaily() {
                                         id={list.id}
                                         name={`all${list.id}`}
                                         checked={
-                                          unit.includes("2")
+                                          unit?.includes("2") ?? false
                                             ? true
                                             : !!selected[list.id]
                                         }
                                         onCheckedChange={() =>
                                           handleParentChange(list.id)
                                         }
-                                        disabled={unit.includes("2")}
+                                        disabled={unit?.includes("2") ?? false}
                                       />
                                       <label
                                         htmlFor={list.name}
@@ -537,7 +533,7 @@ export default function CreateDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
+                                              unit?.includes("3") ?? false
                                                 ? true
                                                 : !!selectAll[list.id]
                                             }
@@ -547,7 +543,7 @@ export default function CreateDaily() {
                                                 Boolean(e)
                                               )
                                             }
-                                            disabled={unit.includes("3")}
+                                            disabled={unit?.includes("3") ?? false}
                                           />
                                           <label
                                             htmlFor="all-polres"
@@ -565,7 +561,7 @@ export default function CreateDaily() {
                                               <Checkbox
                                                 id={`${list.id}${subDes.id}`}
                                                 checked={
-                                                  unit.includes("3")
+                                                  unit?.includes("3") ?? false
                                                     ? true
                                                     : !!selected[
                                                         `${list.id}${subDes.id}`
@@ -576,7 +572,7 @@ export default function CreateDaily() {
                                                     `${list.id}${subDes.id}`
                                                   )
                                                 }
-                                                disabled={unit.includes("3")}
+                                                disabled={unit?.includes("3") ?? false}
                                               />
                                               <label
                                                 htmlFor={`${list.id}${subDes.id}`}
@@ -648,8 +644,8 @@ export default function CreateDaily() {
                                       form.setValue(
                                         "media",
                                         checked
-                                          ? [...media, item.id]
-                                          : media.filter(
+                                          ? [...(media ?? []), item.id]
+                                          : (media ?? []).filter(
                                               (value) => value !== item.id
                                             )
                                       );
diff --git a/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx b/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
index 52d893b7..7b871582 100644
--- a/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
+++ b/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -61,6 +62,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useTranslations } from "next-intl";
+import { Label } from "@/components/ui/label";
 
 type StatusFilter = string[];
 
@@ -87,7 +89,8 @@ const ContentTable = () => {
   const userLevelId = getCookiesDecrypt("ulie");
   const [categories, setCategories] = React.useState<string[]>();
   const [categoryFilter, setCategoryFilter] = React.useState<string[]>([]);
-  const [statusFilter, setStatusFilter] = React.useState<StatusFilter>([]);
+  // const [statusFilter, setStatusFilter] = React.useState<StatusFilter>([]);
+  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDateString, setStartDateString] = React.useState<string>("");
   const [endDateString, setEndDateString] = React.useState<string>("");
   const [filterByCreator, setFilterByCreator] = React.useState<string>("");
@@ -168,6 +171,14 @@ const ContentTable = () => {
     table.getColumn("judul")?.setFilterValue(e.target.value);
   };
 
+  function handleStatusCheckboxChange(value: any) {
+    setStatusFilter((prev: any) =>
+      prev.includes(value)
+        ? prev.filter((status: any) => status !== value)
+        : [...prev, value]
+    );
+  }
+
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
@@ -185,43 +196,88 @@ const ContentTable = () => {
             />
           </InputGroup>
         </div>
-        <div className=" items-center gap-3 w-full md:w-[200px]">
-          {/* <Select
-            onValueChange={(value) => {
-              setStatusFilter([value]);
-            }}
-          >
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Select a Filter Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Status</SelectLabel>
-                <SelectItem value="1">Menunggu Review</SelectItem>
-                <SelectItem value="2">Diterima</SelectItem>
-                <SelectItem value="3">Minta Update</SelectItem>
-                <SelectItem value="4">Ditolak</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select> */}
-          <Select
-            onValueChange={(value) => {
-              setFileTypeFilter([value]);
-            }}
-          >
-            <SelectTrigger className="w-full lg:w-[180px]">
-              <SelectValue placeholder={t("selectFilter")} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Filter</SelectLabel>
-                <SelectItem value="1">{t("image")}</SelectItem>
-                <SelectItem value="2">{t("audio-visual")}</SelectItem>
-                <SelectItem value="3">{t("text")}</SelectItem>
-                <SelectItem value="4">Audio</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+        <div className="flex flex-row gap-3">
+          <div className=" items-center gap-3 w-full md:w-[152px] border border-black rounded-lg">
+            <Select
+              onValueChange={(value) => {
+                setFileTypeFilter([value]);
+              }}
+            >
+              <SelectTrigger className="w-full lg:w-[150px]">
+                <SelectValue placeholder={t("selectFilter")} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Filter</SelectLabel>
+                  <SelectItem value="1">{t("image")}</SelectItem>
+                  <SelectItem value="2">{t("audio-visual")}</SelectItem>
+                  <SelectItem value="3">{t("text")}</SelectItem>
+                  <SelectItem value="4">{t("audio")}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto" size="md">
+                Filter <ChevronDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="w-64 h-[150px] overflow-y-auto"
+            >
+              <Label className="ml-2 mt-2">Status</Label>
+              <div className="flex items-center px-4 py-1">
+                <input
+                  type="checkbox"
+                  id="status-2"
+                  className="mr-2"
+                  checked={statusFilter.includes(1)}
+                  onChange={() => handleStatusCheckboxChange(1)}
+                />
+                <label htmlFor="status-2" className="text-sm">
+                  Menunggu Review
+                </label>
+              </div>
+              <div className="flex items-center px-4 py-1">
+                <input
+                  type="checkbox"
+                  id="status-2"
+                  className="mr-2"
+                  checked={statusFilter.includes(2)}
+                  onChange={() => handleStatusCheckboxChange(2)}
+                />
+                <label htmlFor="status-2" className="text-sm">
+                  Diterima
+                </label>
+              </div>
+              <div className="flex items-center px-4 py-1">
+                <input
+                  type="checkbox"
+                  id="status-3"
+                  className="mr-2"
+                  checked={statusFilter.includes(3)}
+                  onChange={() => handleStatusCheckboxChange(3)}
+                />
+                <label htmlFor="status-3" className="text-sm">
+                  Minta Update
+                </label>
+              </div>
+              <div className="flex items-center px-4 py-1">
+                <input
+                  type="checkbox"
+                  id="status-4"
+                  className="mr-2"
+                  checked={statusFilter.includes(4)}
+                  onChange={() => handleStatusCheckboxChange(4)}
+                />
+                <label htmlFor="status-4" className="text-sm">
+                  Ditolak
+                </label>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
       <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/supervisor/faq/components/create.tsx b/app/[locale]/(protected)/supervisor/faq/components/create.tsx
index a5af317c..4000890b 100644
--- a/app/[locale]/(protected)/supervisor/faq/components/create.tsx
+++ b/app/[locale]/(protected)/supervisor/faq/components/create.tsx
@@ -81,8 +81,8 @@ export default function CreateSpvFAQModal() {
   });
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
   );
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx
index 84120329..55f2d76d 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/filter/page.tsx
@@ -98,7 +98,6 @@ export default function FilterPage() {
     setSearchTitle(title);
     setCategoryFilter(category ? category.split("&") : []);
     setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
-
   }, [searchParams]);
 
   useEffect(() => {
@@ -120,7 +119,7 @@ export default function FilterPage() {
       "",
       isInt,
       pageNumber
-    ); 
+    );
 
     const content = response?.data?.data?.content || [];
     const total = response?.data?.data?.totalPages || 1;
@@ -437,10 +436,21 @@ export default function FilterPage() {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableContent",
-          { defaultValue: "Downloadable ContentS" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
index 38c07089..9e7912b7 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
@@ -486,10 +486,27 @@ const FilterPage = () => {
       <div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
-          Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span>
+          Audio {">"}{" "}
+          <span className="font-bold">
+            {t("allAudio", { defaultValue: "All Audio" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -529,7 +546,9 @@ const FilterPage = () => {
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 onChange={(date) => setMonthYearFilter(date)}
                 dateFormat="MM | yyyy"
-                placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                placeholderText={t("selectYear", {
+                  defaultValue: "Select Year",
+                })}
                 showMonthYearPicker
               />
             </div>
@@ -547,7 +566,9 @@ const FilterPage = () => {
                   onChange={(update) => {
                     setDateRange(update);
                   }}
-                  placeholderText={t("searchDate", { defaultValue: "Search Date" })}
+                  placeholderText={t("searchDate", {
+                    defaultValue: "Search Date",
+                  })}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
                 <div className="flex items-center">
@@ -707,14 +728,20 @@ const FilterPage = () => {
         <div className="w-full pr-4 lg:pr-16 pb-4">
           <Reveal>
             <div className="flex flex-col items-end mb-4">
-              <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2>
+              <h2 className="text-lg font-semibold">
+                {t("sortBy", { defaultValue: "Sort By" })}{" "}
+              </h2>
               <select
                 defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                 onChange={(e) => handleSorting(e)}
                 className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
               >
-                <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                <option value="latest">
+                  {t("latest", { defaultValue: "Latest" })}
+                </option>
+                <option value="popular">
+                  {t("mostPopular", { defaultValue: "Most Popular" })}
+                </option>
               </select>
             </div>
 
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
index de7f4a92..677c79a6 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
@@ -502,10 +502,27 @@ const FilterPage = () => {
       <div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
-          {t("text", { defaultValue: "Text" })} {">"} <span className="font-bold">{t("allText", { defaultValue: "All Text" })}</span>
+          {t("text", { defaultValue: "Text" })} {">"}{" "}
+          <span className="font-bold">
+            {t("allText", { defaultValue: "All Text" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableText", { defaultValue: "Downloadable Text" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -545,7 +562,9 @@ const FilterPage = () => {
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 onChange={(date) => setMonthYearFilter(date)}
                 dateFormat="MM | yyyy"
-                placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                placeholderText={t("selectYear", {
+                  defaultValue: "Select Year",
+                })}
                 showMonthYearPicker
               />
             </div>
@@ -563,7 +582,9 @@ const FilterPage = () => {
                   onChange={(update) => {
                     setDateRange(update);
                   }}
-                  placeholderText={t("selectDate", { defaultValue: "Select Date" })}
+                  placeholderText={t("selectDate", {
+                    defaultValue: "Select Date",
+                  })}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
                 <div className="flex items-center">
@@ -769,14 +790,20 @@ const FilterPage = () => {
           <Reveal>
             <div className="flex-1">
               <div className="flex flex-col items-end mb-4">
-                <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
+                <h2 className="text-lg font-semibold">
+                  {t("sortBy", { defaultValue: "Sort By" })}
+                </h2>
                 <select
                   defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                   onChange={(e) => handleSorting(e)}
                   className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 >
-                  <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                  <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                  <option value="latest">
+                    {t("latest", { defaultValue: "Latest" })}
+                  </option>
+                  <option value="popular">
+                    {t("mostPopular", { defaultValue: "Most Popular" })}
+                  </option>
                 </select>
               </div>
 
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
index 719beedb..b6b6d11c 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
@@ -503,10 +503,26 @@ const FilterPage = () => {
         <p> {t("image", { defaultValue: "Image" })}</p>
         {">"}
         <p>
-          <span className="font-bold">{t("allImage", { defaultValue: "All Image" })}</span>
+          <span className="font-bold">
+            {t("allImage", { defaultValue: "All Image" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -542,7 +558,9 @@ const FilterPage = () => {
                   onKeyDown={handleKeyDown}
                   type="text"
                   id="search"
-                  placeholder={t("searchTitle", { defaultValue: "Search Title" })}
+                  placeholder={t("searchTitle", {
+                    defaultValue: "Search Title",
+                  })}
                   className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 />
               </div>
@@ -556,7 +574,9 @@ const FilterPage = () => {
                   className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                   onChange={(date) => setMonthYearFilter(date)}
                   dateFormat="MM | yyyy"
-                  placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                  placeholderText={t("selectYear", {
+                    defaultValue: "Select Year",
+                  })}
                   showMonthYearPicker
                 />
               </div>
@@ -574,7 +594,9 @@ const FilterPage = () => {
                     onChange={(update) => {
                       setDateRange(update);
                     }}
-                    placeholderText={t("selectDate", { defaultValue: "Select Date" })}
+                    placeholderText={t("selectDate", {
+                      defaultValue: "Select Date",
+                    })}
                     onCalendarClose={() => setCalenderState(!calenderState)}
                   />
                   <div className="flex items-center">
@@ -753,14 +775,20 @@ const FilterPage = () => {
           <Reveal>
             <div className="w-full">
               <div className="flex flex-col items-end mb-4">
-                <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
+                <h2 className="text-lg font-semibold">
+                  {t("sortBy", { defaultValue: "Sort By" })}
+                </h2>
                 <select
                   defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                   onChange={(e) => handleSorting(e)}
                   className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 >
-                  <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                  <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                  <option value="latest">
+                    {t("latest", { defaultValue: "Latest" })}
+                  </option>
+                  <option value="popular">
+                    {t("mostPopular", { defaultValue: "Most Popular" })}
+                  </option>
                 </select>
               </div>
 
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
index 38c24353..91aa8c5b 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
@@ -499,10 +499,27 @@ const FilterPage = () => {
         <p>
           {" "}
           {t("video", { defaultValue: "Video" })}&nbsp;
-          {">"} <span className="font-bold">{t("allVideo", { defaultValue: "All Video" })}</span>
+          {">"}{" "}
+          <span className="font-bold">
+            {t("allVideo", { defaultValue: "All Video" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableVideo", { defaultValue: "Downloadable Video" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -542,7 +559,9 @@ const FilterPage = () => {
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 onChange={(date) => setMonthYearFilter(date)}
                 dateFormat="MM | yyyy"
-                placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                placeholderText={t("selectYear", {
+                  defaultValue: "Select Year",
+                })}
                 showMonthYearPicker
               />
             </div>
@@ -560,7 +579,9 @@ const FilterPage = () => {
                   onChange={(update) => {
                     setDateRange(update);
                   }}
-                  placeholderText={t("selectDate", { defaultValue: "Select Date" })}
+                  placeholderText={t("selectDate", {
+                    defaultValue: "Select Date",
+                  })}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
                 <div className="flex items-center">
@@ -766,14 +787,20 @@ const FilterPage = () => {
           <Reveal>
             <div className="w-full">
               <div className="flex flex-col items-end mb-4">
-                <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
+                <h2 className="text-lg font-semibold">
+                  {t("sortBy", { defaultValue: "Sort By" })}
+                </h2>
                 <select
                   defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                   onChange={(e) => handleSorting(e)}
                   className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 >
-                  <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                  <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                  <option value="latest">
+                    {t("latest", { defaultValue: "Latest" })}
+                  </option>
+                  <option value="popular">
+                    {t("mostPopular", { defaultValue: "Most Popular" })}
+                  </option>
                 </select>
               </div>
 
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
index c107f54b..68420eca 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
@@ -319,7 +319,7 @@ const FilterPage = () => {
     }
   }
 
-   const handleCategoryFilter = (e: boolean, id: string) => {
+  const handleCategoryFilter = (e: boolean, id: string) => {
     let filter = [...categoryFilter];
 
     if (e) {
@@ -486,10 +486,27 @@ const FilterPage = () => {
       <div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
-          Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span>
+          Audio {">"}{" "}
+          <span className="font-bold">
+            {t("allAudio", { defaultValue: "All Audio" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -529,7 +546,9 @@ const FilterPage = () => {
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 onChange={(date) => setMonthYearFilter(date)}
                 dateFormat="MM | yyyy"
-                placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                placeholderText={t("selectYear", {
+                  defaultValue: "Select Year",
+                })}
                 showMonthYearPicker
               />
             </div>
@@ -547,7 +566,9 @@ const FilterPage = () => {
                   onChange={(update) => {
                     setDateRange(update);
                   }}
-                  placeholderText={t("searchDate", { defaultValue: "Search Date" })}
+                  placeholderText={t("searchDate", {
+                    defaultValue: "Search Date",
+                  })}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
                 <div className="flex items-center">
@@ -707,14 +728,20 @@ const FilterPage = () => {
         <div className="w-full pr-4 lg:pr-16 pb-4">
           <Reveal>
             <div className="flex flex-col items-end mb-4">
-              <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2>
+              <h2 className="text-lg font-semibold">
+                {t("sortBy", { defaultValue: "Sort By" })}{" "}
+              </h2>
               <select
                 defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                 onChange={(e) => handleSorting(e)}
                 className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
               >
-                <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                <option value="latest">
+                  {t("latest", { defaultValue: "Latest" })}
+                </option>
+                <option value="popular">
+                  {t("mostPopular", { defaultValue: "Most Popular" })}
+                </option>
               </select>
             </div>
 
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
index e35cde2e..a49d7d23 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
@@ -492,10 +492,27 @@ const FilterPage = () => {
       <div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
-          {t("text", { defaultValue: "Text" })} {">"} <span className="font-bold">{t("allText", { defaultValue: "All Text" })}</span>
+          {t("text", { defaultValue: "Text" })} {">"}{" "}
+          <span className="font-bold">
+            {t("allText", { defaultValue: "All Text" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableText", { defaultValue: "Downloadable Text" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -535,7 +552,9 @@ const FilterPage = () => {
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 onChange={(date) => setMonthYearFilter(date)}
                 dateFormat="MM | yyyy"
-                placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                placeholderText={t("selectYear", {
+                  defaultValue: "Select Year",
+                })}
                 showMonthYearPicker
               />
             </div>
@@ -553,7 +572,9 @@ const FilterPage = () => {
                   onChange={(update) => {
                     setDateRange(update);
                   }}
-                  placeholderText={t("selectDate", { defaultValue: "Select Date" })}
+                  placeholderText={t("selectDate", {
+                    defaultValue: "Select Date",
+                  })}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
                 <div className="flex items-center">
@@ -759,14 +780,20 @@ const FilterPage = () => {
           <Reveal>
             <div className="flex-1">
               <div className="flex flex-col items-end mb-4">
-                <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
+                <h2 className="text-lg font-semibold">
+                  {t("sortBy", { defaultValue: "Sort By" })}
+                </h2>
                 <select
                   defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                   onChange={(e) => handleSorting(e)}
                   className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 >
-                  <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                  <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                  <option value="latest">
+                    {t("latest", { defaultValue: "Latest" })}
+                  </option>
+                  <option value="popular">
+                    {t("mostPopular", { defaultValue: "Most Popular" })}
+                  </option>
                 </select>
               </div>
 
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
index b634d442..b76aec48 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
@@ -303,7 +303,7 @@ const FilterPage = () => {
     }
   }
 
-   const handleCategoryFilter = (e: boolean, id: string) => {
+  const handleCategoryFilter = (e: boolean, id: string) => {
     let filter = [...categoryFilter];
 
     if (e) {
@@ -469,10 +469,27 @@ const FilterPage = () => {
       <div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
-          {t("image", { defaultValue: "Image" })} {">"} <span className="font-bold">{t("allImage", { defaultValue: "All Image" })}</span>
+          {t("image", { defaultValue: "Image" })} {">"}{" "}
+          <span className="font-bold">
+            {t("allImage", { defaultValue: "All Image" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -507,7 +524,9 @@ const FilterPage = () => {
                   onKeyDown={handleKeyDown}
                   type="text"
                   id="search"
-                  placeholder={t("searchTitle", { defaultValue: "Search Title" })}
+                  placeholder={t("searchTitle", {
+                    defaultValue: "Search Title",
+                  })}
                   className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 />
               </div>
@@ -521,7 +540,9 @@ const FilterPage = () => {
                   className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                   onChange={(date) => setMonthYearFilter(date)}
                   dateFormat="MM | yyyy"
-                  placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                  placeholderText={t("selectYear", {
+                    defaultValue: "Select Year",
+                  })}
                   showMonthYearPicker
                 />
               </div>
@@ -539,7 +560,9 @@ const FilterPage = () => {
                     onChange={(update) => {
                       setDateRange(update);
                     }}
-                    placeholderText={t("selectDate", { defaultValue: "Select Date" })}
+                    placeholderText={t("selectDate", {
+                      defaultValue: "Select Date",
+                    })}
                     onCalendarClose={() => setCalenderState(!calenderState)}
                   />
                   <div className="flex items-center">
@@ -718,14 +741,20 @@ const FilterPage = () => {
           <Reveal>
             <div className="flex-1">
               <div className="flex flex-col items-end mb-4">
-                <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
+                <h2 className="text-lg font-semibold">
+                  {t("sortBy", { defaultValue: "Sort By" })}
+                </h2>
                 <select
                   defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                   onChange={(e) => handleSorting(e)}
                   className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 >
-                  <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                  <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                  <option value="latest">
+                    {t("latest", { defaultValue: "Latest" })}
+                  </option>
+                  <option value="popular">
+                    {t("mostPopular", { defaultValue: "Most Popular" })}
+                  </option>
                 </select>
               </div>
 
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
index 99827a6e..ca5a093d 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
@@ -487,10 +487,27 @@ const FilterPage = () => {
         <p>
           {" "}
           {t("video", { defaultValue: "Video" })}&nbsp;
-          {">"} <span className="font-bold">{t("allVideo", { defaultValue: "All Video" })}</span>
+          {">"}{" "}
+          <span className="font-bold">
+            {t("allVideo", { defaultValue: "All Video" })}
+          </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableVideo", { defaultValue: "Downloadable Video" })}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
@@ -530,7 +547,9 @@ const FilterPage = () => {
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 onChange={(date) => setMonthYearFilter(date)}
                 dateFormat="MM | yyyy"
-                placeholderText={t("selectYear", { defaultValue: "Select Year" })}
+                placeholderText={t("selectYear", {
+                  defaultValue: "Select Year",
+                })}
                 showMonthYearPicker
               />
             </div>
@@ -548,7 +567,9 @@ const FilterPage = () => {
                   onChange={(update) => {
                     setDateRange(update);
                   }}
-                  placeholderText={t("selectDate", { defaultValue: "Select Date" })}
+                  placeholderText={t("selectDate", {
+                    defaultValue: "Select Date",
+                  })}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
                 <div className="flex items-center">
@@ -754,14 +775,20 @@ const FilterPage = () => {
           <Reveal>
             <div className="flex-1">
               <div className="flex flex-col items-end mb-4">
-                <h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
+                <h2 className="text-lg font-semibold">
+                  {t("sortBy", { defaultValue: "Sort By" })}
+                </h2>
                 <select
                   defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
                   onChange={(e) => handleSorting(e)}
                   className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                 >
-                  <option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
-                  <option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
+                  <option value="latest">
+                    {t("latest", { defaultValue: "Latest" })}
+                  </option>
+                  <option value="popular">
+                    {t("mostPopular", { defaultValue: "Most Popular" })}
+                  </option>
                 </select>
               </div>
 
diff --git a/app/[locale]/(public)/all/filter/page.tsx b/app/[locale]/(public)/all/filter/page.tsx
index 84120329..55f2d76d 100644
--- a/app/[locale]/(public)/all/filter/page.tsx
+++ b/app/[locale]/(public)/all/filter/page.tsx
@@ -98,7 +98,6 @@ export default function FilterPage() {
     setSearchTitle(title);
     setCategoryFilter(category ? category.split("&") : []);
     setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
-
   }, [searchParams]);
 
   useEffect(() => {
@@ -120,7 +119,7 @@ export default function FilterPage() {
       "",
       isInt,
       pageNumber
-    ); 
+    );
 
     const content = response?.data?.data?.content || [];
     const total = response?.data?.data?.totalPages || 1;
@@ -437,10 +436,21 @@ export default function FilterPage() {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableContent",
-          { defaultValue: "Downloadable ContentS" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx
index 63b89649..b5efaee0 100644
--- a/app/[locale]/(public)/audio/filter/page.tsx
+++ b/app/[locale]/(public)/audio/filter/page.tsx
@@ -494,10 +494,21 @@ const FilterPage = () => {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableAudio",
-          { defaultValue: "Downloadable Audio" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx
index 22d64462..6c9b933d 100644
--- a/app/[locale]/(public)/document/filter/page.tsx
+++ b/app/[locale]/(public)/document/filter/page.tsx
@@ -510,10 +510,21 @@ const FilterPage = () => {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableText",
-          { defaultValue: "Downloadable Text" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 46b3d475..e7d11047 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -516,10 +516,21 @@ const FilterPage = () => {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableImage",
-          { defaultValue: "Downloadable Image" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       <div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
diff --git a/app/[locale]/(public)/regional/filter/page.tsx b/app/[locale]/(public)/regional/filter/page.tsx
index a53cc99d..df96578f 100644
--- a/app/[locale]/(public)/regional/filter/page.tsx
+++ b/app/[locale]/(public)/regional/filter/page.tsx
@@ -425,10 +425,22 @@ export default function FilterPage() {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableContent",
-          { defaultValue: "Downloadable ContentS" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${
+              totalContent ?? 0
+            } ${t("downloadableImage", {
+              defaultValue: "artikel berisi Foto yang dapat diunduh",
+            })}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 8cfd44c0..3aa985dd 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -511,10 +511,21 @@ const FilterPage = () => {
           </span>
         </p>
         <p className="font-bold">|</p>
-        <p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
-          "downloadableVideo",
-          { defaultValue: "Downloadable Video" }
-        )}`}</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
       </div>
 
       {/* Left */}
diff --git a/components/form/content/audio-update-form.tsx b/components/form/content/audio-update-form.tsx
index 90fa0a26..ad301a00 100644
--- a/components/form/content/audio-update-form.tsx
+++ b/components/form/content/audio-update-form.tsx
@@ -571,6 +571,7 @@ export default function FormAudioUpdate() {
       </div>
 
       <Button
+        type="button"
         size="icon"
         color="destructive"
         variant="outline"
diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx
index 5553e869..40e748de 100644
--- a/components/form/content/image-update-form.tsx
+++ b/components/form/content/image-update-form.tsx
@@ -550,6 +550,7 @@ export default function FormImageUpdate() {
       </div>
 
       <Button
+        type="button"
         size="icon"
         color="destructive"
         variant="outline"
diff --git a/components/form/content/teks-update-form.tsx b/components/form/content/teks-update-form.tsx
index fdf35ac6..29f34bbc 100644
--- a/components/form/content/teks-update-form.tsx
+++ b/components/form/content/teks-update-form.tsx
@@ -553,6 +553,7 @@ export default function FormTeksUpdate() {
       </div>
 
       <Button
+        type="button"
         size="icon"
         color="destructive"
         variant="outline"
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 36f11fd0..f51961d6 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -627,6 +627,7 @@ export default function FormVideoUpdate() {
       </div>
 
       <Button
+        type="button"
         size="icon"
         color="destructive"
         variant="outline"
diff --git a/messages/en.json b/messages/en.json
index 62c08573..4a5ce2c0 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -643,7 +643,7 @@
   "FilterPage": {
     "downloadableContent": "Downloadable Content",
     "content": "Content",
-    "allContent":"All Content",
+    "allContent": "All Content",
     "image": "Image",
     "video": "Video",
     "text": "Text",
@@ -666,7 +666,8 @@
     "categories": "Categories",
     "sortBy": "Sort by",
     "latest": "Latest",
-    "mostPopular": "Most Popular"
+    "mostPopular": "Most Popular",
+    "search-results": "Search Result"
   },
   "Planning": {
     "planning": "Planning",
diff --git a/messages/in.json b/messages/in.json
index 3f5031a1..d000076a 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -667,7 +667,8 @@
     "categories": "Kategori",
     "sortBy": "Urutkan Berdasarkan",
     "latest": "Terbaru",
-    "mostPopular": "Terpopuler"
+    "mostPopular": "Terpopuler",
+    "search-results": "Hasil Pencarian"
   },
   "Planning": {
     "planning": "Perencanaan",