diff --git a/components/landing/BodyLayout.tsx b/components/landing/BodyLayout.tsx
index 217bcec..3b69acd 100644
--- a/components/landing/BodyLayout.tsx
+++ b/components/landing/BodyLayout.tsx
@@ -1,6 +1,10 @@
 "use client";
 import AddsCarousel from "./adds-carousel";
+import CategorySatker from "./CategorySatker";
+import DigitalServices from "./digital-services";
 import MedolUpdate from "./MedolUpdate";
+import PolriApps from "./PolriApps";
+import RegionalNews from "./RegionalNews";
 import SocialMediaNew from "./social-media";
 
 export default function BodyLayout() {
@@ -20,6 +24,7 @@ export default function BodyLayout() {
         </div> */}
         <div className="w-full space-y-5">
           <AddsCarousel />
+          <DigitalServices />
           <MedolUpdate />
           <SocialMediaNew />
         </div>
diff --git a/components/landing/CategorySatker.tsx b/components/landing/CategorySatker.tsx
index b9b2316..2dcc375 100644
--- a/components/landing/CategorySatker.tsx
+++ b/components/landing/CategorySatker.tsx
@@ -11,85 +11,49 @@ import {
   useDisclosure,
 } from "@heroui/react";
 import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
-import React from "react";
+import React, { useEffect } from "react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 
-export default function CategorySatker() {
+export default function CategorySatker(props: {
+  opened: boolean;
+  modalStatus: (status: boolean) => void;
+}) {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [scrollBehavior, setScrollBehavior] =
     React.useState<ModalProps["scrollBehavior"]>("inside");
   const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
   const t = useTranslations("Landing");
 
-  const list = [
-    {
-      id: 6,
-      img: "/assets/satker2/yanma-icon.png",
-      title: "Yanma",
-      path: "/news/yanma",
-    },
-    {
-      id: 1,
-      img: "/assets/satker2/siber.svg",
-      title: "Siber",
-      path: "/news/siber",
-    },
-    {
-      id: 2,
-      img: "/assets/satker2/divkum.svg",
-      title: "Divkum",
-      path: "/news/divkum",
-    },
-    {
-      id: 3,
-      img: "/assets/satker2/puskeu.svg",
-      title: "Puskeu",
-      path: "/news/puskeu",
-    },
-    {
-      id: 4,
-      img: "/assets/satker2/ssdm.svg",
-      title: "SSDM",
-      path: "/news/ssdm",
-    },
-    {
-      id: 5,
-      img: "/assets/satker2/itwasum.svg",
-      title: "Itwasum",
-      path: "/news/itwasum",
-    },
-    // {
-    //   id: 6,
-    //   img: "/assets/satker2/stik-ptik.svg",
-    //   title: "STIK-PTIK",
-    //   path: "/news/stik-ptik",
-    // },
-  ];
+  useEffect(() => {
+    if (props.opened) {
+      onOpen();
+    }
+  }, [props.opened]);
 
   const SatkerAll = [
     {
       id: 36,
       img: "/assets/satker2/yanma.png",
-      title: "Yanma",
+      title: "YANMA",
       path: "/news/yanma",
     },
     {
       id: 1,
       img: "/assets/satker2/siber.svg",
-      title: "Siber",
+      title: "SIBER",
       path: "/news/siber",
     },
     {
       id: 2,
       img: "/assets/satker2/divkum.svg",
-      title: "Divkum",
+      title: "DIVKUM",
       path: "/news/divkum",
     },
     {
       id: 3,
       img: "/assets/satker2/puskeu.svg",
-      title: "Puskeu",
+      title: "PUSKEU",
       path: "/news/puskeu",
     },
     {
@@ -101,7 +65,7 @@ export default function CategorySatker() {
     {
       id: 5,
       img: "/assets/satker2/itwasum.svg",
-      title: "Itwasum",
+      title: "ITWASUM",
       path: "/news/itwasum",
     },
     {
@@ -167,7 +131,7 @@ export default function CategorySatker() {
     {
       id: 16,
       img: "/assets/satker2/baharkam.svg",
-      title: "baharkam",
+      title: "BAHARKAM",
       path: "/news/baharkam",
     },
     {
@@ -322,94 +286,67 @@ export default function CategorySatker() {
   };
 
   return (
-    <div className="text-center bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523] rounded-md h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
-      <div className="text-xl text-white w-full justify-center flex">
-        <p className="border-b-3 border-white py-2 w-fit">
-          {" "}
-          {t("kategoriSatker")}
-        </p>
-      </div>
-      <div className="flex items-center justify-around">
-        <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
-          {list.map((item: any, index: any) => (
-            <Link
-              href={`/news/satker/${changeNameToSlug(item.title)}`}
-              key={item.path}
-            >
-              <div
-                key={index}
-                className="w-[157px] h-[140px] flex flex-col items-center justify-evenly   "
-              >
-                <img src={item.img} className="h-[60px]" />
-                <p className="text-xs font-bold text-white">{item.title}</p>
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-      <div>
-        <Button
+    <>
+      {/* <Button
           onPress={onOpen}
           className="border-red-700 text-white w-fit"
           size="sm"
           variant="bordered"
         >
           {t("lebihBanyak")}
-        </Button>
-        <Modal
-          isOpen={isOpen}
-          onOpenChange={onOpenChange}
-          size="full"
-          scrollBehavior={scrollBehavior}
-          placement={modalPlacement}
-          classNames={{
-            wrapper: "bg-white",
-            base: "bg-white min-h-full",
-          }}
-        >
-          <ModalContent>
-            {(onClose) => (
-              <>
-                <ModalHeader className="flex flex-col text-black items-center min-h text-3xl font-semibold">
-                  <div className="text-xl text-black w-full justify-center flex">
-                    <p className="border-b-3 border-[#C3170F] py-2 w-fit">
-                      {t("kategoriSatker")}
+        </Button> */}
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={() => {
+          props.modalStatus(!props.opened);
+          onOpenChange();
+        }}
+        size="5xl"
+        scrollBehavior={scrollBehavior}
+        placement={modalPlacement}
+        className="bg-white"
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col text-black items-center min-h text-3xl font-semibold">
+                <div className="text-xl text-black w-full justify-center flex">
+                  <p className="border-b-3 border-[#C3170F] py-2 w-fit">
+                    {/* {t("kategoriSatker")} */}
+                    Satuan Kerja Polri
+                  </p>
+                </div>
+              </ModalHeader>
+              <ModalBody className="flex flex-row flex-wrap justify-center text-center">
+                {SatkerAll.map((item: any, index: any) => (
+                  <div
+                    key={index.id}
+                    className="w-[140px] h-[115px] flex flex-col items-center justify-center  rounded-lg shadow-sm"
+                  >
+                    <Link href={`/news/satker/${changeNameToSlug(item.title)}`}>
+                      {" "}
+                      <img className="h-[59px] w-[50px]" src={item.img} />
+                    </Link>
+                    <p className="text-xs font-bold text-black pt-2">
+                      {item.title}
                     </p>
                   </div>
-                </ModalHeader>
-                <ModalBody className="flex flex-row flex-wrap justify-center text-center">
-                  {SatkerAll.map((item: any, index: any) => (
-                    <div
-                      key={index.id}
-                      className="w-[140px] h-[115px] flex flex-col items-center justify-center  rounded-lg shadow-sm"
-                    >
-                      <Link
-                        href={`/news/satker/${changeNameToSlug(item.title)}`}
-                      >
-                        {" "}
-                        <img className="h-[59px] w-[50px]" src={item.img} />
-                      </Link>
-                      <p className="text-xs font-bold text-black pt-2">
-                        {item.title}
-                      </p>
-                    </div>
-                  ))}
-                </ModalBody>
-                <ModalFooter>
-                  <Button
-                    variant="light"
-                    onPress={onClose}
-                    className="text-danger"
-                  >
-                    {" "}
-                    {t("tutup")}
-                  </Button>
-                </ModalFooter>
-              </>
-            )}
-          </ModalContent>
-        </Modal>
-      </div>
-    </div>
+                ))}
+              </ModalBody>
+              <ModalFooter>
+                <Button
+                  variant="light"
+                  onPress={onClose}
+                  className="text-danger"
+                >
+                  {" "}
+                  {t("tutup")}
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
diff --git a/components/landing/PolriApps.tsx b/components/landing/PolriApps.tsx
index 72f2b8b..9a0ce19 100644
--- a/components/landing/PolriApps.tsx
+++ b/components/landing/PolriApps.tsx
@@ -15,158 +15,128 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 
-export default function PolriApps() {
+const listAppsAll = [
+  {
+    id: 1,
+    img: "/landing-polri-super-apps.png",
+    title: "Polri Super Apps",
+    path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
+  },
+  {
+    id: 2,
+    img: "/landing-portal-humas.png",
+    title: "Portal Humas",
+    path: "https://portal.humas.polri.go.id/",
+  },
+  {
+    id: 3,
+    img: "/landing-mediahub-polri.png",
+    title: "Portal Humas",
+    path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
+  },
+  {
+    id: 4,
+    img: "/landing-polri-tv.png",
+    title: "Portal Humas",
+    path: "https://play.google.com/store/apps/details?id=com.polritv",
+  },
+  {
+    id: 5,
+    img: "/landing-inp.png",
+    title: "Portal Humas",
+    path: "https://inp.polri.go.id/",
+  },
+  {
+    id: 6,
+    img: "/landing-polisiku.png",
+    title: "Portal Humas",
+    path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
+  },
+  {
+    id: 7,
+    img: "/landing-e-rikkes.png",
+    title: "e-RIKKES",
+    path: "https://erikkes.id/",
+  },
+  {
+    id: 8,
+    img: "/landing-e-ppsi.png",
+    title: "e-PPSI",
+    path: "https://eppsi.id/",
+  },
+  {
+    id: 9,
+    img: "/landing-bos.png",
+    title: "BOS",
+    path: "https://bos.polri.go.id/login",
+  },
+  {
+    id: 10,
+    img: "/landing-signal.png",
+    title: "SIGNAL",
+    path: "https://play.google.com/store/apps/details?id=app.signal.id",
+  },
+
+  {
+    id: 11,
+    img: "/landing-skck.png",
+    title: "SKCK Online",
+    path: "https://skck.polri.go.id/",
+  },
+  {
+    id: 12,
+    img: "/landing-propam-presisi.png",
+    title: "Propam Presisi",
+    path: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
+  },
+  {
+    id: 13,
+    img: "/landing-sdm-polri.png",
+    title: "SDM Polri",
+    path: "https://penerimaan.polri.go.id/",
+  },
+  {
+    id: 14,
+    img: "/landing-e-avis.png",
+    title: "e-AVIS",
+    path: "https://e-avis.korlantas.polri.go.id/",
+  },
+  {
+    id: 10,
+    img: "/landing-wbs.png",
+    title: "Whistle Blowing System",
+    path: "https://pengaduan-penerimaan.polri.go.id/",
+  },
+
+  {
+    id: 11,
+    img: "/landing-dumas-presisi.png",
+    title: "Dumas Presisi",
+    path: "https://dumaspresisi.polri.go.id/",
+  },
+  {
+    id: 12,
+    img: "/landing-sinar.png",
+    title: "Sinar",
+    path: "https://www.digitalkorlantas.id/sim/",
+  },
+];
+
+export default function PolriApps(props: {
+  opened: boolean;
+  modalStatus: (status: boolean) => void;
+}) {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [scrollBehavior, setScrollBehavior] =
     React.useState<ModalProps["scrollBehavior"]>("inside");
   const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
   const t = useTranslations("Landing");
 
-  const listApps = [
-    {
-      id: 1,
-      img: "/landing-polri-super-apps.png",
-      title: "Polri Super Apps",
-      path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
-    },
-    {
-      id: 2,
-      img: "/landing-portal-humas.png",
-      title: "Portal Humas",
-      path: "https://portal.humas.polri.go.id/",
-    },
-    {
-      id: 3,
-      img: "/landing-mediahub-polri.png",
-      title: "Portal Humas",
-      path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
-    },
-    {
-      id: 4,
-      img: "/landing-polri-tv.png",
-      title: "Portal Humas",
-      path: "https://play.google.com/store/apps/details?id=com.polritv",
-    },
-    {
-      id: 5,
-      img: "/landing-inp.png",
-      title: "Portal Humas",
-      path: "https://inp.polri.go.id/",
-    },
-    {
-      id: 6,
-      img: "/landing-polisiku.png",
-      title: "Portal Humas",
-      path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
-    },
-  ];
-
-  const listAppsAll = [
-    {
-      id: 1,
-      img: "/landing-polri-super-apps.png",
-      title: "Polri Super Apps",
-      path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
-    },
-    {
-      id: 2,
-      img: "/landing-portal-humas.png",
-      title: "Portal Humas",
-      path: "https://portal.humas.polri.go.id/",
-    },
-    {
-      id: 3,
-      img: "/landing-mediahub-polri.png",
-      title: "Portal Humas",
-      path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
-    },
-    {
-      id: 4,
-      img: "/landing-polri-tv.png",
-      title: "Portal Humas",
-      path: "https://play.google.com/store/apps/details?id=com.polritv",
-    },
-    {
-      id: 5,
-      img: "/landing-inp.png",
-      title: "Portal Humas",
-      path: "https://inp.polri.go.id/",
-    },
-    {
-      id: 6,
-      img: "/landing-polisiku.png",
-      title: "Portal Humas",
-      path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
-    },
-    {
-      id: 7,
-      img: "/landing-e-rikkes.png",
-      title: "e-RIKKES",
-      path: "https://erikkes.id/",
-    },
-    {
-      id: 8,
-      img: "/landing-e-ppsi.png",
-      title: "e-PPSI",
-      path: "https://eppsi.id/",
-    },
-    {
-      id: 9,
-      img: "/landing-bos.png",
-      title: "BOS",
-      path: "https://bos.polri.go.id/login",
-    },
-    {
-      id: 10,
-      img: "/landing-signal.png",
-      title: "SIGNAL",
-      path: "https://play.google.com/store/apps/details?id=app.signal.id",
-    },
-
-    {
-      id: 11,
-      img: "/landing-skck.png",
-      title: "SKCK Online",
-      path: "https://skck.polri.go.id/",
-    },
-    {
-      id: 12,
-      img: "/landing-propam-presisi.png",
-      title: "Propam Presisi",
-      path: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
-    },
-    {
-      id: 13,
-      img: "/landing-sdm-polri.png",
-      title: "SDM Polri",
-      path: "https://penerimaan.polri.go.id/",
-    },
-    {
-      id: 14,
-      img: "/landing-e-avis.png",
-      title: "e-AVIS",
-      path: "https://e-avis.korlantas.polri.go.id/",
-    },
-    {
-      id: 10,
-      img: "/landing-wbs.png",
-      title: "Whistle Blowing System",
-      path: "https://pengaduan-penerimaan.polri.go.id/",
-    },
-
-    {
-      id: 11,
-      img: "/landing-dumas-presisi.png",
-      title: "Dumas Presisi",
-      path: "https://dumaspresisi.polri.go.id/",
-    },
-    {
-      id: 12,
-      img: "/landing-sinar.png",
-      title: "Sinar",
-      path: "https://www.digitalkorlantas.id/sim/",
-    },
-  ];
+  useEffect(() => {
+    if (props.opened) {
+      onOpen();
+    }
+  }, [props.opened]);
 
   // useEffect(() => {
   //     function updateLimitedData() {
@@ -193,36 +163,8 @@ export default function PolriApps() {
   };
 
   return (
-    <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
-      <div className="text-xl text-white w-full justify-center flex">
-        <p className="border-b-3 border-white py-2 w-fit"> {t("aplikasi")}</p>
-      </div>
-      <div className="flex items-center justify-around py-10">
-        {/* <div>
-          <ChevronLeftWhite color="orange" />
-        </div> */}
-        <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
-          {listApps.map((item: any, index: any) => (
-            <Link
-              href={`/news/all?polda=${changeNameToSlug(item.title)}`}
-              key={item.path}
-              target="_blank"
-            >
-              <div
-                key={item.id}
-                className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
-              >
-                <Image radius="lg" className="h-[59px]" src={item.img} />
-                <p className="text-xs font-bold text-white">{item.title}</p>
-              </div>
-            </Link>
-          ))}
-        </div>
-        {/* <div>
-          <ChevronRightWhite color="orange" />
-        </div> */}
-      </div>
-      <div className="flex justify-center w-full items-center">
+    <>
+      {/* <div className="flex justify-center w-full items-center">
         <Button
           onPress={onOpen}
           className="border-red-700 text-white w-fit"
@@ -231,14 +173,17 @@ export default function PolriApps() {
         >
           {t("lebihBanyak")}
         </Button>
-      </div>
+      </div> */}
       <Modal
         isOpen={isOpen}
-        onOpenChange={onOpenChange}
+        onOpenChange={() => {
+          props.modalStatus(!props.opened);
+          onOpenChange();
+        }}
         size="5xl"
         scrollBehavior={scrollBehavior}
         placement={modalPlacement}
-        className="bg-white text-black"
+        className="bg-white"
       >
         <ModalContent>
           {(onClose) => (
@@ -266,6 +211,7 @@ export default function PolriApps() {
                           radius="lg"
                           className="h-[59px]"
                           src={item.img}
+                          alt="apps"
                         />
                         <p className="text-xs font-bold text-black">
                           {item.title}
@@ -288,6 +234,6 @@ export default function PolriApps() {
           )}
         </ModalContent>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/components/landing/RegionalNews.tsx b/components/landing/RegionalNews.tsx
index 883147b..05ebd6b 100644
--- a/components/landing/RegionalNews.tsx
+++ b/components/landing/RegionalNews.tsx
@@ -15,270 +15,240 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 
-export default function RegionalNews() {
+const listPoldaAll = [
+  {
+    id: 1,
+    img: "/assets/polda/polda-metro-jaya.svg",
+    title: "Polda Metro Jaya",
+    path: "polda-metro-jaya",
+  },
+  {
+    id: 2,
+    img: "/assets/polda/polda-jawa-barat.svg",
+    title: "Polda Jawa Barat",
+    path: "polda-jabar",
+  },
+  {
+    id: 3,
+    img: "/assets/polda/polda-banten.svg",
+    title: "Polda Banten",
+    path: "polda-banten",
+  },
+  {
+    id: 4,
+    img: "/assets/polda/polda-jateng.svg",
+    title: "Polda Jawa Tengah",
+    path: "polda-jateng",
+  },
+  {
+    id: 5,
+    img: "/assets/polda/polda-diy.svg",
+    title: "Polda D.I Yogyakarta",
+    path: "polda-diy",
+  },
+  {
+    id: 6,
+    img: "/assets/polda/polda-jatim.svg",
+    title: "Polda Jawa Timur",
+    path: "polda-jatim",
+  },
+  {
+    id: 7,
+    img: "/assets/polda/polda-aceh.svg",
+    title: "Polda Aceh",
+    path: "polda-aceh",
+  },
+  {
+    id: 8,
+    img: "/assets/polda/polda-sumut.svg",
+    title: "Polda Sumatra Utara",
+    path: "polda-sumut",
+  },
+  {
+    id: 9,
+    img: "/assets/polda/polda-sumbar.svg",
+    title: "Polda Sumatra Barat",
+    path: "polda-sumbar",
+  },
+  {
+    id: 10,
+    img: "/assets/polda/polda-riau.svg",
+    title: "Polda Riau",
+    path: "polda-riau",
+  },
+  {
+    id: 11,
+    img: "/assets/polda/polda-kepri.svg",
+    title: "Polda Kep.Riau",
+    path: "polda-kepri",
+  },
+  {
+    id: 12,
+    img: "/assets/polda/polda-jambi.svg",
+    title: "Polda Jambi",
+    path: "polda-jambi",
+  },
+  {
+    id: 13,
+    img: "/assets/polda/polda-jambi.svg",
+    title: "Polda Jambi",
+    path: "polda-jambi",
+  },
+  {
+    id: 14,
+    img: "/assets/polda/polda-sumsel.svg",
+    title: "Polda Sumatra Selatan",
+    path: "polda-sumsel",
+  },
+  {
+    id: 15,
+    img: "/assets/polda/polda-sumsel.svg",
+    title: "Polda Kep.Bangka Belitung",
+    path: "polda-babel",
+  },
+  {
+    id: 16,
+    img: "/assets/polda/polda-bengkulu.svg",
+    title: "Polda Bengkulu",
+    path: "polda-bengkulu",
+  },
+  {
+    id: 17,
+    img: "/assets/polda/polda-lampung.svg",
+    title: "Polda Lampung",
+    path: "polda-lampung",
+  },
+  {
+    id: 18,
+    img: "/assets/polda/polda-ntb.svg",
+    title: "Polda Nusa Tenggara Barat",
+    path: "polda-ntb",
+  },
+  {
+    id: 19,
+    img: "/assets/polda/polda-ntb.svg",
+    title: "Polda Nusa Tenggara Barat",
+    path: "polda-ntb",
+  },
+  {
+    id: 20,
+    img: "/assets/polda/polda-ntt.svg",
+    title: "Polda Nusa Tenggara Timur",
+    path: "polda-ntt",
+  },
+  {
+    id: 21,
+    img: "/assets/polda/polda-bali.svg",
+    title: "Polda Bali",
+    path: "polda-bali",
+  },
+  {
+    id: 22,
+    img: "/assets/polda/polda-kalbar.svg",
+    title: "Polda Kalimantan Barat",
+    path: "polda-kalbar",
+  },
+  {
+    id: 23,
+    img: "/assets/polda/polda-kalteng.svg",
+    title: "Polda Kalimantan Tengah",
+    path: "polda-kalteng",
+  },
+  {
+    id: 24,
+    img: "/assets/polda/polda-kalsel.svg",
+    title: "Polda Kalimantan Selatan",
+    path: "polda-kalsel",
+  },
+  {
+    id: 25,
+    img: "/assets/polda/polda-kaltim.svg",
+    title: "Polda Kalimantan Timur",
+    path: "polda-kaltim",
+  },
+  {
+    id: 26,
+    img: "/assets/polda/polda-kalut.svg",
+    title: "Polda Kalimantan Utara",
+    path: "polda-kaltara",
+  },
+  {
+    id: 27,
+    img: "/assets/polda/polda-sulteng.svg",
+    title: "Polda Sulawesi Tengah",
+    path: "polda-sulteng",
+  },
+  {
+    id: 28,
+    img: "/assets/polda/polda-sulawesi-utara.svg",
+    title: "Polda Sulawesi Utara",
+    path: "polda-sulut",
+  },
+  {
+    id: 29,
+    img: "/assets/polda/polda-gorontalo.svg",
+    title: "Polda Gorontalo",
+    path: "polda-gorontalo",
+  },
+  {
+    id: 30,
+    img: "/assets/polda/polda-sulbar.svg",
+    title: "Polda Sulawesi Barat",
+    path: "polda-sulbar",
+  },
+  {
+    id: 31,
+    img: "/assets/polda/polda-sulsel.svg",
+    title: "Polda Sulawesi Selatan",
+    path: "polda-sulsel",
+  },
+  {
+    id: 32,
+    img: "/assets/polda/polda-sultenggara.svg",
+    title: "Polda Sulawesi Tenggara",
+    path: "polda-sultra",
+  },
+  {
+    id: 33,
+    img: "/assets/polda/polda-malut.svg",
+    title: "Polda Maluku Utara",
+    path: "polda-maluku-utara",
+  },
+  {
+    id: 34,
+    img: "/assets/polda/polda-maluku.svg",
+    title: "Polda Maluku",
+    path: "polda-maluku",
+  },
+  {
+    id: 35,
+    img: "/assets/polda/polda-papuabarat.svg",
+    title: "Polda Papua Barat",
+    path: "polda-papua-barat",
+  },
+  {
+    id: 36,
+    img: "/assets/polda/polda-papua.svg",
+    title: "Polda Papua",
+    path: "polda-papua",
+  },
+];
+
+export default function RegionalNews(props: {
+  opened: boolean;
+  modalStatus: (status: boolean) => void;
+}) {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [scrollBehavior, setScrollBehavior] =
     React.useState<ModalProps["scrollBehavior"]>("inside");
   const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
   const t = useTranslations("Landing");
 
-  const listPolda = [
-    {
-      id: 1,
-      img: "/temp/poldametro.svg",
-      title: "Polda Metro Jaya",
-      path: "polda-metro-jaya",
-    },
-    {
-      id: 2,
-      img: "/temp/polda-sumut.svg",
-      title: "Polda Sumatra Utara",
-      path: "polda-sumut",
-    },
-    {
-      id: 3,
-      img: "/temp/polda-banten.svg",
-      title: "Polda Banten",
-      path: "polda-banten",
-    },
-    {
-      id: 4,
-      img: "/temp/polda-jateng.svg",
-      title: "Polda Jawa Tengah",
-      path: "polda-jateng",
-    },
-    {
-      id: 5,
-      img: "/temp/polda-jatim.svg",
-      title: "Polda Jawa Timur",
-      path: "polda-jatim",
-    },
-    {
-      id: 6,
-      img: "/assets/polda/polda-jawa-barat.svg",
-      title: "Polda Jawa Barat",
-      path: "polda-jabar",
-    },
-  ];
-
-  const listPoldaAll = [
-    {
-      id: 1,
-      img: "/assets/polda/polda-metro-jaya.svg",
-      title: "Polda Metro Jaya",
-      path: "polda-metro-jaya",
-    },
-    {
-      id: 2,
-      img: "/assets/polda/polda-jawa-barat.svg",
-      title: "Polda Jawa Barat",
-      path: "polda-jabar",
-    },
-    {
-      id: 3,
-      img: "/assets/polda/polda-banten.svg",
-      title: "Polda Banten",
-      path: "polda-banten",
-    },
-    {
-      id: 4,
-      img: "/assets/polda/polda-jateng.svg",
-      title: "Polda Jawa Tengah",
-      path: "polda-jateng",
-    },
-    {
-      id: 5,
-      img: "/assets/polda/polda-diy.svg",
-      title: "Polda D.I Yogyakarta",
-      path: "polda-diy",
-    },
-    {
-      id: 6,
-      img: "/assets/polda/polda-jatim.svg",
-      title: "Polda Jawa Timur",
-      path: "polda-jatim",
-    },
-    {
-      id: 7,
-      img: "/assets/polda/polda-aceh.svg",
-      title: "Polda Aceh",
-      path: "polda-aceh",
-    },
-    {
-      id: 8,
-      img: "/assets/polda/polda-sumut.svg",
-      title: "Polda Sumatra Utara",
-      path: "polda-sumut",
-    },
-    {
-      id: 9,
-      img: "/assets/polda/polda-sumbar.svg",
-      title: "Polda Sumatra Barat",
-      path: "polda-sumbar",
-    },
-    {
-      id: 10,
-      img: "/assets/polda/polda-riau.svg",
-      title: "Polda Riau",
-      path: "polda-riau",
-    },
-    {
-      id: 11,
-      img: "/assets/polda/polda-kepri.svg",
-      title: "Polda Kep.Riau",
-      path: "polda-kepri",
-    },
-    {
-      id: 12,
-      img: "/assets/polda/polda-jambi.svg",
-      title: "Polda Jambi",
-      path: "polda-jambi",
-    },
-    {
-      id: 13,
-      img: "/assets/polda/polda-jambi.svg",
-      title: "Polda Jambi",
-      path: "polda-jambi",
-    },
-    {
-      id: 14,
-      img: "/assets/polda/polda-sumsel.svg",
-      title: "Polda Sumatra Selatan",
-      path: "polda-sumsel",
-    },
-    {
-      id: 15,
-      img: "/assets/polda/polda-sumsel.svg",
-      title: "Polda Kep.Bangka Belitung",
-      path: "polda-babel",
-    },
-    {
-      id: 16,
-      img: "/assets/polda/polda-bengkulu.svg",
-      title: "Polda Bengkulu",
-      path: "polda-bengkulu",
-    },
-    {
-      id: 17,
-      img: "/assets/polda/polda-lampung.svg",
-      title: "Polda Lampung",
-      path: "polda-lampung",
-    },
-    {
-      id: 18,
-      img: "/assets/polda/polda-ntb.svg",
-      title: "Polda Nusa Tenggara Barat",
-      path: "polda-ntb",
-    },
-    {
-      id: 19,
-      img: "/assets/polda/polda-ntb.svg",
-      title: "Polda Nusa Tenggara Barat",
-      path: "polda-ntb",
-    },
-    {
-      id: 20,
-      img: "/assets/polda/polda-ntt.svg",
-      title: "Polda Nusa Tenggara Timur",
-      path: "polda-ntt",
-    },
-    {
-      id: 21,
-      img: "/assets/polda/polda-bali.svg",
-      title: "Polda Bali",
-      path: "polda-bali",
-    },
-    {
-      id: 22,
-      img: "/assets/polda/polda-kalbar.svg",
-      title: "Polda Kalimantan Barat",
-      path: "polda-kalbar",
-    },
-    {
-      id: 23,
-      img: "/assets/polda/polda-kalteng.svg",
-      title: "Polda Kalimantan Tengah",
-      path: "polda-kalteng",
-    },
-    {
-      id: 24,
-      img: "/assets/polda/polda-kalsel.svg",
-      title: "Polda Kalimantan Selatan",
-      path: "polda-kalsel",
-    },
-    {
-      id: 25,
-      img: "/assets/polda/polda-kaltim.svg",
-      title: "Polda Kalimantan Timur",
-      path: "polda-kaltim",
-    },
-    {
-      id: 26,
-      img: "/assets/polda/polda-kalut.svg",
-      title: "Polda Kalimantan Utara",
-      path: "polda-kaltara",
-    },
-    {
-      id: 27,
-      img: "/assets/polda/polda-sulteng.svg",
-      title: "Polda Sulawesi Tengah",
-      path: "polda-sulteng",
-    },
-    {
-      id: 28,
-      img: "/assets/polda/polda-sulawesi-utara.svg",
-      title: "Polda Sulawesi Utara",
-      path: "polda-sulut",
-    },
-    {
-      id: 29,
-      img: "/assets/polda/polda-gorontalo.svg",
-      title: "Polda Gorontalo",
-      path: "polda-gorontalo",
-    },
-    {
-      id: 30,
-      img: "/assets/polda/polda-sulbar.svg",
-      title: "Polda Sulawesi Barat",
-      path: "polda-sulbar",
-    },
-    {
-      id: 31,
-      img: "/assets/polda/polda-sulsel.svg",
-      title: "Polda Sulawesi Selatan",
-      path: "polda-sulsel",
-    },
-    {
-      id: 32,
-      img: "/assets/polda/polda-sultenggara.svg",
-      title: "Polda Sulawesi Tenggara",
-      path: "polda-sultra",
-    },
-    {
-      id: 33,
-      img: "/assets/polda/polda-malut.svg",
-      title: "Polda Maluku Utara",
-      path: "polda-maluku-utara",
-    },
-    {
-      id: 34,
-      img: "/assets/polda/polda-maluku.svg",
-      title: "Polda Maluku",
-      path: "polda-maluku",
-    },
-    {
-      id: 35,
-      img: "/assets/polda/polda-papuabarat.svg",
-      title: "Polda Papua Barat",
-      path: "polda-papua-barat",
-    },
-    {
-      id: 36,
-      img: "/assets/polda/polda-papua.svg",
-      title: "Polda Papua",
-      path: "polda-papua",
-    },
-  ];
+  useEffect(() => {
+    if (props.opened) {
+      onOpen();
+    }
+  }, [props.opened]);
 
   // useEffect(() => {
   //     function updateLimitedData() {
@@ -305,56 +275,43 @@ export default function RegionalNews() {
   };
 
   return (
-    <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
-      <div className="text-xl text-white w-full justify-center flex">
-        <p className="border-b-3 border-white py-2 w-fit">
-          {" "}
-          {t("beritaWilayah")}
+    <>
+      {/* <Button
+        onPress={onOpen}
+        className="border-red-700 text-white w-fit"
+        size="sm"
+        variant="bordered"
+      >
+        {t("lebihBanyak")}
+      </Button> */}
+      {/* <a
+        onClick={onOpen}
+        className="group shadow-lg rounded-lg w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
+      >
+        <Image
+          src="/indonesia-map.png"
+          width={480}
+          height={480}
+          alt="indonesia"
+          className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
+        />
+        <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+          Polda Jajaran
         </p>
-      </div>
-      <div className="flex items-center justify-around py-10">
-        {/* <div>
-          <ChevronLeftWhite color="orange" />
-        </div> */}
-        <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
-          {listPolda.map((item: any, index: any) => (
-            <Link href={`/news/polda/${item.path}`} key={item.path}>
-              <div
-                key={item.id}
-                className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
-              >
-                <Image radius="lg" className="h-[59px]" src={item.img} />
-                <p className="text-xs font-bold text-white">{item.title}</p>
-              </div>
-            </Link>
-          ))}
-        </div>
-        {/* <div>
-          <ChevronRightWhite color="orange" />
-        </div> */}
-      </div>
-      <div className="flex justify-center w-full items-center">
-        <Button
-          onPress={onOpen}
-          className="border-red-700 text-white w-fit"
-          size="sm"
-          variant="bordered"
-        >
-          {t("lebihBanyak")}
-        </Button>
-      </div>
+        <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+          Lihat Selengkapnya
+        </p>
+      </a> */}
       <Modal
         isOpen={isOpen}
-        onOpenChange={onOpenChange}
-        size="full"
+        onOpenChange={() => {
+          props.modalStatus(!props.opened);
+          onOpenChange();
+        }}
+        size="5xl"
         scrollBehavior={scrollBehavior}
         placement={modalPlacement}
-        classNames={{
-          wrapper: "bg-white",
-          base: "bg-white min-h-full",
-          // body: "w-full bg-white",
-          // footer: "bg-white"
-        }}
+        className="bg-white"
       >
         <ModalContent>
           {(onClose) => (
@@ -363,7 +320,8 @@ export default function RegionalNews() {
                 <div className="text-xl text-black w-full justify-center flex">
                   <p className="border-b-3 border-[#C3170F] py-2 w-fit">
                     {" "}
-                    {t("beritaWilayah")}
+                    {/* {t("beritaWilayah")} */}
+                    Polda Jajaran
                   </p>
                 </div>
               </ModalHeader>
@@ -379,6 +337,7 @@ export default function RegionalNews() {
                           radius="lg"
                           className="h-[59px]"
                           src={item.img}
+                          alt="polda"
                         />
                         <p className="text-xs font-bold text-black">
                           {item.title}
@@ -401,6 +360,6 @@ export default function RegionalNews() {
           )}
         </ModalContent>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/components/landing/digital-services.tsx b/components/landing/digital-services.tsx
new file mode 100644
index 0000000..1410477
--- /dev/null
+++ b/components/landing/digital-services.tsx
@@ -0,0 +1,126 @@
+"use client";
+import Image from "next/image";
+import RegionalNews from "./RegionalNews";
+import { useEffect, useState } from "react";
+import CategorySatker from "./CategorySatker";
+import PolriApps from "./PolriApps";
+
+export default function DigitalServices() {
+  const [isPoldaOpen, setIsPoldaOpen] = useState(false);
+  const [isSatkerOpen, setIsSatkerOpen] = useState(false);
+  const [isAppsOpen, setIsAppsOpen] = useState(false);
+
+  return (
+    <div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
+      <div className="text-xl font-semibold w-full ">
+        <p className="border-b-2 border-red-600 w-fit mx-auto">
+          Polda Satker dan Layanan Digital
+        </p>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-5 p-4 justify-center">
+        <a
+          onClick={() => setIsPoldaOpen(true)}
+          className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
+        >
+          <Image
+            src="/indonesia-map.png"
+            width={480}
+            height={480}
+            alt="indonesia"
+            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
+          />
+          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Polda Jajaran
+          </p>
+          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Lihat Selengkapnya
+          </p>
+        </a>
+        <a
+          onClick={() => setIsSatkerOpen(true)}
+          className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
+        >
+          <Image
+            src="/satker.png"
+            width={480}
+            height={480}
+            alt="satker"
+            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
+          />
+          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Satuan Kerja Polri
+          </p>
+          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Lihat Selengkapnya
+          </p>
+        </a>
+        <a
+          onClick={() => setIsAppsOpen(true)}
+          className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
+        >
+          <Image
+            src="/presisi.png"
+            width={480}
+            height={480}
+            alt="presisi"
+            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
+          />
+          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Aplikasi Polri
+          </p>
+          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Lihat Selengkapnya
+          </p>
+        </a>
+        <a
+          onClick={() => setIsAppsOpen(true)}
+          className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
+        >
+          <Image
+            src="/kritik-saran.png"
+            width={480}
+            height={480}
+            alt="kritik-saran"
+            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
+          />
+          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Kritik dan Saran
+          </p>
+          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Lihat Selengkapnya
+          </p>
+        </a>
+        <a
+          onClick={() => setIsAppsOpen(true)}
+          className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
+        >
+          <Image
+            src="/survey.png"
+            width={480}
+            height={480}
+            alt="survey"
+            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
+          />
+          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Survey
+          </p>
+          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
+            Lihat Selengkapnya
+          </p>
+        </a>
+      </div>
+      <RegionalNews
+        opened={isPoldaOpen}
+        modalStatus={(status) => setIsPoldaOpen(status)}
+      />
+      <CategorySatker
+        opened={isSatkerOpen}
+        modalStatus={(status) => setIsSatkerOpen(status)}
+      />
+      <PolriApps
+        opened={isAppsOpen}
+        modalStatus={(status) => setIsAppsOpen(status)}
+      />
+    </div>
+  );
+}
diff --git a/public/indonesia-map.png b/public/indonesia-map.png
new file mode 100644
index 0000000..d61042c
Binary files /dev/null and b/public/indonesia-map.png differ
diff --git a/public/kritik-saran.png b/public/kritik-saran.png
new file mode 100644
index 0000000..c799a64
Binary files /dev/null and b/public/kritik-saran.png differ
diff --git a/public/presisi.png b/public/presisi.png
new file mode 100644
index 0000000..be2e486
Binary files /dev/null and b/public/presisi.png differ
diff --git a/public/satker.png b/public/satker.png
new file mode 100644
index 0000000..9492716
Binary files /dev/null and b/public/satker.png differ
diff --git a/public/survey.png b/public/survey.png
new file mode 100644
index 0000000..ff8ac95
Binary files /dev/null and b/public/survey.png differ