diff --git a/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx b/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
index 3e16b258..61cbd6c9 100644
--- a/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
+++ b/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { format } from "date-fns";
+import { Link } from "@/i18n/routing";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -154,12 +155,12 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <a href="/en/task/detail/[id]">
+            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
               </DropdownMenuItem>
-            </a>
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete
diff --git a/app/[locale]/(public)/satker/[satker_name]/page.tsx b/app/[locale]/(public)/satker/[satker_name]/page.tsx
new file mode 100644
index 00000000..e0864a5a
--- /dev/null
+++ b/app/[locale]/(public)/satker/[satker_name]/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ContentCategory from "@/components/landing-page/content-category";
+import HeaderBannerSatker from "@/components/landing-page/header-banner-satker";
+import NewContent from "@/components/landing-page/new-content";
+import WelcomeSatker from "@/components/landing-page/welcome-satker";
+import React from "react";
+
+const page = () => {
+  return (
+    <div>
+      <HeaderBannerSatker />
+      <WelcomeSatker />
+      <NewContent type="latest" />
+      <NewContent type="popular" />
+      <ContentCategory />
+    </div>
+  );
+};
+
+export default page;
diff --git a/app/[locale]/(public)/satker/layout.tsx b/app/[locale]/(public)/satker/layout.tsx
new file mode 100644
index 00000000..fab820cf
--- /dev/null
+++ b/app/[locale]/(public)/satker/layout.tsx
@@ -0,0 +1,22 @@
+import LayoutProvider from "@/providers/layout.provider";
+import LayoutContentProvider from "@/providers/content.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+import DashCodeFooter from "@/components/partials/footer";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeHeader from "@/components/partials/header";
+
+import { redirect } from "@/components/navigation";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+
+const layout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default layout;
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 3761694b..f846f7ad 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -27,12 +27,33 @@ import {
   createMedia,
   getTagsBySubCategoryId,
   listEnableCategory,
+  rejectFiles,
+  submitApproval,
 } from "@/service/content/content";
 import { detailMedia } from "@/service/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
 import { MailIcon } from "lucide-react";
 import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import {
+  DialogHeader,
+  DialogFooter,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { loading } from "@/config/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -48,6 +69,13 @@ type Category = {
   name: string;
 };
 
