diff --git a/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx b/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx
new file mode 100644
index 00000000..69e9ec79
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx
@@ -0,0 +1,81 @@
+"use client";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { MoreVertical } from "lucide-react";
+
+const FeedbackForm = () => {
+  const [region, setRegion] = useState("nasional");
+  const [feedbackList, setFeedbackList] = useState<string[]>([
+    "Silahkan berikan rating Anda terkait dengan kemudahan akses website MediaHUB Polri",
+    "Silahkan berikan rating Anda terkait dengan konten MediaHUB Polri",
+    "Silahkan berikan rating Anda terkait dengan tampilan MediaHUB Polri",
+  ]);
+  const [newFeedback, setNewFeedback] = useState("");
+
+  const handleAddFeedback = () => {
+    if (newFeedback.trim()) {
+      setFeedbackList([...feedbackList, newFeedback.trim()]);
+      setNewFeedback("");
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-md p-6 flex flex-col md:flex-row gap-6">
+        <div className="md:w-1/2 space-y-4">
+          <div>
+            <p className="font-medium mb-2">Wilayah Publish</p>
+            <RadioGroup
+              defaultValue="nasional"
+              onValueChange={(value) => setRegion(value)}
+              className="flex items-center gap-6"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="nasional" id="nasional" />
+                <label htmlFor="nasional">Nasional</label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="internasional" id="internasional" />
+                <label htmlFor="internasional">Internasional</label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          <div>
+            <p className="font-medium mb-2">Poin Penilaian</p>
+            <Textarea
+              placeholder="Tulis poin yang ingin dijadikan penilaian"
+              value={newFeedback}
+              onChange={(e) => setNewFeedback(e.target.value)}
+              className="min-h-[100px]"
+            />
+          </div>
+
+          <Button
+            onClick={handleAddFeedback}
+            className="bg-blue-600 text-white"
+          >
+            Tambah Feedback
+          </Button>
+        </div>
+
+        <div className="md:w-1/2">
+          <h3 className="font-semibold mb-2 border-b pb-1">Feedback</h3>
+          <p className="font-medium mb-4">Pertanyaan</p>
+          <ul className="space-y-3">
+            {feedbackList.map((item, index) => (
+              <li key={index} className="flex justify-between items-start">
+                <span>{item}</span>
+                <MoreVertical className="w-4 h-4 text-gray-600 cursor-pointer" />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackForm;
diff --git a/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx b/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx
new file mode 100644
index 00000000..497d0b4b
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx
@@ -0,0 +1,16 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FeedbackForm from "./components/feedback";
+
+const FeedbackPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="bg-white rounded-md p-4 shadow-lg border">
+        <h2 className="text-lg font-semibold">Feedback</h2>
+      </div>
+      <FeedbackForm />
+    </div>
+  );
+};
+
+export default FeedbackPage;
diff --git a/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx b/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx
new file mode 100644
index 00000000..ce38d3a2
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx
@@ -0,0 +1,37 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { FaFacebookF, FaGoogle } from "react-icons/fa";
+
+const SocialMediaPage = async () => {
+  return (
+    <div className="space-y-4">
+      <SiteBreadcrumb />
+      <div className="bg-white rounded-md p-4 shadow-lg border">
+        <h2 className="text-lg font-semibold">Social Media</h2>
+      </div>
+
+      <div className="bg-white rounded-md p-6 shadow-lg border">
+        <p className="text-base mb-6">Koneksi Social Media</p>
+        <div className="flex flex-col md:flex-row justify-center items-center gap-10">
+          <div className="flex flex-col items-center">
+            <Button className="bg-[#3b5998] hover:bg-[#2d4373] text-white px-6 py-2 rounded-md flex items-center gap-2">
+              <FaFacebookF className="text-lg" />
+              Login With Facebook
+            </Button>
+            <p className="mt-2 text-sm text-gray-700">Tidak Terhubung</p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <Button className="bg-[#ea4335] hover:bg-[#c73a2a] text-white px-6 py-2 rounded-md flex items-center gap-2">
+              <FaGoogle className="text-lg" />
+              Login With Google
+            </Button>
+            <p className="mt-2 text-sm text-gray-700">Tidak Terhubung</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SocialMediaPage;
diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx
index 7d1b26ae..84374875 100644
--- a/components/landing-page/area-coverage-and-work-units.tsx
+++ b/components/landing-page/area-coverage-and-work-units.tsx
@@ -1,23 +1,53 @@
 "use client";
 
-import React from "react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import Image from "next/image";
 import Coverage from "./coverage";
 import Division from "./division";
 
 const AreaCoverageWorkUnits = () => {
+  const [openPolda, setOpenPolda] = useState(false);
+  const [openSatker, setOpenSatker] = useState(false);
+
+  useEffect(() => {
+    if (openPolda || openSatker) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    // Cleanup on unmount
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [openPolda, openSatker]);
   return (
     <div className="mx-auto px-4 lg:px-12 py-6">
       <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
-        Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
+        Liputan <span className="text-[#bb3523]">Wilayah</span> &{" "}
+        <span className="text-[#bb3523]">Satker</span>
       </h2>
       <div className="h-1 w-[250px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
       <div className="flex flex-col justify-center lg:flex-row gap-8">
         {/* POLDA */}
-        <Dialog>
+        <Dialog open={openPolda} onOpenChange={setOpenPolda}>
           <DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
-            <Image width={1920} height={1080} alt="indo" src="/assets/indo.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
+            <Image
+              width={1920}
+              height={1080}
+              alt="indo"
+              src="/assets/indo.png"
+              className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300"
+            />
             <p className="text-base font-bold">Polda Jajaran</p>
           </DialogTrigger>
           <DialogContent size="md">
@@ -39,9 +69,15 @@ const AreaCoverageWorkUnits = () => {
         </Dialog>
 
         {/* SATKER */}
-        <Dialog>
+        <Dialog open={openSatker} onOpenChange={setOpenSatker}>
           <DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
-            <Image width={1920} height={1080} alt="polri" src="/assets/logo-polri.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
+            <Image
+              width={1920}
+              height={1080}
+              alt="polri"
+              src="/assets/logo-polri.png"
+              className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300"
+            />
             <p className="text-base font-bold">Satuan Kerja Polri</p>
           </DialogTrigger>
           <DialogContent size="md">
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index 04b10f9c..42ceaad6 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -70,13 +70,21 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
     initFetch();
   }, []);
 
+  useEffect(() => {
+    document.body.classList.add("overflow-hidden");
+
+    return () => {
+      document.body.classList.remove("overflow-hidden");
+    };
+  }, []);
+
   const initFetch = async () => {
     const response = await getHeroData();
     console.log(response);
     setHeroData(response?.data?.data?.content);
   };
   return (
-    <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50">
+    <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
       <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
         <Swiper
           pagination={{ dynamicBullets: true }}
@@ -180,33 +188,6 @@ const SurveyIntroModal = ({ onNext }: { onNext: () => void }) => {
   );
 };
 
-const options = {
-  q1: [
-    "Setiap hari",
-    "Beberapa kali seminggu",
-    "Beberapa kali dalam sebulan",
-    "Baru pertama kali",
-  ],
-  q2a: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"],
-  q2b: ["Sangat mudah", "Mudah", "Cukup", "Sulit", "Sangat sulit"],
-  q2c: ["Sangat cepat", "Cepat", "Cukup", "Lambat", "Sangat lambat"],
-  q3a: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"],
-  q3b: [
-    "Sangat lengkap",
-    "Lengkap",
-    "Cukup",
-    "Kurang lengkap",
-    "Tidak lengkap",
-  ],
-  q4: [
-    "Sangat membantu",
-    "Membantu",
-    "Cukup membantu",
-    "Kurang membantu",
-    "Tidak membantu",
-  ],
-};
-
 const ONE_MONTH = 30 * 24 * 60 * 60 * 1000;
 
 const Hero: React.FC = () => {
diff --git a/lib/menus.ts b/lib/menus.ts
index 278c1a8f..d23e581c 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -2787,22 +2787,22 @@ export function getMenuList(pathname: string, t: any): Group[] {
         menus: [
           {
             id: "settings",
-            href: "/supervisor/settings",
+            href: "/supervisor/setting",
             label: t("settings"),
-            active: pathname.includes("/settings"),
+            active: pathname.includes("/setting"),
             icon: "uil:setting",
             submenus: [
               {
-                href: "/settings/feedback",
+                href: "/supervisor/setting/feedback",
                 label: t("feedback"),
-                active: pathname.includes("/settings/feedback"),
+                active: pathname.includes("/supervisor/setting/feedback"),
                 icon: "clarity:employee-group-line",
                 children: [],
               },
               {
-                href: "/settings/social-media",
+                href: "/supervisor/setting/social-media",
                 label: t("social-media"),
-                active: pathname.includes("/settings/social-media"),
+                active: pathname.includes("/supervisor/setting/social-media"),
                 icon: "clarity:employee-group-line",
                 children: [],
               },