diff --git a/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
index b6bfa497..69d40134 100644
--- a/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
+++ b/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
@@ -49,11 +49,11 @@ const columns: ColumnDef<any>[] = [
     header: "Jumlah Amplifikasi",
     cell: ({ row }) => <span>{row.getValue("link")}</span>,
   },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => <span>{row.getValue("status")}</span>,
-  },
+  // {
+  //   accessorKey: "status",
+  //   header: "Status",
+  //   cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  // },
   {
     accessorKey: "date",
     header: "Tanggal Penarikan",
@@ -77,10 +77,17 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/contributor/content/audio/detail/${row.original.id}`}>
+            <Link
+              href={`/contributor/content/${
+                row.original.mediaUpload.fileType.secondaryName &&
+                row.original.mediaUpload.fileType.secondaryName.toLowerCase()
+              }/detail/${row.original.mediaUpload.id}`}
+            >
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
-                View
+                View{" "}
+                {row.original.mediaUpload.fileType.secondaryName &&
+                  row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
               </DropdownMenuItem>
             </Link>
           </DropdownMenuContent>
diff --git a/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
index e60c0b89..33d03582 100644
--- a/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
+++ b/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
@@ -9,7 +9,7 @@ import {
   listDataTracking,
   mediaTrackingSave,
 } from "@/service/media-tracking/media-tracking";
-import { error, loading } from "@/lib/swal";
+import { error } from "@/lib/swal";
 import { toast } from "sonner";
 import {
   DropdownMenu,
@@ -20,31 +20,32 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { PaginationState } from "@tanstack/react-table";
 import page from "../page";
+import CustomPagination from "@/components/table/custom-pagination";
+import { close, loading } from "@/config/swal";
 
 export default function TrackingBeritaCard() {
   const [search, setSearch] = useState("");
   const [content, setContent] = useState<any[]>([]);
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [page, setPage] = React.useState(1);
-  const [showData, setShowData] = React.useState("10");
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: Number(showData),
-  });
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [showData, setShowData] = useState("6");
 
   useEffect(() => {
     initFecth();
-  }, [showData]);
+  }, [showData, page]);
 
   const initFecth = async () => {
+    loading();
     const response = await listDataTracking(showData, page - 1);
     const data = response?.data?.data;
     const newData = data?.content;
+    setTotalPage(data?.totalPages || 1);
     newData.forEach((item: any, index: number) => {
       item.no = (page - 1) * Number(showData) + index + 1;
     });
     setContent(response?.data?.data?.content || []);
+    close();
   };
 
   const fecthAll = async (keyword: string) => {
@@ -117,17 +118,17 @@ export default function TrackingBeritaCard() {
                   value={showData}
                   onValueChange={setShowData}
                 >
-                  <DropdownMenuRadioItem value="10">
-                    1 - 10 Data
+                  <DropdownMenuRadioItem value="12">
+                    1 - 6 Data
                   </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="50">
-                    1 - 50 Data
+                  <DropdownMenuRadioItem value="12">
+                    1 - 12 Data
                   </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="100">
-                    1 - 100 Data
+                  <DropdownMenuRadioItem value="60">
+                    1 - 60 Data
                   </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="250">
-                    1 - 250 Data
+                  <DropdownMenuRadioItem value="120">
+                    1 - 120 Data
                   </DropdownMenuRadioItem>
                 </DropdownMenuRadioGroup>
               </DropdownMenuContent>
@@ -150,48 +151,40 @@ export default function TrackingBeritaCard() {
         )}
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          {content.map((item: any) => (
-            <Card
-              key={item.id}
-              className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
-              onClick={() => handleSelect(item.id)}
-            >
-              <img
-                src={item.thumbnailLink}
-                alt={item.title}
-                className="w-full h-[300px] object-cover"
-              />
-              <div className="absolute top-2 left-2">
-                <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
-                  {selectedItems.includes(item.id) && (
-                    <div className="w-3 h-3 bg-blue-600 rounded-sm" />
-                  )}
+          {content?.length > 1 &&
+            content.map((item: any) => (
+              <Card
+                key={item.id}
+                className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
+                onClick={() => handleSelect(item.id)}
+              >
+                <img
+                  src={item.thumbnailLink}
+                  alt={item.title}
+                  className="w-full h-[300px] object-cover"
+                />
+                <div className="absolute top-2 left-2">
+                  <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
+                    {selectedItems.includes(item.id) && (
+                      <div className="w-3 h-3 bg-blue-600 rounded-sm" />
+                    )}
+                  </div>
                 </div>
-              </div>
-              <p className="p-2 text-sm font-medium text-gray-800 truncate">
-                {item.title}
-              </p>
-            </Card>
-          ))}
+                <p className="p-2 text-sm font-medium text-gray-800 truncate">
+                  {item.title}
+                </p>
+              </Card>
+            ))}
         </div>
-
-        <div className="flex justify-center items-center gap-2 mt-4">
-          <Button
-            size="icon"
-            variant="ghost"
-            disabled={currentPage === 1}
-            onClick={() => setCurrentPage((p) => p - 1)}
-          >
-            <ChevronLeft className="w-4 h-4" />
-          </Button>
-          <div className="px-3 py-1 rounded-full border">{currentPage}</div>
-          <Button
-            size="icon"
-            variant="ghost"
-            onClick={() => setCurrentPage((p) => p + 1)}
-          >
-            <ChevronRight className="w-4 h-4" />
-          </Button>
+        <div className="mt-3">
+          {content && content?.length > 0 ? (
+            <CustomPagination
+              totalPage={totalPage}
+              onPageChange={(data) => setPage(data)}
+            />
+          ) : (
+            <p>No Data</p>
+          )}
         </div>
       </div>
     </Card>
diff --git a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
index 5b57778c..44d98ec7 100644
--- a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
@@ -69,6 +69,7 @@ import { data } from "jquery";
 import { useToast } from "@/components/ui/use-toast";
 import { setBanner } from "@/service/settings/settings";
 import { id } from "date-fns/locale";
+import CustomPagination from "@/components/table/custom-pagination";
 
 const ContentListBanner = () => {
   const router = useRouter();
@@ -120,10 +121,10 @@ const ContentListBanner = () => {
 
   React.useEffect(() => {
     fetchData();
-    setPagination({
-      pageIndex: 0,
-      pageSize: Number(showData),
-    });
+    // setPagination({
+    //   pageIndex: 0,
+    //   pageSize: Number(showData),
+    // });
   }, [page, showData]);
 
   async function fetchData() {
@@ -398,10 +399,15 @@ const ContentListBanner = () => {
             </div>
           ))}
         </div>
-        <div className="flex justify-center mt-6">
-          <div className="border rounded px-3 py-1 text-sm text-gray-600">
-            1
-          </div>
+        <div className="mt-3">
+          {data && data?.length > 0 ? (
+            <CustomPagination
+              totalPage={totalPage}
+              onPageChange={(data) => setPage(data)}
+            />
+          ) : (
+            <p>No Data</p>
+          )}
         </div>
       </div>
     </>
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/component/column.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/component/column.tsx
index 09ef5cd2..9fd2e03b 100644
--- a/app/[locale]/(protected)/admin/settings/setting-tracking/component/column.tsx
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/component/column.tsx
@@ -122,10 +122,22 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <DetailSettingTracking id={row.original.id} isDetail={true} />
-
-              <UpdateSettingTracking id={row.original.id} isUpdate={true} />
-
+              <Link
+                href={`/admin/settings/setting-tracking/detail/${row.original.id}`}
+              >
+                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                  <Eye className="w-4 h-4 me-1.5" />
+                  View
+                </DropdownMenuItem>
+              </Link>
+              <Link
+                href={`/admin/settings/setting-tracking/update/${row.original.id}`}
+              >
+                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                  <SquarePen className="w-4 h-4 me-1.5" />
+                  Edit
+                </DropdownMenuItem>
+              </Link>
               <DropdownMenuItem
                 onClick={() => handleDeleteMedia(row.original.id)}
                 className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/component/create.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/component/create.tsx
index a378f474..90544ee2 100644
--- a/app/[locale]/(protected)/admin/settings/setting-tracking/component/create.tsx
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/component/create.tsx
@@ -1,141 +1,141 @@
-"use client";
+// "use client";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { useRouter } from "@/i18n/routing";
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import { getUserRoles, postCategory } from "@/service/settings/settings";
-import { Fragment, useEffect, useState } from "react";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { getCookiesDecrypt } from "@/lib/utils";
-import Cookies from "js-cookie";
-import { useTranslations } from "next-intl";
+// import { Button } from "@/components/ui/button";
+// import {
+//   Dialog,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogTitle,
+//   DialogTrigger,
+// } from "@/components/ui/dialog";
+// import { z } from "zod";
+// import { useForm } from "react-hook-form";
+// import { zodResolver } from "@hookform/resolvers/zod";
+// import {
+//   Form,
+//   FormControl,
+//   FormDescription,
+//   FormField,
+//   FormItem,
+//   FormLabel,
+//   FormMessage,
+// } from "@/components/ui/form";
+// import { useRouter } from "@/i18n/routing";
+// import { Input } from "@/components/ui/input";
+// import { Checkbox } from "@/components/ui/checkbox";
+// import { getUserRoles, postCategory } from "@/service/settings/settings";
+// import { Fragment, useEffect, useState } from "react";
+// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+// import { Icon } from "@iconify/react/dist/iconify.js";
+// import { Textarea } from "@/components/ui/textarea";
+// import { close, error, loading } from "@/config/swal";
+// import { useToast } from "@/components/ui/use-toast";
+// import { stringify } from "querystring";
+// import { useDropzone } from "react-dropzone";
+// import { CloudUpload } from "lucide-react";
+// import Image from "next/image";
+// import { Upload } from "tus-js-client";
+// import { getCookiesDecrypt } from "@/lib/utils";
+// import Cookies from "js-cookie";
+// import { useTranslations } from "next-intl";
 
-const wilayahList = [
-  { id: "mabes", label: "Mabes" },
-  { id: "polda", label: "Polda" },
-  { id: "satker", label: "Satker" },
-];
+// const wilayahList = [
+//   { id: "mabes", label: "Mabes" },
+//   { id: "polda", label: "Polda" },
+//   { id: "satker", label: "Satker" },
+// ];
 
-const jumlahList = [5, 10, 15, 20, 25, 30];
+// const jumlahList = [5, 10, 15, 20, 25, 30];
 
-export default function CreateSettingTracking() {
-  const t = useTranslations("Menu");
-  const [isOpen, setIsOpen] = useState(false);
+// export default function CreateSettingTracking() {
+//   const t = useTranslations("Menu");
+//   const [isOpen, setIsOpen] = useState(false);
 
-  const form = useForm({
-    defaultValues: {
-      wilayah: [] as string[],
-      jumlah: [] as number[],
-    },
-  });
+//   const form = useForm({
+//     defaultValues: {
+//       wilayah: [] as string[],
+//       jumlah: [] as number[],
+//     },
+//   });
 
-  const onSubmit = (values: any) => {
-    console.log("Submitted values:", values);
-    setIsOpen(false);
-  };
+//   const onSubmit = (values: any) => {
+//     console.log("Submitted values:", values);
+//     setIsOpen(false);
+//   };
 
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button onClick={() => setIsOpen(true)}>Tambah Setting Tracking</Button>
-      </DialogTrigger>
+//   return (
+//     <Dialog open={isOpen} onOpenChange={setIsOpen}>
+//       <DialogTrigger asChild>
+//         <Button onClick={() => setIsOpen(true)}>Tambah Setting Tracking</Button>
+//       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
-        </DialogHeader>
+//       <DialogContent className="sm:max-w-md">
+//         <DialogHeader>
+//           <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
+//         </DialogHeader>
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            {/* Wilayah */}
-            <FormField
-              control={form.control}
-              name="wilayah"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Wilayah</FormLabel>
-                  <div className="flex gap-4">
-                    {wilayahList.map((item) => (
-                      <div key={item.id} className="flex items-center gap-2">
-                        <Checkbox
-                          checked={field.value.includes(item.id)}
-                          onCheckedChange={(checked) => {
-                            const updated = checked
-                              ? [...field.value, item.id]
-                              : field.value.filter((val) => val !== item.id);
-                            field.onChange(updated);
-                          }}
-                        />
-                        <label className="text-sm">{item.label}</label>
-                      </div>
-                    ))}
-                  </div>
-                </FormItem>
-              )}
-            />
+//         <Form {...form}>
+//           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+//             {/* Wilayah */}
+//             <FormField
+//               control={form.control}
+//               name="wilayah"
+//               render={({ field }) => (
+//                 <FormItem>
+//                   <FormLabel>Wilayah</FormLabel>
+//                   <div className="flex gap-4">
+//                     {wilayahList.map((item) => (
+//                       <div key={item.id} className="flex items-center gap-2">
+//                         <Checkbox
+//                           checked={field.value.includes(item.id)}
+//                           onCheckedChange={(checked) => {
+//                             const updated = checked
+//                               ? [...field.value, item.id]
+//                               : field.value.filter((val) => val !== item.id);
+//                             field.onChange(updated);
+//                           }}
+//                         />
+//                         <label className="text-sm">{item.label}</label>
+//                       </div>
+//                     ))}
+//                   </div>
+//                 </FormItem>
+//               )}
+//             />
 
-            <FormField
-              control={form.control}
-              name="jumlah"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
-                  <div className="flex gap-4 flex-wrap">
-                    {jumlahList.map((num) => (
-                      <div key={num} className="flex items-center gap-2">
-                        <Checkbox
-                          checked={field.value.includes(num)}
-                          onCheckedChange={(checked) => {
-                            const updated = checked
-                              ? [...field.value, num]
-                              : field.value.filter((val) => val !== num);
-                            field.onChange(updated);
-                          }}
-                        />
-                        <label className="text-sm">{num}</label>
-                      </div>
-                    ))}
-                  </div>
-                </FormItem>
-              )}
-            />
+//             <FormField
+//               control={form.control}
+//               name="jumlah"
+//               render={({ field }) => (
+//                 <FormItem>
+//                   <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+//                   <div className="flex gap-4 flex-wrap">
+//                     {jumlahList.map((num) => (
+//                       <div key={num} className="flex items-center gap-2">
+//                         <Checkbox
+//                           checked={field.value.includes(num)}
+//                           onCheckedChange={(checked) => {
+//                             const updated = checked
+//                               ? [...field.value, num]
+//                               : field.value.filter((val) => val !== num);
+//                             field.onChange(updated);
+//                           }}
+//                         />
+//                         <label className="text-sm">{num}</label>
+//                       </div>
+//                     ))}
+//                   </div>
+//                 </FormItem>
+//               )}
+//             />
 
-            <DialogFooter>
-              <Button type="submit">Tambah Setting</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+//             <DialogFooter>
+//               <Button type="submit">Tambah Setting</Button>
+//             </DialogFooter>
+//           </form>
+//         </Form>
+//       </DialogContent>
+//     </Dialog>
+//   );
+// }
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
index 82e8f34f..b6978627 100644
--- a/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/component/table.tsx
@@ -49,8 +49,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import CreateSettingTracking from "./create";
 import useTableColumns from "./column";
+import { UploadIcon } from "lucide-react";
 
 const AdminSettingTrackingTable = () => {
   const router = useRouter();
@@ -190,7 +190,15 @@ const AdminSettingTrackingTable = () => {
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
       <div className="flex items-end justify-between">
-        <CreateSettingTracking />
+        {/* <CreateSettingTracking /> */}
+        <div className="flex-none">
+          <Link href={"/admin/settings/setting-tracking/create"}>
+            <Button color="primary" className="text-white" size="md">
+              <UploadIcon size={18} className="mr-2" />
+              Tambah Setting Tracking
+            </Button>
+          </Link>
+        </div>
         <Popover>
           <PopoverTrigger asChild>
             <Button size="md" variant="outline">
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/create/page.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/create/page.tsx
new file mode 100644
index 00000000..bcd7b81d
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/create/page.tsx
@@ -0,0 +1,15 @@
+import CreateSettingTracking from "@/components/form/media-tracking/setting-tracking-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const SettingTrackingCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <CreateSettingTracking />
+      </div>
+    </div>
+  );
+};
+
+export default SettingTrackingCreatePage;
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/detail/[id]/page.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/detail/[id]/page.tsx
new file mode 100644
index 00000000..ace3a760
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/detail/[id]/page.tsx
@@ -0,0 +1,15 @@
+import DetailSettingTracking from "@/components/form/media-tracking/setting-tracking-detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const SettingTrackingDetailPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <DetailSettingTracking />
+      </div>
+    </div>
+  );
+};
+
+export default SettingTrackingDetailPage;
diff --git a/app/[locale]/(protected)/admin/settings/setting-tracking/update/[id]/page.tsx b/app/[locale]/(protected)/admin/settings/setting-tracking/update/[id]/page.tsx
new file mode 100644
index 00000000..c724634f
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/setting-tracking/update/[id]/page.tsx
@@ -0,0 +1,15 @@
+import UpdateSettingTracking from "@/components/form/media-tracking/setting-tracking-update-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const SettingTrackingUpdatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <UpdateSettingTracking />
+      </div>
+    </div>
+  );
+};
+
+export default SettingTrackingUpdatePage;
diff --git a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
index 1e319486..1399f44c 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
@@ -52,7 +52,7 @@ import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { paginationBlog } from "@/service/blog/blog";
 import { ticketingPagination } from "@/service/ticketing/ticketing";
 import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 
 import {
@@ -73,6 +73,9 @@ import useTableColumns from "./columns";
 const TableImage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  
+  const params = useParams();
+  const locale = params?.locale;
   const MySwal = withReactContent(Swal);
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
@@ -199,7 +202,8 @@ const TableImage = () => {
         formattedStartDate, // Pastikan format sesuai
         formattedEndDate, // Pastikan format sesuai
         search,
-        filterByCreatorGroup
+        filterByCreatorGroup,
+        locale == "en"
       );
 
       const data = res?.data?.data;
diff --git a/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx b/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
index 6d5d7f86..cb5829c3 100644
--- a/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
@@ -66,7 +66,7 @@ export default function Questions() {
                 <Icon icon="ic:baseline-email" width={22} color="#2563eb" />
                 Email
               </Link>
-              <Link
+              {/* <Link
                 href="/supervisor/communications/questions/facebook"
                 className="flex items-center gap-3"
               >
@@ -89,7 +89,7 @@ export default function Questions() {
                   color="#2563eb"
                 />
                 Instagram
-              </Link>
+              </Link> */}
               <Link
                 href="/supervisor/communications/questions/whatsapp"
                 className="flex items-center gap-3"
@@ -97,13 +97,13 @@ export default function Questions() {
                 <Icon icon="ri:whatsapp-fill" width={24} color="#2563eb" />
                 Whatsapp
               </Link>
-              <Link
+              {/* <Link
                 href="/supervisor/communications/questions/youtube"
                 className="flex items-center gap-3"
               >
                 <Icon icon="mdi:youtube" width={24} color="#2563eb" />
                 Youtube
-              </Link>
+              </Link> */}
               <Link
                 href="/supervisor/communications/questions/inbox"
                 className="flex items-center gap-3"
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
index 85a067be..c94dea4b 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
@@ -2,8 +2,7 @@
 
 import { Reveal } from "@/components/landing-page/Reveal";
 import { Skeleton } from "@/components/ui/skeleton";
-import { getHeroData, listData } from "@/service/landing/landing";
-import { formatDateToIndonesian } from "@/utils/globals";
+import { listData } from "@/service/landing/landing";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
index 9cd499d7..18ea033a 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { Link } from "@/i18n/routing";
-import { getHeroData, listCarousel, listData } from "@/service/landing/landing";
+import { listData } from "@/service/landing/landing";
 import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
index 4a4c7cd4..b2fc51ff 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
@@ -44,7 +44,7 @@ const PopularNews = () => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     setHeroData(response?.data?.data?.content);
   };
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
index dd676e45..65b6ddd7 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
@@ -2,8 +2,7 @@
 
 import { Reveal } from "@/components/landing-page/Reveal";
 import { Skeleton } from "@/components/ui/skeleton";
-import { getHeroData, listData } from "@/service/landing/landing";
-import { formatDateToIndonesian } from "@/utils/globals";
+import { listData } from "@/service/landing/landing";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
diff --git a/components/form/communication/escalation-detail-form.tsx b/components/form/communication/escalation-detail-form.tsx
index 4e579615..db62b637 100644
--- a/components/form/communication/escalation-detail-form.tsx
+++ b/components/form/communication/escalation-detail-form.tsx
@@ -31,6 +31,8 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { Link } from "@/i18n/routing";
 import { loading } from "@/lib/swal";
 import { id } from "date-fns/locale";
+import { htmlToString } from "@/utils/globals";
+import InfoLainnyaModal from "../ticketing/info-lainnya";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -63,6 +65,7 @@ export default function FormDetailEscalation() {
   const [listDiscussion, setListDiscussion] = useState();
   const [message, setMessage] = useState("");
   const [selectedPriority, setSelectedPriority] = useState("");
+  const [openEmergencyModal, setOpenEmergencyModal] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
   const [replies, setReplies] = useState([
     {
@@ -136,6 +139,10 @@ export default function FormDetailEscalation() {
     setReplyMessage("");
   };
 
+  const openEmergencyIssueDetail = () => {
+    setOpenEmergencyModal(true);
+  };
+
   return (
     <div>
       <div className="flex">
@@ -179,6 +186,29 @@ export default function FormDetailEscalation() {
                 </div>
               </div>
               <p className="p-5 bg-white">{detail.message}</p>
+              <div className="px-4 py-1 bg-white text-sm">
+                {detail?.typeId === 6 && detail?.emergencyIssue ? (
+                  <div className="row mx-0 mb-3 emergency-attachments">
+                    <div className=" mr-4">
+                      <Button
+                        color="primary"
+                        size="md"
+                        onClick={openEmergencyIssueDetail}
+                      >
+                        Info Lainnya
+                      </Button>
+                    </div>
+                  </div>
+                ) : null}
+
+                {detail?.emergencyIssue && (
+                  <InfoLainnyaModal
+                    open={openEmergencyModal}
+                    onClose={() => setOpenEmergencyModal(false)}
+                    data={detail.emergencyIssue}
+                  />
+                )}
+              </div>
             </div>
           )}
         </div>
diff --git a/components/form/communication/escalation-detail-new-form.tsx b/components/form/communication/escalation-detail-new-form.tsx
index 3b94a704..bc4b001b 100644
--- a/components/form/communication/escalation-detail-new-form.tsx
+++ b/components/form/communication/escalation-detail-new-form.tsx
@@ -45,6 +45,8 @@ import {
 import { ChevronDownIcon } from "lucide-react";
 import { getOperatorUser } from "@/service/management-user/management-user";
 import { getCookiesDecrypt } from "@/lib/utils";
+import { htmlToString } from "@/utils/globals";
+import InfoLainnyaModal from "../ticketing/info-lainnya";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
diff --git a/components/form/communication/questions-reply-form.tsx b/components/form/communication/questions-reply-form.tsx
index 64d96c87..b684de96 100644
--- a/components/form/communication/questions-reply-form.tsx
+++ b/components/form/communication/questions-reply-form.tsx
@@ -51,10 +51,8 @@ import { ChevronDownIcon } from "lucide-react";
 import { getOperatorUser } from "@/service/management-user/management-user";
 
 const taskSchema = z.object({
-  title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z.string().min(2, {
-    message: "Narasi Penugasan harus lebih dari 2 karakter.",
-  }),
+  message: z.string().optional(),
+  description: z.string().optional(),
 });
 
 export type taskDetail = {
@@ -509,7 +507,7 @@ export default function FormQuestionsReply() {
                 <Label>Judul</Label>
                 <Controller
                   control={control}
-                  name="title"
+                  name="message"
                   render={({ field }) => (
                     <Input
                       size="md"
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 3cd600ca..f7eda88b 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -66,6 +66,7 @@ import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setti
 import SuggestionModal from "@/components/modal/suggestions-modal";
 import { formatDateToIndonesian } from "@/utils/globals";
 import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+import Image from "next/image";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -437,6 +438,22 @@ export default function FormImageDetail() {
     successCallback();
   };
 
+  const [portraitMap, setPortraitMap] = useState<any>({});
+
+  const handleImageLoad = (e: any, index: number) => {
+    const { naturalWidth, naturalHeight } = e.target;
+    const isPortrait = naturalHeight > naturalWidth;
+
+    setPortraitMap((prev: any) => ({
+      ...prev,
+      [index]: isPortrait,
+    }));
+  };
+
+  useEffect(() => {
+    console.log("portrai", portraitMap);
+  }, [portraitMap]);
+
   return (
     <form>
       {detail !== undefined ? (
@@ -513,19 +530,19 @@ export default function FormImageDetail() {
                       thumbs={{ swiper: thumbsSwiper }}
                       modules={[FreeMode, Navigation, Thumbs]}
                       navigation={false}
-                      className="w-full"
+                      className="h-[480px] object-cover w-full"
                     >
                       {detailThumb?.map((data: any) => (
                         <SwiperSlide key={data.id}>
                           <img
-                            className="object-fill h-full w-full rounded-md"
+                            className="h-[480px] max-w-[600px]  rounded-md object-cover mx-auto border-2"
                             src={data}
                             alt={` ${data.id}`}
                           />
                         </SwiperSlide>
                       ))}
                     </Swiper>
-                    <div className=" mt-2 ">
+                    <div className="mt-2 mx-auto min-w-fit max-w-[600px]">
                       <Swiper
                         onSwiper={setThumbsSwiper}
                         slidesPerView={6}
@@ -539,7 +556,7 @@ export default function FormImageDetail() {
                         {detailThumb?.map((data: any) => (
                           <SwiperSlide key={data.id}>
                             <img
-                              className="object-cover h-[60px] w-[80px]"
+                              className="object-cover h-[60px] w-[80px] border-2 border-slate-100"
                               src={data}
                               alt={` ${data.id}`}
                             />
@@ -579,11 +596,11 @@ export default function FormImageDetail() {
               </div>
               <div className="mt-3 px-3 space-y-2">
                 <Label>{t("preview")}</Label>
-                <Card className="mt-2">
+                <Card className="mt-2 w-fit">
                   <img
                     src={detail.thumbnailLink}
                     alt="Thumbnail Gambar Utama"
-                    className="w-full h-auto rounded"
+                    className="h-[200px] rounded"
                   />
                 </Card>
               </div>
@@ -666,7 +683,7 @@ export default function FormImageDetail() {
                 ""
               )} */}
 
-              {detail?.isPublish == false && detail.isPublishOnPolda == true ? (
+              {(detail?.isPublish == false && detail.isPublishOnPolda == true) || (detail?.isPublish == false && detail?.isInternationalMedia == true && Number(detail?.statusId) == 2) ? (
                 <div className="flex flex-col gap-2 p-3">
                   <Button
                     onClick={() => publishToMabes()}
@@ -699,119 +716,139 @@ export default function FormImageDetail() {
               )} */}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-                <DialogContent className="min-w-max h-[600px] overflow-y-auto">
+                <DialogContent size="md" className="max-h-[600px]">
                   <DialogHeader>
                     <DialogTitle>{t("leave-comment")}</DialogTitle>
                   </DialogHeader>
-                  {status == "2"
-                    ? files?.map((file, index) => (
-                        <div
-                          key={file.id}
-                          className="flex flex-row gap-2 items-center"
-                        >
-                          <img src={file.url} className="w-[200px]" />
-                          <div className="flex flex-col gap-2 w-full">
-                            <div className="flex justify-between text-sm">
-                              {file.fileName}
-                              <a
-                                onClick={() =>
-                                  handleDeleteFileApproval(file.id)
-                                }
-                              >
-                                <Icon icon="humbleicons:times" color="red" />
-                              </a>
+                  <div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
+                    {status == "2"
+                      ? files?.map((file, index) => (
+                          <div
+                            key={file.id}
+                            className="flex flex-row gap-5 items-center w-full"
+                          >
+                            <div className="w-[200px] h-[100px] flex justify-center items-center">
+                              <img
+                                key={index}
+                                alt={`files-${index + 1}`}
+                                src={file.url}
+                                onLoad={(e) => handleImageLoad(e, index)}
+                                className={`h-[100px] object-cover ${
+                                  portraitMap[index] ? "w-auto" : "!w-[200px]"
+                                }`}
+                              />
                             </div>
-                            {isUserMabesApprover && (
-                              <div className="flex flex-row gap-2">
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    value="all"
-                                    checked={filePlacements[index]?.includes(
-                                      "all"
-                                    )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(index, "all", Boolean(e))
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    {t("all")}
-                                  </label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "mabes"
-                                    )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(index, "mabes", Boolean(e))
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    Nasional
-                                  </label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "polda"
-                                    )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(index, "polda", Boolean(e))
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    Wilayah
-                                  </label>
-                                  {wilayahPublish.polda && (
-                                    <UnitMapping
-                                      unit="Polda"
-                                      isDetail={false}
-                                      sendDataToParent={(data: any) =>
-                                        setSelectedPolda(data)
+                            <div className="flex flex-col gap-2 w-full">
+                              <div className="flex justify-between text-sm">
+                                {file.fileName}
+                                <a
+                                  onClick={() =>
+                                    handleDeleteFileApproval(file.id)
+                                  }
+                                >
+                                  <Icon icon="humbleicons:times" color="red" />
+                                </a>
+                              </div>
+                              {isUserMabesApprover && (
+                                <div className="flex flex-row gap-2">
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      value="all"
+                                      checked={filePlacements[index]?.includes(
+                                        "all"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(index, "all", Boolean(e))
                                       }
                                     />
-                                  )}
-                                </div>
-
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "international"
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      {t("all")}
+                                    </label>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "mabes"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "mabes",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Nasional
+                                    </label>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "polda"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "polda",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Wilayah
+                                    </label>
+                                    {wilayahPublish.polda && (
+                                      <UnitMapping
+                                        unit="Polda"
+                                        isDetail={false}
+                                        sendDataToParent={(data: any) =>
+                                          setSelectedPolda(data)
+                                        }
+                                      />
                                     )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(
-                                        index,
-                                        "international",
-                                        Boolean(e)
-                                      )
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    Internasional
-                                  </label>
+                                  </div>
+
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "international"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "international",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Internasional
+                                    </label>
+                                  </div>
                                 </div>
-                              </div>
-                            )}
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      ))
-                    : ""}
+                        ))
+                      : ""}
+                  </div>
                   <div className="flex flex-col gap-4">
                     <Textarea
                       placeholder="Type your message here."
@@ -821,7 +858,8 @@ export default function FormImageDetail() {
                   </div>
                   {status == "3" || status == "4" ? (
                     <div className="flex flex-row gap-2">
-                      <Badge
+                      <Button
+                        size="sm"
                         color={
                           description === "Kualitas media kurang baik"
                             ? "primary"
@@ -833,9 +871,10 @@ export default function FormImageDetail() {
                         }
                       >
                         Kualitas media kurang baik
-                      </Badge>
+                      </Button>
 
-                      <Badge
+                      <Button
+                        size="sm"
                         color={
                           description === "Deskripsi kurang lengkap"
                             ? "primary"
@@ -847,8 +886,9 @@ export default function FormImageDetail() {
                         }
                       >
                         Deskripsi kurang lengkap
-                      </Badge>
-                      <Badge
+                      </Button>
+                      <Button
+                        size="sm"
                         color={
                           description === "Judul kurang tepat"
                             ? "primary"
@@ -858,11 +898,12 @@ export default function FormImageDetail() {
                         onClick={() => setDescription("Judul kurang tepat")}
                       >
                         Judul kurang tepat
-                      </Badge>
+                      </Button>
                     </div>
                   ) : (
                     <div className="flex flex-row gap-2">
-                      <Badge
+                      <Button
+                        size="sm"
                         color={
                           description === "Konten sangat bagus"
                             ? "primary"
@@ -872,8 +913,9 @@ export default function FormImageDetail() {
                         onClick={() => setDescription("Konten sangat bagus")}
                       >
                         Konten sangat bagus
-                      </Badge>
-                      <Badge
+                      </Button>
+                      <Button
+                        size="sm"
                         color={
                           description === "Konten menarik"
                             ? "primary"
@@ -883,31 +925,34 @@ export default function FormImageDetail() {
                         onClick={() => setDescription("Konten menarik")}
                       >
                         Konten menarik
-                      </Badge>
+                      </Button>
                     </div>
                   )}
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={() => submit()}
-                    >
-                      {t("submit")}
-                    </Button>
-                    <Button
-                      type="button"
-                      color="destructive"
-                      onClick={() => {
-                        setModalOpen(false);
-                      }}
-                    >
-                      {t("cancel")}
-                    </Button>
+                    <div className="flex flex-row gap-2 justify-end">
+                      {" "}
+                      <Button
+                        type="button"
+                        color="primary"
+                        onClick={() => submit()}
+                      >
+                        {t("submit")}
+                      </Button>
+                      <Button
+                        type="button"
+                        color="destructive"
+                        onClick={() => {
+                          setModalOpen(false);
+                        }}
+                      >
+                        {t("cancel")}
+                      </Button>
+                    </div>
                   </DialogFooter>
                 </DialogContent>
               </Dialog>
             </Card>
-            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+            {(Number(detail?.needApprovalFromLevel) == Number(userLevelId)) || (detail?.isInternationalMedia == true && detail?.isForwardFromNational	== true && Number(detail?.statusId) == 1) ? (
               Number(detail?.uploadedById) == Number(userId) ? (
                 ""
               ) : (
diff --git a/components/form/media-tracking/setting-tracking-detail-form.tsx b/components/form/media-tracking/setting-tracking-detail-form.tsx
new file mode 100644
index 00000000..fb115b11
--- /dev/null
+++ b/components/form/media-tracking/setting-tracking-detail-form.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Fragment, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+
+const wilayahList = [
+  { id: "mabes", label: "Mabes" },
+  { id: "polda", label: "Polda" },
+  { id: "satker", label: "Satker" },
+];
+
+const jumlahList = [5, 10, 15, 20, 25, 30];
+
+export default function DetailSettingTracking() {
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      wilayah: [] as string[],
+      jumlah: [] as number[],
+    },
+  });
+
+  const onSubmit = (values: any) => {
+    console.log("Submitted values:", values);
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Card className="px-3 py-3">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Wilayah */}
+            <FormField
+              control={form.control}
+              name="wilayah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wilayah</FormLabel>
+                  <div className="flex gap-4">
+                    {wilayahList.map((item) => (
+                      <div key={item.id} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(item.id)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, item.id]
+                              : field.value.filter((val) => val !== item.id);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{item.label}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="jumlah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+                  <div className="flex gap-4 flex-wrap">
+                    <Input
+                      size={"md"}
+                      type="number"
+                      placeholder="Masukan Nama Iklan"
+                    />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <div className="flex items-end justify-end">
+              <Button type="submit">Tambah Setting</Button>
+            </div>
+          </form>
+        </Form>
+      </Card>
+    </>
+  );
+}
diff --git a/components/form/media-tracking/setting-tracking-form.tsx b/components/form/media-tracking/setting-tracking-form.tsx
new file mode 100644
index 00000000..5ec57285
--- /dev/null
+++ b/components/form/media-tracking/setting-tracking-form.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Fragment, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+
+const wilayahList = [
+  { id: "mabes", label: "Mabes" },
+  { id: "polda", label: "Polda" },
+  { id: "satker", label: "Satker" },
+];
+
+const jumlahList = [5, 10, 15, 20, 25, 30];
+
+export default function CreateSettingTracking() {
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      wilayah: [] as string[],
+      jumlah: [] as number[],
+    },
+  });
+
+  const onSubmit = (values: any) => {
+    console.log("Submitted values:", values);
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Card className="px-3 py-3">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Wilayah */}
+            <FormField
+              control={form.control}
+              name="wilayah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wilayah</FormLabel>
+                  <div className="flex gap-4">
+                    {wilayahList.map((item) => (
+                      <div key={item.id} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(item.id)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, item.id]
+                              : field.value.filter((val) => val !== item.id);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{item.label}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="jumlah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+                  <div className="flex gap-4 flex-wrap">
+                    <Input
+                      size={"md"}
+                      type="number"
+                      placeholder="Masukan Nama Iklan"
+                    />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <div className="flex items-end justify-end">
+              <Button type="submit">Tambah Setting</Button>
+            </div>
+          </form>
+        </Form>
+      </Card>
+    </>
+  );
+}
diff --git a/components/form/media-tracking/setting-tracking-update-form.tsx b/components/form/media-tracking/setting-tracking-update-form.tsx
new file mode 100644
index 00000000..621bf378
--- /dev/null
+++ b/components/form/media-tracking/setting-tracking-update-form.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Fragment, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+
+const wilayahList = [
+  { id: "mabes", label: "Mabes" },
+  { id: "polda", label: "Polda" },
+  { id: "satker", label: "Satker" },
+];
+
+const jumlahList = [5, 10, 15, 20, 25, 30];
+
+export default function UpdateSettingTracking() {
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      wilayah: [] as string[],
+      jumlah: [] as number[],
+    },
+  });
+
+  const onSubmit = (values: any) => {
+    console.log("Submitted values:", values);
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Card className="px-3 py-3">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Wilayah */}
+            <FormField
+              control={form.control}
+              name="wilayah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wilayah</FormLabel>
+                  <div className="flex gap-4">
+                    {wilayahList.map((item) => (
+                      <div key={item.id} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(item.id)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, item.id]
+                              : field.value.filter((val) => val !== item.id);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{item.label}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="jumlah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+                  <div className="flex gap-4 flex-wrap">
+                    <Input
+                      size={"md"}
+                      type="number"
+                      placeholder="Masukan Nama Iklan"
+                    />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <div className="flex items-end justify-end">
+              <Button type="submit">Tambah Setting</Button>
+            </div>
+          </form>
+        </Form>
+      </Card>
+    </>
+  );
+}
diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 18d841a3..a4b4887b 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -1361,20 +1361,22 @@ export default function FormTaskDetail() {
                   <div className="mt-4">
                     <Label>Link Url</Label>
                     {urlInputs.map((url: any, index: any) => (
-                      <div
+                      <Link
                         key={url.id}
+                        href={url}
+                        target="_blank"
                         className="flex items-center gap-2 mt-2"
                       >
                         <input
                           type="url"
-                          className="border rounded p-2 w-full"
+                          className="border rounded p-2 w-full cursor-pointer"
                           value={url}
                           // onChange={(e) =>
                           //   handleLinkChange(index, e.target.value)
                           // }
                           placeholder={`Masukkan link berita ${index + 1}`}
                         />
-                      </div>
+                      </Link>
                     ))}
                   </div>
                 </div>
diff --git a/components/form/task/task-form.tsx b/components/form/task/task-form.tsx
index ace2e83c..3a3af009 100644
--- a/components/form/task/task-form.tsx
+++ b/components/form/task/task-form.tsx
@@ -36,7 +36,7 @@ import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import FileUploader from "@/components/form/shared/file-uploader";
 import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
+import { close, error } from "@/config/swal";
 import { getCsrfToken } from "@/service/auth";
 import { loading } from "@/lib/swal";
 import { useTranslations } from "next-intl";
@@ -320,37 +320,42 @@ export default function FormTask() {
     loading();
     if (imageFiles?.length == 0) {
       setIsImageUploadFinish(true);
+    } else {
+      imageFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "1", "0");
+      });
     }
-    imageFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "1", "0");
-    });
 
     if (videoFiles?.length == 0) {
       setIsVideoUploadFinish(true);
+    } else {
+      videoFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "2", "0");
+      });
     }
-    videoFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "2", "0");
-    });
 
     if (textFiles?.length == 0) {
       setIsTextUploadFinish(true);
+    } else {
+      textFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "3", "0");
+      });
     }
-    textFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "3", "0");
-    });
 
     if (audioFiles?.length == 0) {
       setIsAudioUploadFinish(true);
+    } else {
+      audioFiles.map(async (item: FileWithPreview, index: number) => {
+        await uploadResumableFile(
+          index,
+          String(id),
+          item, // Use .file to access the actual File object
+          "4",
+          "0" // Optional: Replace with actual duration if available
+        );
+      });
     }
-    audioFiles.map(async (item: FileWithPreview, index: number) => {
-      await uploadResumableFile(
-        index,
-        String(id),
-        item, // Use .file to access the actual File object
-        "4",
-        "0" // Optional: Replace with actual duration if available
-      );
-    });
+    close();
   };
 
   const onSubmit = (data: TaskSchema) => {
@@ -479,7 +484,8 @@ export default function FormTask() {
         successTodo();
         if (fileTypeId == "1") {
           setIsImageUploadFinish(true);
-        } else if (fileTypeId == "2") {
+        }
+        if (fileTypeId == "2") {
           setIsVideoUploadFinish(true);
         }
         if (fileTypeId == "3") {
diff --git a/components/form/ticketing/info-lainnya-types.ts b/components/form/ticketing/info-lainnya-types.ts
index 51ff1472..108d6d6c 100644
--- a/components/form/ticketing/info-lainnya-types.ts
+++ b/components/form/ticketing/info-lainnya-types.ts
@@ -1,4 +1,6 @@
 export type DetailTicket = {
+  title: string;
+  description: string;
   commentFromUserId: string;
   assignedTeams: string;
   message: string;
@@ -19,7 +21,10 @@ export type DetailTicket = {
     feedUrl: string;
     recommendationName: string;
     link: string;
-    uploadFiles?: string;
+    uploadFiles?: {
+      fileUrl: string;
+      fileName: string;
+    }[];
     description: string;
   };
 };
diff --git a/components/form/ticketing/info-lainnya.tsx b/components/form/ticketing/info-lainnya.tsx
index 9fcf5e79..0af6a1f8 100644
--- a/components/form/ticketing/info-lainnya.tsx
+++ b/components/form/ticketing/info-lainnya.tsx
@@ -1,4 +1,3 @@
-// InfoLainnyaModal.tsx
 import {
   Dialog,
   DialogContent,
@@ -6,6 +5,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { DetailTicket } from "./info-lainnya-types";
+import { useState } from "react";
 
 interface InfoLainnyaModalProps {
   open: boolean;
@@ -18,6 +18,34 @@ export default function InfoLainnyaModal({
   onClose,
   data,
 }: InfoLainnyaModalProps) {
+  const files = data?.uploadFiles || [];
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : prev));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev < files.length - 1 ? prev + 1 : prev));
+  };
+
+  const currentFile = files[currentIndex];
+  const isImage = (fileUrl: string) =>
+    /\.(jpeg|jpg|png|gif|bmp|webp)$/i.test(fileUrl.toLowerCase());
+
+  const getIframeUrl = (fileUrl: string): string => {
+    const lower = fileUrl.toLowerCase();
+
+    // Dokumen ditampilkan melalui Google Docs Viewer
+    if (/\.(pdf|doc|docx|xls|xlsx|ppt|pptx)$/i.test(lower)) {
+      return `https://docs.google.com/viewer?url=${encodeURIComponent(
+        fileUrl
+      )}&embedded=true`;
+    }
+
+    return fileUrl;
+  };
+
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent size="md">
@@ -41,11 +69,11 @@ export default function InfoLainnyaModal({
           <div>:{data?.recommendationName}</div>
 
           <div className="font-medium">Link Pendukung</div>
-          <div>
+          <div className="flex">
             :
             <a
               href={data?.link}
-              className="text-blue-600"
+              className="text-blue-600 flex w-[100px]"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -53,15 +81,43 @@ export default function InfoLainnyaModal({
             </a>
           </div>
 
-          {data?.uploadFiles && (
+          {files.length > 0 && (
             <>
-              <div className="font-medium">Lampiran</div>
-              <div>
-                <img
-                  src={data?.uploadFiles}
-                  alt="Lampiran"
-                  className="max-w-xs"
-                />
+              <div className="font-medium col-span-2">Lampiran</div>
+              <div className="col-span-2 flex flex-col items-center space-y-2 w-full">
+                {isImage(currentFile?.fileUrl || "") ? (
+                  <img
+                    src={currentFile?.fileUrl}
+                    alt={`Lampiran ${currentIndex + 1}`}
+                    className="max-h-[300px] w-auto object-contain border rounded"
+                  />
+                ) : (
+                  <iframe
+                    src={getIframeUrl(currentFile?.fileUrl || "")}
+                    title={`Lampiran ${currentIndex + 1}`}
+                    className="w-full max-w-2xl h-[300px] border rounded"
+                    onError={(e) => {
+                      (e.target as HTMLIFrameElement).style.display = "none";
+                    }}
+                  />
+                )}
+
+                <div className="flex gap-2">
+                  <button
+                    onClick={handlePrev}
+                    disabled={currentIndex === 0}
+                    className="px-2 py-1 border rounded disabled:opacity-50"
+                  >
+                    &lt;
+                  </button>
+                  <button
+                    onClick={handleNext}
+                    disabled={currentIndex === files.length - 1}
+                    className="px-2 py-1 border rounded disabled:opacity-50"
+                  >
+                    &gt;
+                  </button>
+                </div>
               </div>
             </>
           )}
diff --git a/components/form/ticketing/ticketing-detail-form.tsx b/components/form/ticketing/ticketing-detail-form.tsx
index 81c02ec4..a3d25740 100644
--- a/components/form/ticketing/ticketing-detail-form.tsx
+++ b/components/form/ticketing/ticketing-detail-form.tsx
@@ -588,6 +588,7 @@ export default function FormDetailTicketing() {
                         <input
                           type="checkbox"
                           checked={selectedOperator.includes(op.value)}
+                          disabled
                           onChange={(e) => {
                             if (e.target.checked) {
                               setSelectedOperator((prev) => [
diff --git a/components/landing-page/header-banner-satker.tsx b/components/landing-page/header-banner-satker.tsx
index 76e3af14..17f8883e 100644
--- a/components/landing-page/header-banner-satker.tsx
+++ b/components/landing-page/header-banner-satker.tsx
@@ -22,6 +22,7 @@ import Image from "next/image";
 const HeaderBannerSatker = () => {
   const router = useRouter();
   const params = useParams();
+  const locale = params?.locale;
   const satkerName: any = params?.satker_name;
   const asPath: any = usePathname();
   const [content, setContent] = useState([]);
@@ -50,7 +51,7 @@ const HeaderBannerSatker = () => {
       );
       var data = res?.data?.data?.content;
       if (data) {
-        const resStatic = await listStaticBanner(satkerName, false);
+        const resStatic = await listStaticBanner(satkerName, locale == "en");
         for (let i = 0; i < resStatic?.data?.data?.length; i++) {
           const media = resStatic?.data.data[i]?.mediaUpload;
           media.fileTypeId = media.fileType?.id;
diff --git a/components/landing-page/header-banner.tsx b/components/landing-page/header-banner.tsx
index c48c8bf4..9942b4b2 100644
--- a/components/landing-page/header-banner.tsx
+++ b/components/landing-page/header-banner.tsx
@@ -12,6 +12,7 @@ import { useRouter } from "@/i18n/routing";
 const HeaderBanner = () => {
   const router = useRouter();
   const params = useParams();
+  const locale = params?.locale;
   const poldaName: any = params?.polda_name;
   const [content, setContent] = useState([]);
   const [isBannerLoading, setIsBannerLoading] = useState(true);
@@ -31,7 +32,7 @@ const HeaderBanner = () => {
       const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName);
       var data = res?.data?.data?.content;
       if (data) {
-        const resStatic = await listStaticBanner(poldaName, false);
+        const resStatic = await listStaticBanner(poldaName, locale == "en");
         for (let i = 0; i < resStatic?.data?.data?.length; i++) {
           const media = resStatic?.data.data[i]?.mediaUpload;
           media.fileTypeId = media.fileType?.id;
diff --git a/components/landing-page/hero-new-polda.tsx b/components/landing-page/hero-new-polda.tsx
index c54d57eb..fbb2f664 100644
--- a/components/landing-page/hero-new-polda.tsx
+++ b/components/landing-page/hero-new-polda.tsx
@@ -69,7 +69,7 @@ const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) =>
 
   const initFetch = async () => {
     if (group === "polda" && poldaName && String(poldaName).length > 1) {
-      const response = await listStaticBanner(poldaName);
+      const response = await listStaticBanner(poldaName, locale == "en");
 
       const banners =
         response?.data?.data?.map((item: any) => {
@@ -245,13 +245,13 @@ const HeroNewPolda = (props: { group?: string }) => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
     setHeroData(data);
 
     if (data && props.group === "polda" && poldaName && String(poldaName)?.length > 1) {
-      const resStatic = await listStaticBanner(poldaName);
+      const resStatic = await listStaticBanner(poldaName, locale == "en");
 
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
diff --git a/components/landing-page/hero-new-satker.tsx b/components/landing-page/hero-new-satker.tsx
index 8d39a52c..41c4730a 100644
--- a/components/landing-page/hero-new-satker.tsx
+++ b/components/landing-page/hero-new-satker.tsx
@@ -69,7 +69,7 @@ const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) =>
 
   const initFetch = async () => {
     if (group === "satker" && satkerName && String(satkerName).length > 1) {
-      const response = await listStaticBanner(satkerName);
+      const response = await listStaticBanner(satkerName, locale == "en");
 
       const banners =
         response?.data?.data?.map((item: any) => {
@@ -245,13 +245,13 @@ const HeroNewSatker = (props: { group?: string }) => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
     setHeroData(data);
 
     if (data && props.group === "satker" && satkerName && String(satkerName)?.length > 1) {
-      const resStatic = await listStaticBanner(satkerName);
+      const resStatic = await listStaticBanner(satkerName, locale == "en");
 
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index cf218958..0dc3aba5 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -100,7 +100,8 @@ const HeroModal = ({
         ? poldaName
         : group === "satker" && satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
-        : ""
+        : "",
+        locale == "en"
     );
 
     const banners =
@@ -295,7 +296,7 @@ const HeroNew = (props: { group?: string }) => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
     setHeroData(response?.data?.data?.content);
@@ -309,7 +310,8 @@ const HeroNew = (props: { group?: string }) => {
             satkerName &&
             String(satkerName)?.length > 1
           ? "satker-" + satkerName
-          : ""
+          : "",
+          locale == "en"
       );
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index ba8c8885..10d65d85 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -79,11 +79,11 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
     if (data) {
-      const resStatic = await listStaticBanner();
+      const resStatic = await listStaticBanner("", locale == "en");
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
         media.fileTypeId = media.fileType?.id;
@@ -287,7 +287,7 @@ const Hero = (props: { group?: string }) => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
     setHeroData(response?.data?.data?.content);
@@ -301,7 +301,8 @@ const Hero = (props: { group?: string }) => {
             satkerName &&
             String(satkerName)?.length > 1
           ? "satker-" + satkerName
-          : ""
+          : "",
+          locale == "en"
       );
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
diff --git a/components/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx
index c28be857..42ca2e41 100644
--- a/components/landing-page/news-tickers.tsx
+++ b/components/landing-page/news-tickers.tsx
@@ -5,14 +5,19 @@ import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import { useEffect, useState } from "react";
 import { Icon } from "../ui/icon";
 import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
+
 export default function NewsTicker() {
   const [article, setArticle] = useState<any>([]);
   const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
   const [animate, setAnimate] = useState(false);
+  const params = useParams();
+  const locale = params?.locale;
   const t = useTranslations("LandingPage");
+
   useEffect(() => {
     async function getArticle() {
-      const response = await getHeroData();
+      const response = await getHeroData(locale == "en");
       setArticle(response?.data?.data?.content);
     }
     getArticle();
diff --git a/components/landing-page/scrollable-content-polda.tsx b/components/landing-page/scrollable-content-polda.tsx
index 84ae6318..117c16c6 100644
--- a/components/landing-page/scrollable-content-polda.tsx
+++ b/components/landing-page/scrollable-content-polda.tsx
@@ -43,7 +43,7 @@ const ScrollableContentPolda = () => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
 
diff --git a/components/landing-page/scrollable-content-satker.tsx b/components/landing-page/scrollable-content-satker.tsx
index 7ba42f87..eda8f006 100644
--- a/components/landing-page/scrollable-content-satker.tsx
+++ b/components/landing-page/scrollable-content-satker.tsx
@@ -50,7 +50,7 @@ const ScrollableContentSatker = () => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
 
diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx
index 4e5d12d0..b0244922 100644
--- a/components/landing-page/search-section-new.tsx
+++ b/components/landing-page/search-section-new.tsx
@@ -22,6 +22,7 @@ const ScrollableContent = () => {
   const locale = params?.locale;
   const t = useTranslations("LandingPage");
   const [content, setContent] = useState<any>();
+
   useEffect(() => {
     async function fetchCategories() {
       const url = "https://netidhub.com/api/csrf";
@@ -45,12 +46,13 @@ const ScrollableContent = () => {
   }, []);
 
   const initFetch = async () => {
-    const response = await getHeroData();
+    const response = await getHeroData(locale == "en");
     console.log(response);
     let data = response?.data?.data?.content;
 
     setContent(data);
   };
+
   return (
     <>
       <div className="">
diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx
index 9a79d719..87f4ab61 100644
--- a/components/partials/auth/login-form.tsx
+++ b/components/partials/auth/login-form.tsx
@@ -149,7 +149,6 @@ const LoginForm = () => {
         console.log("PROFILE : ", profile?.data?.data);
 
         if (
-          profile?.data?.data?.isInternational == true ||
           profile?.data?.data?.isActive == false ||
           profile?.data?.data?.isDelete == true
         ) {
@@ -225,6 +224,8 @@ const LoginForm = () => {
             Number(profile?.data?.data?.roleId) == 10 ||
             Number(profile?.data?.data?.roleId) == 11 ||
             Number(profile?.data?.data?.roleId) == 12 ||
+            Number(profile?.data?.data?.roleId) == 14 ||
+            Number(profile?.data?.data?.roleId) == 15 ||
             Number(profile?.data?.data?.roleId) == 18 ||
             Number(profile?.data?.data?.roleId) == 19
           ) {
@@ -281,16 +282,17 @@ const LoginForm = () => {
       return false;
     }
     const msg = response?.data?.message;
+    onSubmit(data);
 
-    if (msg == "Continue to setup email") {
-      setStep(2);
-    } else if (msg == "Email is valid and OTP has been sent") {
-      setStep(3);
-    } else if (msg == "Username & password valid") {
-      onSubmit(data);
-    } else {
-      error("Username / password incorrect");
-    }
+    // if (msg == "Continue to setup email") {
+    //   setStep(2);
+    // } else if (msg == "Email is valid and OTP has been sent") {
+    //   setStep(3);
+    // } else if (msg == "Username & password valid") {
+    //   onSubmit(data);
+    // } else {
+    //   error("Username / password incorrect");
+    // }
     // else {
     //   setStep(1);
     // }
diff --git a/components/table/custom-pagination.tsx b/components/table/custom-pagination.tsx
new file mode 100644
index 00000000..cd3adfb6
--- /dev/null
+++ b/components/table/custom-pagination.tsx
@@ -0,0 +1,143 @@
+"use client";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+import { useEffect, useState } from "react";
+
+export default function CustomPagination(props: {
+  totalPage: number;
+  onPageChange: (data: number) => void;
+}) {
+  const { totalPage, onPageChange } = props;
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    onPageChange(page);
+  }, [page]);
+
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const halfWindow = Math.floor(5 / 2);
+    let startPage = Math.max(2, page - halfWindow);
+    let endPage = Math.min(totalPage - 1, page + halfWindow);
+
+    if (endPage - startPage + 1 < 5) {
+      if (page <= halfWindow) {
+        endPage = Math.min(
+          totalPage,
+          endPage + (5 - (endPage - startPage + 1))
+        );
+      } else if (page + halfWindow >= totalPage) {
+        startPage = Math.max(1, startPage - (5 - (endPage - startPage + 1)));
+      }
+    }
+
+    if (startPage === endPage) {
+      return "";
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(
+        <PaginationItem key={i} onClick={() => setPage(i)}>
+          <PaginationLink isActive={page === i}>{i}</PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    return pageNumbers;
+  };
+  return (
+    <Pagination>
+      <PaginationContent>
+        {page - 10 >= 1 && (
+          <PaginationItem>
+            <PaginationLink
+              onClick={() => (page > 10 ? setPage(page - 10) : setPage(1))}
+            >
+              {/* <DoubleArrowLeftIcon /> */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z"
+                />
+              </svg>
+            </PaginationLink>
+          </PaginationItem>
+        )}
+
+        <PaginationItem className="hidden md:block">
+          <PaginationPrevious
+            onClick={() => (page > 1 ? setPage(page - 1) : "")}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink onClick={() => setPage(1)} isActive={page === 1}>
+            {1}
+          </PaginationLink>
+        </PaginationItem>
+        {page > 4 && (
+          <PaginationItem>
+            <PaginationEllipsis onClick={() => setPage(page - 1)} />
+          </PaginationItem>
+        )}
+        {renderPageNumbers()}
+        {page < totalPage - 3 && (
+          <PaginationItem>
+            <PaginationEllipsis onClick={() => setPage(page + 1)} />
+          </PaginationItem>
+        )}
+        {totalPage > 1 && (
+          <PaginationItem>
+            <PaginationLink
+              onClick={() => setPage(totalPage)}
+              isActive={page === totalPage}
+            >
+              {totalPage}
+            </PaginationLink>
+          </PaginationItem>
+        )}
+
+        <PaginationItem className="hidden md:block">
+          <PaginationNext
+            onClick={() => (page < totalPage ? setPage(page + 1) : "")}
+          />
+        </PaginationItem>
+
+        {page + 10 <= totalPage && totalPage > 9 && (
+          <PaginationItem>
+            <PaginationLink
+              onClick={() =>
+                page < totalPage - 10 ? setPage(page + 10) : setPage(totalPage)
+              }
+            >
+              {/* <DoubleArrowRightIcon /> */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zm6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12z"
+                />
+              </svg>
+            </PaginationLink>
+          </PaginationItem>
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+}
diff --git a/lib/menus.ts b/lib/menus.ts
index df3c15fa..cd079b56 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -38,7 +38,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
 
   let menusSelected = <any>[];
 
-  if (Number(roleId) == 3 && Number(levelNumber) == 1) {
+  if ((Number(roleId) == 3 || Number(roleId) == 14) && Number(levelNumber) == 1) {
     menusSelected = [
       {
         groupLabel: t("apps"),
@@ -1700,7 +1700,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
       },
     ];
   } else if (
-    (Number(roleId) == 3 || Number(roleId) == 4) &&
+    (Number(roleId) == 3 || Number(roleId) == 4 || Number(roleId) == 14 || Number(roleId) == 15) &&
     Number(levelNumber) == 2
   ) {
     if (Number(userLevelId) != 761) {
@@ -2158,7 +2158,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
       ];
     }
   } else if (
-    (Number(roleId) == 3 || Number(roleId) == 4) &&
+    (Number(roleId) == 3 || Number(roleId) == 4 || Number(roleId) == 14 || Number(roleId) == 15) &&
     Number(levelNumber) == 3
   ) {
     if (Number(userParentLevelId) != 761) {
diff --git a/service/content/content.ts b/service/content/content.ts
index 257c24f1..21d94937 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -47,22 +47,23 @@ export async function listDataAll(
 }
 
 export async function listDataImage(
-  size: any,
-  page: any,
-  isForSelf: any,
-  isApproval: any,
-  categoryFilter: any,
-  statusFilter: any,
-  needApprovalFromLevel: any,
-  creator: any,
-  source: any,
-  startDate: any,
-  endDate: any,
+  size: any = "",
+  page: any = "",
+  isForSelf: any = "",
+  isApproval: any = "",
+  categoryFilter: any = "",
+  statusFilter: any = "",
+  needApprovalFromLevel: any = "",
+  creator: any = "",
+  source: any = "",
+  startDate: any = "",
+  endDate: any = "",
   title: string = "",
-  creatorGroup: string = ""
+  creatorGroup: string = "",
+  isInt: boolean = false
 ) {
   return await httpGetInterceptor(
-    `media/list?enablePage=1&size=${size}&sortBy=createdAt&sort=desc&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
+    `media/list?enablePage=1&size=${size}&sortBy=createdAt&sort=desc&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}&needApprovalFromLevel=${needApprovalFromLevel}&isInt=${isInt}`
   );
 }
 
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 51876f78..b32ea0a3 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -31,9 +31,9 @@ export async function getCsrfToken() {
   //   }
 }
 
-export async function getHeroData() {
+export async function getHeroData(isInt: Boolean = false) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
+    `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}`
   );
 }