+type FileType = {
+  id: number;
+  url: string;
+  thumbnailFileUrl: string;
+  fileName: string;
+};
+
 type Detail = {
   id: string;
   title: string;
@@ -62,12 +90,20 @@ type Detail = {
   thumbnailLink: string;
   tags: string;
   statusName: string;
+  isPublish: boolean;
+  needApprovalFromLevel: number;
+  files: FileType[];
+  uploadedById: number;
 };
 
 export default function FormImageDetail() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const roleId = getCookiesDecrypt("urie");
 
+  const [modalOpen, setModalOpen] = useState(false);
   const { id } = useParams() as { id: string };
   console.log(id);
   const editor = useRef(null);
@@ -77,23 +113,22 @@ export default function FormImageDetail() {
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
-
+  const [status, setStatus] = useState("");
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
   const [tags, setTags] = useState<any[]>([]);
-  const [detail, setDetail] = useState<Detail>();
+  const [detail, setDetail] = useState<any>();
   const [refresh, setRefresh] = useState(false);
   const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [description, setDescription] = useState("");
+  const [main, setMain] = useState<any>([]);
   const [detailThumb, setDetailThumb] = useState<any>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
 
   const [selectedTarget, setSelectedTarget] = useState("");
-  const [unitSelection, setUnitSelection] = useState({
-    allUnit: false,
-    mabes: false,
-    polda: false,
-    polres: false,
-  });
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [isMabesApprover, setIsMabesApprover] = useState(false);
 
   let fileTypeId = "1";
 
@@ -117,21 +152,16 @@ export default function FormImageDetail() {
   //   }
   // };
 
-  const handleRemoveTag = (index: any) => {
-    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
-  };
-
-  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
-      const files = Array.from(event.target.files);
-      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
-      console.log("DATAFILE::", selectedFiles);
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsMabesApprover(true);
     }
-  };
-
-  const handleRemoveImage = (index: number) => {
-    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
-  };
+  }, [userLevelId, roleId]);
 
   const handleCheckboxChange = (id: number) => {
     setSelectedPublishers((prev) =>
@@ -177,8 +207,15 @@ export default function FormImageDetail() {
       if (id) {
         const response = await detailMedia(id);
         const details = response.data?.data;
-
+        console.log("detail", details);
+        setFiles(details?.files);
         setDetail(details);
+        setMain({
+          type: details?.fileType.name,
+          url: details?.files[0]?.url,
+          names: details?.files[0]?.fileName,
+          format: details?.files[0]?.format,
+        });
 
         if (details.publishedForObject) {
           const publisherIds = details.publishedForObject.map(
@@ -207,56 +244,92 @@ export default function FormImageDetail() {
     initState();
   }, [refresh, setValue]);
 
-  const save = async (data: ImageSchema) => {
-    const requestData = {
-      ...data,
-      title: data.title,
-      description: data.description,
-      htmlDescription: data.description,
-      fileTypeId,
-      categoryId: selectedTarget,
-      subCategoryId: selectedTarget,
-      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
-      statusId: "1",
-      publishedFor: "6",
-      creatorName: data.creatorName,
-      tags: "siap",
-      isYoutube: false,
-      isInternationalMedia: false,
-    };
-
-    const response = await createMedia(requestData);
-    console.log("Form Data Submitted:", requestData);
-
-    MySwal.fire({
-      title: "Sukses",
-      text: "Data berhasil disimpan.",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then(() => {
-      router.push("/en/contributor/content/image");
-    });
+  const actionApproval = (e: string) => {
+    setStatus(e);
+    setModalOpen(true);
+    setDescription("");
   };
 
-  const onSubmit = (data: ImageSchema) => {
-    MySwal.fire({
-      title: "Simpan Data",
-      text: "Apakah Anda yakin ingin menyimpan data ini?",
-      icon: "warning",
-      showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Simpan",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        save(data);
-      }
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      MySwal.fire({
+        title: "Simpan Approval",
+        text: "",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save();
+        }
+      });
+    }
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      files: [],
+      // files: isMabesApprover ? getPlacement() : [],
+    };
+
+    loading();
+    const response = await submitApproval(data);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    const dataReject = {
+      listFiles: rejectedFiles,
+    };
+
+    const resReject = await rejectFiles(dataReject);
+
+    if (resReject?.error) {
+      error(resReject.message);
+      return false;
+    }
+
+    close();
+
+    return false;
+  }
+
+  function handleDeleteFileApproval(id: number) {
+    const selectedFiles = files.filter((file) => file.id != id);
+    setFiles(selectedFiles);
+    const rejects = rejectedFiles;
+    rejects.push(id);
+    setRejectedFiles(rejects);
+  }
+  const handleMain = (
+    type: string,
+    url: string,
+    names: string,
+    format: string
+  ) => {
+    console.log("Test 3 :", type, url, names, format);
+    setMain({
+      type,
+      url,
+      names,
+      format,
     });
+    return false;
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form>
       {detail !== undefined ? (
         <div className="flex lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
@@ -413,14 +486,16 @@ export default function FormImageDetail() {
                 <div className="space-y-2">
                   <Label>Tag</Label>
                   <div className="flex flex-wrap gap-2">
-                    {detail?.tags?.split(",").map((tag, index) => (
-                      <Badge
-                        key={index}
-                        className="border rounded-md  px-2 py-2"
-                      >
-                        {tag.trim()}
-                      </Badge>
-                    ))}
+                    {detail?.tags
+                      ?.split(",")
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          className="border rounded-md  px-2 py-2"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))}
                   </div>
                 </div>
               </div>
@@ -469,6 +544,196 @@ export default function FormImageDetail() {
                 <p>Keterangan:</p>
                 <p className="text-sm text-slate-400">{detail?.statusName}</p>
               </div>
+              {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+              {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+                Number(detail?.uploadedById) == Number(userId) ? (
+                  ""
+                ) : (
+                  <div className="flex flex-col gap-2 p-3">
+                    <Button
+                      onClick={() => actionApproval("2")}
+                      color="primary"
+                      type="button"
+                    >
+                      <Icon icon="fa:check" className="mr-3" /> Setujui
+                    </Button>
+                    <Button
+                      onClick={() => actionApproval("3")}
+                      className="bg-orange-400 hover:bg-orange-300"
+                      type="button"
+                    >
+                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                    </Button>
+                    <Button
+                      onClick={() => actionApproval("4")}
+                      color="destructive"
+                      type="button"
+                    >
+                      <Icon icon="fa:times" className="mr-3" />
+                      Tolak
+                    </Button>
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+
+              <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md">
+                  <DialogHeader>
+                    <DialogTitle>Berikan Komentar</DialogTitle>
+                  </DialogHeader>
+                  {status == "2"
+                    ? files?.map((file) => (
+                        <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>
+                                <Icon icon="humbleicons:times" color="red" />
+                              </a>
+                            </div>
+                            <div className="flex flex-row gap-2">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <label
+                                  htmlFor="terms"
+                                  className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  Semua
+                                </label>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <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" />
+                                <label
+                                  htmlFor="terms"
+                                  className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  Wilayah
+                                </label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <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 className="flex flex-col gap-4">
+                    <Textarea
+                      placeholder="Type your message here."
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                    />
+                  </div>
+                  {status == "3" || status == "4" ? (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Kualitas media kurang baik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Kualitas media kurang baik")
+                        }
+                      >
+                        Kualitas media kurang baik
+                      </Badge>
+
+                      <Badge
+                        color={
+                          description === "Deskripsi kurang lengkap"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Deskripsi kurang lengkap")
+                        }
+                      >
+                        Deskripsi kurang lengkap
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Judul kurang tepat"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Judul kurang tepat")}
+                      >
+                        Judul kurang tepat
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Konten sangat bagus"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten sangat bagus")}
+                      >
+                        Konten sangat bagus
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Konten menarik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten menarik")}
+                      >
+                        Konten menarik
+                      </Badge>
+                    </div>
+                  )}
+                  <DialogFooter>
+                    <Button type="button" color="primary">
+                      Submit
+                    </Button>
+                    <Button
+                      type="button"
+                      color="destructive"
+                      onClick={() => setModalOpen(false)}
+                    >
+                      Cancel
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
             </Card>
           </div>
         </div>
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 09cf3cb5..9a6128ec 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -421,14 +421,6 @@ export default function FormImage() {
     // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
   };
 
-  // function showProgress() {
-  //   $('#modalProgress').modal('show');
-  // }
-
-  // function hideProgress() {
-  //   $('#modalProgress').modal('hide');
-  // }
-
   const onSubmit = (data: ImageSchema) => {
     MySwal.fire({
       title: "Simpan Data",
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx
index 6b59a642..9fd77d2a 100644
--- a/components/landing-page/division.tsx
+++ b/components/landing-page/division.tsx
@@ -2,50 +2,51 @@ import React, { useState } from "react";
 import { Button } from "../ui/button";
 import { Reveal } from "./Reveal";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { Link } from "@/i18n/routing";
 
 const Division = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [seeAllValue, setSeeAllValue] = useState(false);
 
   const regions = [
-    { name: "SIBER", logo: "/assets/satker/siber.png" },
-    { name: "DIVKUM", logo: "/assets/satker/divkum.png" },
-    { name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
-    { name: "SSDM", logo: "/assets/satker/ssdm.png" },
-    { name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
-    { name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
-    { name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
-    { name: "BRIMOB", logo: "/assets/satker/brimob.png" },
-    { name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
-    { name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
-    { name: "BINMAS", logo: "/assets/satker/binmas.png" },
-    { name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
-    { name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
-    { name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
-    { name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
-    { name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
-    { name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
-    { name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
-    { name: "POLAIR", logo: "/assets/satker/polair.png" },
-    { name: "POLUDARA", logo: "/assets/satker/poludara.png" },
-    { name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
-    { name: "AKPOL", logo: "/assets/satker/akpol.png" },
-    { name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
-    { name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
-    { name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
-    { name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
-    { name: "SLOG", logo: "/assets/satker/slog.png" },
-    { name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
-    { name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
-    { name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
-    { name: "SETUM", logo: "/assets/satker/setum.png" },
-    { name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
-    { name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
-    { name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
-    { name: "SOPS", logo: "/assets/satker/sops.png" },
-    { name: "SRENA", logo: "/assets/satker/srena.png" },
-    { name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
-    { name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
+    { name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
+    { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
+    { name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" },
+    { name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" },
+    { name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" },
+    { name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" },
+    { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/assets/satker/satuan-kerja-polri.png" },
+    { name: "BRIMOB", slug: "brimob", logo: "/assets/satker/brimob.png" },
+    { name: "DIV HUMAS", slug: "div-humas", logo: "/assets/satker/div-humas.png" },
+    { name: "PUSLITBANG", slug: "puslitbang", logo: "/assets/satker/puslitbang.png" },
+    { name: "BINMAS", slug: "binmas", logo: "/assets/satker/binmas.png" },
+    { name: "DIV TIK", slug: "div-tik", logo: "/assets/satker/div-tik.png" },
+    { name: "SPRIPIM", slug: "spripim", logo: "/assets/satker/spripim.png" },
+    { name: "DIVPROPRAM", slug: "divpropram", logo: "/assets/satker/div-propram.png" },
+    { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
+    { name: "PUSDOKKES", slug: "pusdokkes", logo: "/assets/satker/pusdokkes.png" },
+    { name: "BAHARKAM", slug: "baharkam", logo: "/assets/satker/baharkam.png" },
+    { name: "POLAIRUD", slug: "polairud", logo: "/assets/satker/polairud.png" },
+    { name: "POLAIR", slug: "polair", logo: "/assets/satker/polair.png" },
+    { name: "POLUDARA", slug: "poludara", logo: "/assets/satker/poludara.png" },
+    { name: "LEMDIKLAT", slug: "lemdiklat", logo: "/assets/satker/lemdiklat.png" },
+    { name: "AKPOL", slug: "akpol", logo: "/assets/satker/akpol.png" },
+    { name: "KORLANTAS", slug: "korlantas", logo: "/assets/satker/korlantas.png" },
+    { name: "PUSINAFIS", slug: "pusinafis", logo: "/assets/satker/pusinafis.png" },
+    { name: "PUSJARAH", slug: "pusjarah", logo: "/assets/satker/pusjarah.png" },
+    { name: "PUSIKNAS", slug: "pusiknas", logo: "/assets/satker/pusiknas.png" },
+    { name: "SLOG", slug: "slog", logo: "/assets/satker/slog.png" },
+    { name: "BAINTELKAM", slug: "baintelkam", logo: "/assets/satker/baintelkam.jpg" },
+    { name: "BARESKRIM", slug: "bareskrim", logo: "/assets/satker/bareskrim.png" },
+    { name: "DIVHUBINTER", slug: "divhubinter", logo: "/assets/satker/divhubinter.png" },
+    { name: "SETUM", slug: "setum", logo: "/assets/satker/setum.png" },
+    { name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
+    { name: "DENSUS 88", slug: "densus-88", logo: "/assets/satker/densus88.png" },
+    { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/assets/satker/sahli-kapolri.png" },
+    { name: "SOPS", slug: "sops", logo: "/assets/satker/sops.png" },
+    { name: "SRENA", slug: "srena", logo: "/assets/satker/srena.png" },
+    { name: "SESPIM POLRI", slug: "sespim-polri", logo: "/assets/satker/sespim-polri.png" },
+    { name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
   ];
 
   return (
@@ -70,22 +71,22 @@ const Division = () => {
           {regions.map((region, index) =>
             !seeAllValue ? (
               index < 7 ? (
-                <div key={index} className="flex flex-col items-center text-center group">
+                <Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
                   <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                     <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                   </div>
                   <p className="text-md font-semibold">{region.name}</p>
-                </div>
+                </Link>
               ) : (
                 ""
               )
             ) : (
-              <div key={index} className="flex flex-col items-center text-center group">
+              <Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
                 <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                   <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                 </div>
                 <p className="text-md font-semibold">{region.name}</p>
-              </div>
+              </Link>
             )
           )}
         </div>
diff --git a/components/landing-page/header-banner-satker.tsx b/components/landing-page/header-banner-satker.tsx
new file mode 100644
index 00000000..d0a3ba7c
--- /dev/null
+++ b/components/landing-page/header-banner-satker.tsx
@@ -0,0 +1,121 @@
+"use client";
+import { listData } from "@/service/landing/landing";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import { Link } from "@/i18n/routing";
+import { getPublicLocaleTimestamp } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+
+const HeaderBannerSatker = () => {
+  const router = useRouter();
+  const params = useParams();
+  const satkerName: any = params?.satker_name;
+  const asPath: any = usePathname();
+  const [content, setContent] = useState([]);
+
+  const [isBannerLoading, setIsBannerLoading] = useState(true);
+  const [centerPadding, setCenterPadding] = useState<any>();
+
+  useEffect(() => {
+    // async function initState() {
+    //   const res = await listCarousel();
+    //   setContent(res.data?.data);
+    //   setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
+    // }
+
+    async function fetchData() {
+      const res = await listData("1", "", "", 5, 0, "createdAt", "", "", satkerName);
+      let data = res?.data?.data?.content;
+      setContent(data);
+      setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
+      setIsBannerLoading(false);
+      console.log("Done");
+    }
+
+    fetchData();
+  }, [params?.page]);
+
+  const settings = {
+    className: "center",
+    // centerMode: true,
+    infinite: true,
+    centerPadding,
+    slidesToShow: 2,
+    autoplay: true,
+    speed: 1500,
+    autoplaySpeed: 15_000,
+    focusOnSelect: true,
+    responsive: [
+      {
+        breakpoint: 768,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "60px",
+          slidesToShow: 1,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          arrows: false,
+          centerMode: true,
+          centerPadding: "20px",
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+  return (
+    <div>
+      {/* Header */}
+      <div className="p-6 lg:px-16 flex flex-col lg:flex-row">
+        {isBannerLoading ? (
+          <SkeletonTheme highlightColor="#f2f2f2">
+            <Skeleton className="w-[100%] h-[480px]" />
+          </SkeletonTheme>
+        ) : (
+          <div className="mt-3">
+            <Carousel className="w-full h-full">
+              <CarouselContent>
+                {content?.map((row: any) => (
+                  <CarouselItem key={row?.id} className="basis-1/2">
+                    <div className="relative h-[310px] lg:h-[420px]">
+                      <img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
+                      <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
+                        <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
+                        <Link
+                          href={
+                            Number(row.fileType?.id) == 1
+                              ? `${asPath.includes("/satker/") == true ? asPath : ""}/image/detail/${row.slug}`
+                              : Number(row.fileType?.id) == 2
+                              ? `/video/detail/${row.slug}`
+                              : Number(row.fileType?.id) == 3
+                              ? `/document/detail/${row.slug}`
+                              : `/audio/detail/${row.slug}`
+                          }
+                        >
+                          <h3>{row.title}</h3>
+                        </Link>
+                        <p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
+                          {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
+                          <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
+                        </p>
+                      </div>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HeaderBannerSatker;
diff --git a/components/landing-page/welcome-polda.tsx b/components/landing-page/welcome-polda.tsx
index 41236231..fa78b17f 100644
--- a/components/landing-page/welcome-polda.tsx
+++ b/components/landing-page/welcome-polda.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { capitalize } from "@/utils/globals";
 
 const WelcomePolda = () => {
   const router = useRouter();
diff --git a/components/landing-page/welcome-satker.tsx b/components/landing-page/welcome-satker.tsx
new file mode 100644
index 00000000..4febc618
--- /dev/null
+++ b/components/landing-page/welcome-satker.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { capitalize } from "@/utils/globals";
+
+const WelcomeSatker = () => {
+  const router = useRouter();
+  const asPath: any = usePathname();
+  const params = useParams();
+  const satkerName: any = params?.satker_name;
+  const [categorySelect, setCategorySelect] = useState("0");
+  const [search, setSearch] = useState();
+
+  useEffect(() => {
+    function initState() {
+      console.log(categorySelect);
+    }
+
+    initState();
+  }, [categorySelect]);
+
+  return (
+    <section className="w-full py-8 px-4 ">
+      <div className="max-w-screen-xl mx-auto text-center">
+        {/* Heading */}
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
+          Selamat Datang di <span className="text-[#bb3523] dark:text-white">Satker</span> <span className="capitalize">{satkerName.replace("-", " ")}</span>
+        </h1>
+        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
+        <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
+          Liputan resmi yang bersumber dari kegiatan Polri di Satker <span className="capitalize">{satkerName.replace("-", " ")}</span>
+        </p>
+
+        {/* Search Form */}
+        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
+          {/* Dropdown */}
+          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
+                  <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Konten
+                  <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                    <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
+                  </svg>
+                </a>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiYoutube className="mr-2" />
+                    Audio Visual
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiMusic className="mr-2" />
+                    Audio
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiImage className="mr-2" />
+                    Foto
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiFile className="mr-2" />
+                    Teks
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
+              <span className="material-icons text-black dark:text-white px-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+                  />
+                </svg>
+              </span>
+              <input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
+            </div>
+          </div>
+
+          {/* Search Input */}
+
+          {/* Button */}
+          <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+            Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WelcomeSatker;
diff --git a/service/auth.ts b/service/auth.ts
index 97dc3248..2d03c465 100644
--- a/service/auth.ts
+++ b/service/auth.ts
@@ -13,6 +13,7 @@ export async function login(data: any) {
     'content-type': 'application/x-www-form-urlencoded',
   };
   return httpPost(pathUrl, headers, qs.stringify(data));
+
 }
 
 export async function getProfile(token: any) {
diff --git a/service/content/content.ts b/service/content/content.ts
index 835e1a46..15ab6e88 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -1,4 +1,7 @@
-import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
+import {
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
 
 // export async function listDataAll(
 //   isForSelf,
@@ -174,3 +177,13 @@ export async function convertSPIT(data: any) {
   const url = "media/spit/convert";
   return httpPostInterceptor(url, data);
 }
+
+export async function submitApproval(data: any) {
+  const url = "media/approval";
+  return httpPostInterceptor(url, data);
+}
+
+export async function rejectFiles(data: any) {
+  const url = "media/file/rejects";
+  return httpPostInterceptor(url, data);
+}