diff --git a/app/admin/dashboard/page.tsx b/app/admin/dashboard/page.tsx
new file mode 100644
index 0000000..f4f0d25
--- /dev/null
+++ b/app/admin/dashboard/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AdminDasboard = () => {
+    return (
+        <div>AdminDasboard</div>
+    )
+}
+
+export default AdminDasboard
\ No newline at end of file
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 1e4a2d5..0084293 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -2,10 +2,10 @@ import React from 'react'
 
 export default function AdminHumasPage() {
     return (
-        <div className='bg-white'>
-            <div>1</div>
+        <div className=''>
             <div>1</div>
             <div>1</div>
+
             <div>1</div>
             <div>1</div>
             <div>1</div>
diff --git a/app/news/[polda-name]/layout.tsx b/app/news/[polda-name]/layout.tsx
new file mode 100644
index 0000000..3164a5f
--- /dev/null
+++ b/app/news/[polda-name]/layout.tsx
@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function PoldaNewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}
diff --git a/app/news/[polda-name]/page.tsx b/app/news/[polda-name]/page.tsx
new file mode 100644
index 0000000..9eced98
--- /dev/null
+++ b/app/news/[polda-name]/page.tsx
@@ -0,0 +1,8 @@
+import ListNews from '@/components/detail/ListNews'
+import React from 'react'
+
+export default function PoldaNewsPage() {
+    return (
+        <ListNews />
+    )
+}
diff --git a/app/portal-ppid/satuan-kerja/[satker-name]/layout.tsx b/app/portal-ppid/satuan-kerja/[satker-name]/layout.tsx
index a4dff35..36d5457 100644
--- a/app/portal-ppid/satuan-kerja/[satker-name]/layout.tsx
+++ b/app/portal-ppid/satuan-kerja/[satker-name]/layout.tsx
@@ -8,8 +8,8 @@ export default function DinamicSatkerLayout({
 }: {
     children: React.ReactNode
 }) {
-    const pathname = usePathname();
-    console.log(pathname)
+    // const pathname = usePathname();
+    // console.log(pathname)
 
     return (
         <SatkerLayout>
diff --git a/app/portal-ppid/satuan-kerja/[satker-name]/page.tsx b/app/portal-ppid/satuan-kerja/[satker-name]/page.tsx
index 0e5f027..a72806f 100644
--- a/app/portal-ppid/satuan-kerja/[satker-name]/page.tsx
+++ b/app/portal-ppid/satuan-kerja/[satker-name]/page.tsx
@@ -4,10 +4,12 @@ import React from 'react'
 
 export default function SatkerPage() {
     const pathname = usePathname();
-    console.log(pathname)
+    // console.log(pathname)
+    const url = pathname.split('satuan-kerja/')[1];
+
     return (
         <div className='text-black'>
-            {pathname}
+            {url}
         </div>
     )
 }
diff --git a/components/Landing Page/Footer.tsx b/components/Landing Page/Footer.tsx
index 2fb7c2e..31dfcc9 100644
--- a/components/Landing Page/Footer.tsx	
+++ b/components/Landing Page/Footer.tsx	
@@ -13,9 +13,7 @@ export default function Footer() {
             </div>
             <div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-2 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
                 <div className='pb-2 md:pb-0'>
-                    <Link href={'/detail'}>
-                        <p>Berita Terkini</p>
-                    </Link>
+                    <p>Berita Terkini</p>
                     <p>Info Komnas Anak</p>
                     <p>Info Komnas Perempuan</p>
                     <p>Kontak</p>
diff --git a/components/Landing Page/RegionalNews.tsx b/components/Landing Page/RegionalNews.tsx
index 6cad024..f344c63 100644
--- a/components/Landing Page/RegionalNews.tsx	
+++ b/components/Landing Page/RegionalNews.tsx	
@@ -1,31 +1,253 @@
+'use client'
 import { Button } from '@nextui-org/button';
-import { Image } from '@nextui-org/react';
+import { Image, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalProps, useDisclosure } from '@nextui-org/react';
 import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 
 export default function RegionalNews() {
     const [limitedData, setLimitedData] = useState<any>([]);
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+    const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("outside");
+    const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
 
-    const list = [
+    const listPolda = [
         {
+            id: 1,
             img: "/temp/poldametro.svg",
-            title: "Polda Metro Jaya"
+            title: "Polda Metro Jaya",
+            path: '/news/polda-metro-jaya'
         },
         {
+            id: 2,
             img: "/temp/polda-sumut.svg",
-            title: "Polda Sumatra Utara"
+            title: "Polda Sumatra Utara",
+            path: '/news/polda-sumatra-utara'
         },
         {
+            id: 3,
             img: "/temp/polda-banten.svg",
-            title: "Polda Banten"
+            title: "Polda Banten",
+            path: '/news/polda-banten'
         },
         {
+            id: 4,
             img: "/temp/polda-jateng.svg",
-            title: "Polda Jawa Tengah"
+            title: "Polda Jawa Tengah",
+            path: '/news/polda-jateng'
         },
         {
+            id: 5,
             img: "/temp/polda-jatim.svg",
-            title: "Polda Jawa Timur"
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+    ];
+
+    const listPoldaAll = [
+        {
+            id: 1,
+            img: "/temp/poldametro.svg",
+            title: "Polda Metro Jaya",
+            path: '/news/polda-metro-jaya'
+        },
+        {
+            id: 2,
+            img: "/temp/polda-sumut.svg",
+            title: "Polda Sumatra Utara",
+            path: '/news/polda-sumatra-utara'
+        },
+        {
+            id: 3,
+            img: "/temp/polda-banten.svg",
+            title: "Polda Banten",
+            path: '/news/polda-banten'
+        },
+        {
+            id: 4,
+            img: "/temp/polda-jateng.svg",
+            title: "Polda Jawa Tengah",
+            path: '/news/polda-jateng'
+        },
+        {
+            id: 5,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 6,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 7,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 8,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 9,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 10,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 11,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 12,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 13,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 14,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 15,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 16,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 17,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 18,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 19,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 20,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 21,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 22,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 23,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 24,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 25,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 26,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 27,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 28,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 29,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 30,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 31,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 32,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 33,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 34,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
         },
     ];
 
@@ -48,31 +270,72 @@ export default function RegionalNews() {
     // }, [list]);
 
     return (
-        <div className='text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4  flex flex-col justify-center'>
+        <div className='text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4  flex flex-col justify-around'>
             <div className='font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]'>Berita Wilayah</div>
             <div className='flex items-center justify-around'>
                 <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-5">
-                    {list.map((item: any, index: any) => (
-                        <div 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-[#DD8306]'>{item.title}</p>
-                        </div>
+                    {listPolda.map((item: any, index: any) => (
+                        <Link href={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-[#DD8306]'>{item.title}</p>
+                            </div>
+                        </Link>
                     ))}
                 </div>
                 <div><ChevronRightWhite color='orange' /></div>
             </div>
             <div>
                 <Button
+                    onPress={onOpen}
                     className='bg-[#DD8306] text-white font-bold'
                     size='sm'
                 >
                     Lihat Lebih Banyak
                 </Button>
+                <Modal isOpen={isOpen} onOpenChange={onOpenChange}
+                    size='full'
+                    scrollBehavior={scrollBehavior}
+                    placement={modalPlacement}
+                    classNames={{
+                        wrapper: "h-full bg-white",
+                        base: "bg-white min-h-full",
+                        // body: "w-full bg-white",
+                        // footer: "bg-white"
+                    }}
+                >
+                    <ModalContent>
+                        {(onClose) => (
+                            <>
+                                <ModalHeader className="flex flex-col text-[#DD8306] items-center min-h mb- text-3xl font-semibold">Berita Wilayah</ModalHeader>
+                                <ModalBody className='flex flex-row flex-wrap justify-center'>
+                                    {listPoldaAll.map((item: any, index: any) => (
+                                        <Link href={item.path}>
+                                            <div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-evenly border-2 rounded-lg shadow-sm'>
+                                                <Image
+                                                    radius="lg"
+                                                    className="h-[59px]"
+                                                    src={item.img}
+                                                />
+                                                <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
+                                            </div>
+                                        </Link>
+                                    ))}
+                                </ModalBody>
+                                <ModalFooter>
+                                    <Button color="danger" variant="light" onPress={onClose}>
+                                        Tutup
+                                    </Button>
+                                </ModalFooter>
+                            </>
+                        )}
+                    </ModalContent>
+                </Modal>
             </div>
         </div>
     )
diff --git a/components/Landing Page/SidebarNav.tsx b/components/Landing Page/SidebarNav.tsx
index f4c1462..1bc8d60 100644
--- a/components/Landing Page/SidebarNav.tsx	
+++ b/components/Landing Page/SidebarNav.tsx	
@@ -1,6 +1,8 @@
-import { ScrollShadow } from '@nextui-org/react'
+import { LinkIcon, ScrollShadow } from '@nextui-org/react'
 import React from 'react'
 import { EyeIcon } from '../icons'
+import Image from 'next/image'
+import Link from 'next/link'
 
 export default function SidebarNav() {
     return (
@@ -35,21 +37,36 @@ export default function SidebarNav() {
                 </div>
                 <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Publikasi
                     <div className='flex flex-col gap-3 pt-3'>
-                        <img src="/publikasi1.png" alt="publikasi" />
-                        <img src="/publikasi2.png" alt="publikasi" />
-                        <img src="/publikasi3.png" alt="publikasi" />
-                        <img src="/publikasi4.png" alt="publikasi" />
-                        <img src="/publikasi5.png" alt="publikasi" />
-                        <img src="/publikasi6.png" alt="publikasi" />
-                        <img src="/publikasi7.png" alt="publikasi" />
+                        <Image height={200} width={400} src="/publikasi1.png" alt="publikasi" />
+                        <Image height={200} width={400} src="/publikasi2.png" alt="publikasi" />
+                        <Link href='https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf' target='_blank'>
+                            <Image height={200} width={400} src="/publikasi3.png" alt="publikasi" />
+                        </Link>
+                        <Link href='https://lpse.polri.go.id/eproc4' target='_blank'>
+                            <Image height={200} width={400} src="/publikasi4.png" alt="publikasi" />
+                        </Link>
+                        <Image height={200} width={400} src="/publikasi5.png" alt="publikasi" />
+                        <Image height={200} width={400} src="/publikasi6.png" alt="publikasi" />
+                        <Link href='https://tribratanews.polri.go.id/' target='_blank'>
+                            <Image height={200} width={400} src="/publikasi7.png" alt="publikasi" />
+                        </Link>
+
                     </div>
                 </div>
                 <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Channel Humas Polri
                     <div className='flex flex-col gap-3  m-10'>
-                        <img src="/humas1.png" alt="humas-polri" />
-                        <img src="/humas2.png" alt="humas-polri" />
-                        <img src="/humas3.png" alt="humas-polri" />
-                        <img src="/humas4.png" alt="humas-polri" />
+                        <Link href='https://mediahub.polri.go.id/' target='_blank'>
+                            <Image height={100} width={300} src="/humas1.png" alt="humas-polri" />
+                        </Link>
+                        <Link href='https://spit.humas.polri.go.id/' target='_blank'>
+                            <Image height={100} width={300} src="/humas2.png" alt="humas-polri" />
+                        </Link>
+                        <Link href='https://tvradio.polri.go.id/' target='_blank'>
+                            <Image height={100} width={300} src="/humas3.png" alt="humas-polri" />
+                        </Link>
+                        <Link href='https://tribratanews.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-md'>
+                            <Image height={100} width={300} src="/humas4.png" alt="humas-polri" />
+                        </Link>
                     </div>
                 </div>
             </div>
@@ -57,33 +74,33 @@ export default function SidebarNav() {
             <div className='flex flex-col items-center space-y-7'>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal1.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-3'>Berita BPS</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-3'><Link href='https://www.bps.go.id/id/news' target='_blank'>Berita BPS</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p>
-                    <p className='leading-tight text-blue-500 pt-2'>Pengumuman BPS</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bps.go.id/id/publication' target='_blank'>Pengumuman BPS</Link></p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal2.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>Berita KPU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpu.go.id/berita/104/berita-terkini' target='_blank'>Berita KPU</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p>
-                    <p className='leading-tight text-blue-500 pt-2'>Pengumuman KPU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.kpu.go.id/berita/11/pengumumanse' target='_blank'>Pengumuman KPU</Link></p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal3.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>Berita BAWASLU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.bawaslu.go.id/' target='_blank'>Berita BAWASLU</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p>
-                    <p className='leading-tight text-blue-500 pt-2'>Pengumuman BAWASLU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bawaslu.go.id/id/pengumuman' target='_blank'>Pengumuman BAWASLU</Link></p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal4.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>Info KPAI</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpai.go.id/' target='_blank'>Info KPAI</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal5.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>INFO KOMNAS PEREMPUAN</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.komnasperempuan.go.id/' target='_blank'>INFO KOMNAS PEREMPUAN</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>
                 </div>
             </div>
diff --git a/components/detail/Contact.tsx b/components/detail/Contact.tsx
index c6035cb..0f2e2f8 100644
--- a/components/detail/Contact.tsx
+++ b/components/detail/Contact.tsx
@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Calender, CustomerService, EyeFilledIcon, EyeSlashFilledIcon, Hotline, Location, Mail } from '../icons';
 import Datepicker from "react-tailwindcss-datepicker";
+import Image from "next/image";
 
 const schema = z.object({
     name: z.string().min(3).max(50),
@@ -95,8 +96,8 @@ const Contact: React.FC = () => {
                             <div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
                         </div>
                     </div>
-                    <div className="flex justify-center">
-                        <img src="maps.png" alt="maps" className="" />
+                    <div className="flex justify-center border-2 border-red-500 h-[280px] pt-2">
+                        {/* <Image height={100} width={100} src="/maps.png" alt="maps" className="" /> */}
                     </div>
                 </div>
                 <div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
@@ -201,12 +202,12 @@ const Contact: React.FC = () => {
                             variant='underlined'
                         />
                     </div>
-                    <div className="hidden lg:block absolute -top-28 right-28">
-                        <img src="sparklg.png" alt="" className="" />
+                    <div className="hidden lg:block absolute -top-36 right-20">
+                        <Image height={320} width={320} src="/sparklg.png" alt="" className="" />
                     </div>
                     <div className="flex justify-center md:justify-end">
                         <Button className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg" size="md">Kirim Pesan</Button>
-                        <img src="ar.png" alt="ar" className="absolute right-[28%] -bottom-3 hidden lg:block" />
+                        <Image height={320} width={320} src="/ar.png" alt="ar" className="absolute right-[28%]  hidden lg:block" />
                     </div>
                 </div>
             </div>
diff --git a/components/detail/ListNews.tsx b/components/detail/ListNews.tsx
index 596db16..062ef4a 100644
--- a/components/detail/ListNews.tsx
+++ b/components/detail/ListNews.tsx
@@ -2,6 +2,7 @@
 import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
 import PPIDSidebar from '../Portal PPID/PPIDSidebar';
 import { EyeFilledIcon, SearchIcon } from '../icons';
+import Link from "next/link";
 
 
 export default function ListNews() {
@@ -100,20 +101,22 @@ export default function ListNews() {
             </Breadcrumbs>
             <div className="flex-wrap grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
                 {listNews.map((news) => (
-                    <div className="h-auto w-[300px] text-xs">
-                        <div className="h-[50%]">
-                            <img src={news.thumnbnail} alt="" className="w-max" />
-                        </div>
-                        <div className="px-3 py-3">
-                            <div className="font-medium text-sm leading-5 ">{news.title}</div>
-                            <div className="flex pb-1">
-                                <div className="text-xs">{news.date}</div>
-                                {/* <div>jam</div>
-                                <div>creator</div> */}
+                    <Link href={`/news/detail/${news.id}`}>
+                        <div className="h-auto w-[300px] text-xs">
+                            <div className="h-[50%]">
+                                <img src={news.thumnbnail} alt="" className="w-max" />
+                            </div>
+                            <div className="px-3 py-3">
+                                <div className="font-medium text-sm leading-5 ">{news.title}</div>
+                                <div className="flex pb-1">
+                                    <div className="text-xs">{news.date}</div>
+                                    {/* <div>jam</div>
+                                <div>creator</div> */}
+                                </div>
+                                <div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
                             </div>
-                            <div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
                         </div>
-                    </div>
+                    </Link>
                 ))}
             </div>
         </div>
diff --git a/components/layout/HumasAdminLayout.tsx b/components/layout/HumasAdminLayout.tsx
index 16dc476..5e38991 100644
--- a/components/layout/HumasAdminLayout.tsx
+++ b/components/layout/HumasAdminLayout.tsx
@@ -11,12 +11,12 @@ interface Props {
 
 export default function HumasAdminLayout({ children, pageTitle }: Props) {
     return (
-        // <section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
-        <section className="flex  ">
+        <section className=" text-black flex dark:text-white bg-slate-100 dark:bg-[#151c2c] h-screen">
             <HumasSidebarWrapper />
             <HumasNavbarWrapper>
                 {children}
             </HumasNavbarWrapper>
         </section>
+
     )
 }
diff --git a/components/navbar/HumasNavbarWrapper.tsx b/components/navbar/HumasNavbarWrapper.tsx
index 436ca8e..3baf7ea 100644
--- a/components/navbar/HumasNavbarWrapper.tsx
+++ b/components/navbar/HumasNavbarWrapper.tsx
@@ -1,8 +1,9 @@
 'use client'
-import { Navbar, NavbarContent } from '@nextui-org/navbar';
-import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/navbar';
+import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, ScrollShadow } from '@nextui-org/react';
 import React from 'react'
 import { ThemeSwitch } from '../theme-switch';
+import Link from 'next/link';
 
 interface Props {
     children: React.ReactNode;
@@ -10,13 +11,19 @@ interface Props {
 }
 export default function HumasNavbarWrapper({ children }: Props) {
     return (
-        <div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden max-h-screen bg-transparent'>
-            <Navbar className='w-full bg-slate-100 dark:bg-[#16213E]'
+        <div className='w-full relative overflow-y-auto overflow-x-hidden'>
+            <Navbar maxWidth='full' className='dark:text-white bg-slate-200 dark:bg-[#182237]'
                 isBordered
                 classNames={{
-                    wrapper: "w-full max-w-full"
-                }}>
-                <NavbarContent as="div" justify="end">
+                    wrapper: "p-2"
+                }}
+            >
+                <NavbarContent>
+                    <NavbarItem>
+                        Judul
+                    </NavbarItem>
+                </NavbarContent>
+                <NavbarContent as="div" justify="end" className='pr-2'>
                     <Dropdown placement="bottom-end">
                         <DropdownTrigger>
                             <Avatar
@@ -35,15 +42,20 @@ export default function HumasNavbarWrapper({ children }: Props) {
                                 <p className="font-semibold">zoey@example.com</p>
                             </DropdownItem>
                             <DropdownItem key="settings">My Settings</DropdownItem>
+                            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
                             <DropdownItem key="logout" color="danger">
                                 Log Out
                             </DropdownItem>
-                            <DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
+                            <DropdownItem>
+                                <ThemeSwitch />
+                            </DropdownItem>
                         </DropdownMenu>
                     </Dropdown>
                 </NavbarContent>
             </Navbar>
-            {children}
+            <div className='p-2'>
+                {children}
+            </div>
         </div>
 
     )
diff --git a/components/navbar/HumasSidebarWrapper.tsx b/components/navbar/HumasSidebarWrapper.tsx
index 4917cb1..6bddb65 100644
--- a/components/navbar/HumasSidebarWrapper.tsx
+++ b/components/navbar/HumasSidebarWrapper.tsx
@@ -1,9 +1,101 @@
 import React from 'react'
+import { RxHamburgerMenu } from "react-icons/rx";
+import {
+    MdDashboard,
+    MdSupervisedUserCircle,
+    MdShoppingBag,
+    MdAttachMoney,
+    MdWork,
+    MdAnalytics,
+    MdPeople,
+    MdOutlineSettings,
+    MdHelpCenter
+} from 'react-icons/md'
+import MenuLinks from '../page/MenuLink';
+import Link from 'next/link';
+
+const menuItems = [
+    {
+        title: "Pages",
+        list: [
+            {
+                title: "Dashboard",
+                path: '/admin/dashboard',
+                icon: <MdDashboard />
+            },
+            {
+                title: "Users",
+                path: '/dashboard/users',
+                icon: <MdSupervisedUserCircle />
+            },
+            {
+                title: "Producst",
+                path: '/dashboard/producst',
+                icon: <MdShoppingBag />
+            },
+            {
+                title: "Transactions",
+                path: '/dashboard/transactions',
+                icon: <MdAttachMoney />
+            },
+        ]
+    },
+    {
+        title: "Analytics",
+        list: [
+            {
+                title: "Revenue",
+                path: '/dashboard/revenue',
+                icon: <MdWork />
+            },
+            {
+                title: "Reports",
+                path: '/dashboard/reports',
+                icon: <MdAnalytics />
+            },
+            {
+                title: "Teams",
+                path: '/dashboard/teams',
+                icon: <MdPeople />
+            },
+        ]
+    },
+    {
+        title: "User",
+        list: [
+            {
+                title: "Settings",
+                path: '/dashboard/settings',
+                icon: <MdOutlineSettings />
+            },
+            {
+                title: "Help",
+                path: '/dashboard/help',
+                icon: <MdHelpCenter />
+            },
+        ]
+    },
+]
 
 export default function HumasSidebarWrapper() {
     return (
-        <aside className='w-[250px] h-screen bg-[#070F2B]'>
-            Sidebar
-        </aside>
+        <aside className='w-1/4 dark:text-white bg-slate-200  border-gray-700 dark:bg-[#182237] h-screen overflow-y-auto custom-scrollbar p-3 space-y-7'>
+            <div className='flex'>
+                <div className='w-full flex justify-center'><Link href='/'><img src="/logohumas.png" alt="log" /></Link></div>
+                <div><RxHamburgerMenu size={28} /></div>
+            </div>
+            <div>
+                <ul className='p-2 space-y-3'>
+                    {menuItems.map(category => (
+                        <li className='space-y-1' key={category.title}>
+                            <span>{category.title}</span>
+                            {category.list.map(item => (
+                                <MenuLinks item={item} key={item.title} />
+                            ))}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </aside >
     )
 }
diff --git a/components/navbar/NavbarHumas.tsx b/components/navbar/NavbarHumas.tsx
index 67fbe04..ed5d01c 100644
--- a/components/navbar/NavbarHumas.tsx
+++ b/components/navbar/NavbarHumas.tsx
@@ -55,6 +55,38 @@ export default function NavbarHumas() {
                         <Link href={'/'}>
                             <div>Beranda</div>
                         </Link>
+                        <div className=''>
+                            <Dropdown>
+                                <DropdownTrigger>
+                                    <Button
+                                    >
+                                        Open Menu
+                                    </Button>
+                                </DropdownTrigger>
+                                <DropdownMenu aria-label="Static Actions" className='w-full'
+                                    classNames={{
+                                        base: "w-full",
+                                        emptyContent: "w-full",
+                                        list: "w-full"
+                                    }}
+                                    itemClasses={{
+                                        base: "w-full",
+                                        wrapper: "w-full",
+                                        title: "border-2 w-full"
+
+                                    }}
+                                >
+                                    <DropdownItem classNames={{
+                                        base: "w-screen"
+                                    }} key="new">New file</DropdownItem>
+                                    <DropdownItem key="copy">Copy link</DropdownItem>
+                                    <DropdownItem key="edit">Edit file</DropdownItem>
+                                    <DropdownItem key="delete" className="text-danger" color="danger">
+                                        Delete file
+                                    </DropdownItem>
+                                </DropdownMenu>
+                            </Dropdown>
+                        </div>
                         <div>
                             <Dropdown className=' dark:bg-[#1F1A17]'>
                                 <NavbarItem>
diff --git a/components/navbar/NavbarSatker.tsx b/components/navbar/NavbarSatker.tsx
index 8a69273..31a7bba 100644
--- a/components/navbar/NavbarSatker.tsx
+++ b/components/navbar/NavbarSatker.tsx
@@ -6,18 +6,24 @@ import { ThemeSwitch } from '../theme-switch'
 import { usePathname } from 'next/navigation'
 
 export default function NavbarSatker() {
-    const pathname = usePathname();
-    console.log(pathname)
+    const pathname = usePathname()
+    const newPathname = pathname.split('/')[3]
+
 
     return (
         <Navbar maxWidth='full' height="8rem" className='dark:bg-[#1F1A17]'>
             <div className='w-full h-full flex'>
-                <div className='w-1/3 md:w-2/12 flex'>
-                    <Link href={'/'}>
-                        <img src="/assets/satker/EPPID2.png" alt="logo" className='w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 border-2 border-red-700 flex' />
+                <div className='w-auto lg:w-2/12 flex'>
+                    <Link href={'#'}>
+                        <div className='h-full flex'>
+                            <img src="/assets/satker/EPPID2.png" alt="logo" className='w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 flex' />
+                            <div className='absolute top-5 right-[-35px]'>
+                                <img src="/assets/satker/pusdokes.svg" alt="" className='w-36' />
+                            </div>
+                        </div>
                     </Link>
                 </div>
-                <div className='w-10/12  hidden md:flex flex-col justify-cente pt-3 space-y-3'>
+                <div className='w-auto lg:w-10/12  hidden md:flex flex-col justify-cente pt-3 space-y-3'>
                     <div className='flex items-center justify-end gap-1 md:gap-5'>
                         <div className="flex gap-1 lg:gap-3 items-center">
                             <div><FbIcon /></div>
@@ -30,7 +36,7 @@ export default function NavbarSatker() {
                     </div>
                     <div className='flex flex-wrap items-center justify-around'>
                         <NavbarItem>
-                            <Link href='/portal-ppid' color='foreground'>
+                            <Link href={`/portal-ppid/satuan-kerja/${newPathname}`} color='foreground'>
                                 Beranda
                             </Link>
                         </NavbarItem>
@@ -133,14 +139,14 @@ export default function NavbarSatker() {
                                 <DropdownItem
                                     endContent={<ChevronRightIcon />}
                                 >
-                                    <Link href={`${pathname}/profile/sejarah-ppid-polri`} color='foreground'>
+                                    <Link href={`/portal-ppid/satuan-kerja/${newPathname}/profile/sejarah-ppid-polri`} color='foreground'>
                                         Sejarah PPID Polri
                                     </Link>
                                 </DropdownItem>
                                 <DropdownItem
                                     endContent={<ChevronRightIcon />}
                                 >
-                                    <Link href='/portal-ppid/profile/profile-singkat-ppid' color='foreground'>
+                                    <Link href={`/portal-ppid/satuan-kerja/${newPathname}/profile/profile-singkat-ppid`} color='foreground'>
                                         Profile Singkat PPID
                                     </Link>
                                 </DropdownItem>
diff --git a/components/page/DetailNews.tsx b/components/page/DetailNews.tsx
index fdf631d..43edd35 100644
--- a/components/page/DetailNews.tsx
+++ b/components/page/DetailNews.tsx
@@ -20,10 +20,10 @@ export default function DetailNews() {
                     <p className='hidden md:block'>|</p>
                     <p>1000</p>
                     <div className="flex gap-2 md:hidden">
-                        <div><img src="/fb.png" alt="medsos" /></div>
-                        <div><img src="/twitter.png" alt="" /></div>
-                        <div><img src="/linkedin.png" alt="" /></div>
-                        <div><img src="/wa.png" alt="" /></div>
+                        <div><Image height={185} width={185} src="/fb.png" alt="medsos" /></div>
+                        <div><Image height={185} width={185} src="/twitter.png" alt="medsos" /></div>
+                        <div><Image height={185} width={185} src="/linkedin.png" alt="medsos" /></div>
+                        <div><Image height={185} width={185} src="/wa.png" alt="medsos" /></div>
                     </div>
 
                 </div>
@@ -39,10 +39,10 @@ export default function DetailNews() {
                         Berdasarkan hasil perhitungan kerugian keuangan negara yang dilakukan BPK RI adalah sebesar Rp 13.213.174.883.</p>
                 </div>
                 <div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
-                    <div><img src="/fb.png" alt="medsos" /></div>
-                    <div><img src="/twitter.png" alt="" /></div>
-                    <div><img src="/linkedin.png" alt="" /></div>
-                    <div><img src="/wa.png" alt="" /></div>
+                    <div><Image height={185} width={185} src="/fb.png" alt="medsos" /></div>
+                    <div><Image height={185} width={185} src="/twitter.png" alt="medsos" /></div>
+                    <div><Image height={185} width={185} src="/linkedin.png" alt="medsos" /></div>
+                    <div><Image height={185} width={185} src="/wa.png" alt="medsos" /></div>
                 </div>
                 {/* <div className='h-auto lg:h-[350px]'>
 
diff --git a/components/page/MenuLink.tsx b/components/page/MenuLink.tsx
new file mode 100644
index 0000000..bb3f7d1
--- /dev/null
+++ b/components/page/MenuLink.tsx
@@ -0,0 +1,30 @@
+'use client'
+import React from 'react'
+import styles from './menuLinks.module.css'
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface MenuLinksProps {
+    item: {
+        icon: JSX.Element;
+        title: string;
+        path: any;
+    };
+}
+
+
+const MenuLinks: React.FC<MenuLinksProps> = ({ item }) => {
+
+    const pathname = usePathname()
+
+    console.log(pathname);
+
+    return (
+        <Link href={item.path} className={`flex items-center gap-2  hover:bg-slate-400 dark:hover:bg-[#2e374a] p-2 rounded-md ${pathname === item.path ? 'bg-slate-300 dark:bg-[#2e374a]' : ''}`} >
+            {item.icon}
+            {item.title}
+        </Link >
+    )
+}
+
+export default MenuLinks
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a5d0926..24cd358 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "react-datepicker": "^6.1.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.50.1",
+        "react-icons": "^5.0.1",
         "react-tailwindcss-datepicker": "^1.6.6",
         "react-tweet": "^3.2.0",
         "swiper": "^11.0.6",
@@ -5853,6 +5854,14 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index bd22bbd..c024a50 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "react-datepicker": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.50.1",
+    "react-icons": "^5.0.1",
     "react-tailwindcss-datepicker": "^1.6.6",
     "react-tweet": "^3.2.0",
     "swiper": "^11.0.6",
diff --git a/public/assets/satker/siber - Copy.svg b/public/assets/satker/siber - Copy.svg
new file mode 100644
index 0000000..903f9ff
--- /dev/null
+++ b/public/assets/satker/siber - Copy.svg	
@@ -0,0 +1,10 @@
+<svg width="158" height="103" viewBox="0 0 158 103" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="49.5" y="10" width="59" height="59" fill="url(#pattern0)"/>
+<path d="M66.5013 88.084C65.9173 88.084 65.3893 87.984 64.9173 87.784C64.4533 87.584 64.0853 87.296 63.8133 86.92C63.5413 86.544 63.4013 86.1 63.3933 85.588H65.1933C65.2173 85.932 65.3373 86.204 65.5533 86.404C65.7773 86.604 66.0813 86.704 66.4653 86.704C66.8573 86.704 67.1653 86.612 67.3893 86.428C67.6133 86.236 67.7253 85.988 67.7253 85.684C67.7253 85.436 67.6493 85.232 67.4973 85.072C67.3453 84.912 67.1533 84.788 66.9213 84.7C66.6973 84.604 66.3853 84.5 65.9853 84.388C65.4413 84.228 64.9973 84.072 64.6533 83.92C64.3173 83.76 64.0253 83.524 63.7773 83.212C63.5373 82.892 63.4173 82.468 63.4173 81.94C63.4173 81.444 63.5413 81.012 63.7893 80.644C64.0373 80.276 64.3853 79.996 64.8333 79.804C65.2813 79.604 65.7933 79.504 66.3693 79.504C67.2333 79.504 67.9333 79.716 68.4693 80.14C69.0133 80.556 69.3133 81.14 69.3693 81.892H67.5213C67.5053 81.604 67.3813 81.368 67.1493 81.184C66.9253 80.992 66.6253 80.896 66.2493 80.896C65.9213 80.896 65.6573 80.98 65.4573 81.148C65.2653 81.316 65.1693 81.56 65.1693 81.88C65.1693 82.104 65.2413 82.292 65.3853 82.444C65.5373 82.588 65.7213 82.708 65.9373 82.804C66.1613 82.892 66.4733 82.996 66.8733 83.116C67.4173 83.276 67.8613 83.436 68.2053 83.596C68.5493 83.756 68.8453 83.996 69.0933 84.316C69.3413 84.636 69.4653 85.056 69.4653 85.576C69.4653 86.024 69.3493 86.44 69.1172 86.824C68.8853 87.208 68.5453 87.516 68.0973 87.748C67.6493 87.972 67.1173 88.084 66.5013 88.084ZM72.6018 79.624V88H70.9218V79.624H72.6018ZM79.0136 83.704C79.4856 83.792 79.8736 84.028 80.1776 84.412C80.4816 84.796 80.6336 85.236 80.6336 85.732C80.6336 86.18 80.5216 86.576 80.2976 86.92C80.0816 87.256 79.7656 87.52 79.3496 87.712C78.9336 87.904 78.4416 88 77.8736 88H74.2616V79.624H77.7176C78.2856 79.624 78.7736 79.716 79.1816 79.9C79.5976 80.084 79.9096 80.34 80.1176 80.668C80.3336 80.996 80.4416 81.368 80.4416 81.784C80.4416 82.272 80.3096 82.68 80.0456 83.008C79.7896 83.336 79.4456 83.568 79.0136 83.704ZM75.9416 83.08H77.4776C77.8776 83.08 78.1856 82.992 78.4016 82.816C78.6176 82.632 78.7256 82.372 78.7256 82.036C78.7256 81.7 78.6176 81.44 78.4016 81.256C78.1856 81.072 77.8776 80.98 77.4776 80.98H75.9416V83.08ZM77.6336 86.632C78.0416 86.632 78.3576 86.536 78.5816 86.344C78.8136 86.152 78.9296 85.88 78.9296 85.528C78.9296 85.168 78.8096 84.888 78.5696 84.688C78.3296 84.48 78.0056 84.376 77.5976 84.376H75.9416V86.632H77.6336ZM83.6525 80.98V83.08H86.4725V84.412H83.6525V86.632H86.8325V88H81.9725V79.612H86.8325V80.98H83.6525ZM92.6793 88L90.8313 84.736H90.0393V88H88.3593V79.624H91.5033C92.1513 79.624 92.7033 79.74 93.1593 79.972C93.6153 80.196 93.9553 80.504 94.1793 80.896C94.4113 81.28 94.5273 81.712 94.5273 82.192C94.5273 82.744 94.3673 83.244 94.0473 83.692C93.7273 84.132 93.2513 84.436 92.6193 84.604L94.6233 88H92.6793ZM90.0393 83.476H91.4433C91.8993 83.476 92.2393 83.368 92.4633 83.152C92.6873 82.928 92.7993 82.62 92.7993 82.228C92.7993 81.844 92.6873 81.548 92.4633 81.34C92.2393 81.124 91.8993 81.016 91.4433 81.016H90.0393V83.476Z" fill="#DD8306"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1506_351107" transform="translate(0 -0.0508475) scale(0.0169492)"/>
+</pattern>
+<image id="image0_1506_351107" width="59" height="65" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAABBCAYAAABvnNwUAAAYgUlEQVRoBdWbCVBUV7rHqVevpl5NvZqqeS8vMU4mMYnbGKOgKMgm+740DTTQ7Ivsm+yCCrgBoiauuO+4oMYFQaBX3BVcQBAUEeimG1wSY5bJKGT+r77T3BYQEo2YqaHq1L19+97L+Z3/d77zne+c1tEZhb+mpqYxbR1KR0WXOkupUpd0qbuvdal7nqh7HmC4crOhERJZzQhF3iuWyttFUtmZaql0tUgkDTxdVTU1N1f2n6NQ1dd/RUtLy9jOzq5AhUq1q0vd3abuefDzUKi2dgUuX63HydMy7C05jfXFpViavwMLcoohDIgDz40Hf/8AREVFIzNzAVasyMfmLVtx9NhxiCWylxpCLJU/FUtlomqxNKtCJDKUyd4SfG5u7n+0dnTMUHSplypV6hsD4ZTqHtRdb8LhYyKsXLMXMUmrwPdZAHO7eJjZxsPUJra/xMHURlOMzAMw7sOPRiyTJ06CmYkpBAIBUlPTsH7DRpwsOz2oAcRS+dfVEtnBKrHMp6Ki4k+vL9mQJ+7caZ+s6Opa3q8eM8kudQ8u1zaiePsJpGRugAMvGeYO82HjkgETqxiY9QOZWMfAwjEZRhaRMLGOhbldIiydUkHXg8MzRgQdqRE+/mgcjOYYITAgECvyC3DiVNkAePlPIonseKVIKigrK/vjEIyRP15ubf1Th1IZrlSpLnGm2anoQqXoMrJyNsDTLw/m9kkMwMAsFCZW0Uy5uXaJoGJqHaspNnHsHoIjRakR2Ll1LOqu34bedN3XBh7YEARvYW6B+fOTsb/kwAtwqfyJSCzfUlkpmT0iZcv9+9MUXepiVXfPU4JUdfegUnQWS/J3wt4tmVXWwmE+rF0yWOWNraLYNX3jAAZnZpsA+p7UtXJOA302saaGiIOxZRQrZNI+Qbl48PARoiKj3gh2IDidGxsZIy0tHceOn9CCi6Xya1UiaahW7bYOJV+pUtdw/bC1rRObtx+BMGQJ63OkIvU9UsXKKQVz7RKYmsZW0TC2imHqkZoDgQjQwkFjwk4e2YhKKEJEfCEi4gpxsLQaDx8+wqHDpXDn8cDnubMyW3/WqMCP//gT8N352LipGBKZnIGLpfJHIokkSUep6v6RlGxouoNlBdth75bKFCMYAqVK27svYrCkGkFToQawdklnwANhCZr6KD1vZBnNGmj5yr2436HA06ffoe/nn/Hg4UM8/vpr/PDDj1Cpu7FpUzH+NmnyqMAOVNzM1Az5BYUQS+UQSeStOkqVmsH6BufByDISs02DWR80nBsOI4sI2LguYI7G2JKUjAYdze0T2b2OHjkMnH1H31tGwYiZrOac7udMXxiSA7H0PFrvtUGh7MLt5ju4UluHkJDQUYccCPzJuI9RWS0mlZUEy/qoMGQp63sE+Jker3/YiGPHORYRzPnY8bKZyuRVSVVr5zQGT0oT6FzbWASEL2PvIXOfYz6PKWvjmom5dvFYXrAN33//PYO939GJbdt3jAiqO20664cDK/5bzj8d9zGqRGJS9mudru6eB2TGwpA8phw5ESvnVGbCGqgMNqxwJm3plAZSdKDnZaZtFYO07C1YX3wYNi6Z7PmZc/yhAU1kjXH+wjXcbrmLo8er8O233+L6jXrQmDocxPykJKSnpw/73XD3j3Tt048/QbVYQqb8PfXZeoL19s/U9kcaH8mbUmXt3Bcyj8q8rFMqbN2yGQCpZmg+D2Y2MXDkZ8HaKQmnyi/i3IU6OHsuZJ/N7WKZZZA5u3hm4lZTC2KTVsLYPAg2Vtaoq6uDn9BPCzTh0/GYNHESJk2YiPLychw/foKd07WJ4ydo7xsJbLjr4z/5FCKpTAOrUKlqCTYoPAdz5oZrzZeUc/JcwoCnzuCz4MDALExj1ubzmImS2nzfhag5fwOPv/kGvX29aO/oxNOnT9HUfBcJqes147B1LIIiCuAhXMRMXH+OgFWcnJLA00sLYW9nh6tXa/HkyRM8f/6cvYss4FZj46D7hoMa6Rr9D4rDxVK5UkfRpQkeohOKMMs4iJkngZJpknosIGBhn2a8nGvb3xed02HllMaKtXMqtu8+zvri3dZ7kMivwsJuHrMO8uZmdgmsfzPTt4mFoam/FnBoJT/72xQcOHgInQolWu7ew1fHT2CGrt6I9w99fuhnerYftlanS60WkbKxSYXaIWWGoS8oOqLggNQ0t5+vMUfLKJhax4EclbVzBuuX9B158T0lZ3Dn7j08ePgYVeLzIG9OoKY2XHwc1++4EjHHbGRYquzRI0fQdLsZjx4/xsFDh38zKL3LYNZsBlstkV/QUXapygg2OX0lqzx50RmGQqYwxbU0dJC5kkcmeIqD6ZqRucZDEyh9L62pY8GDp99CnD1fC0/hQqYoqUlRF1PYNp4NY/qGL0x3qBLUN8+eOwcXZ2c42Nnj0qXLbxRampqYcsqeoaGnhGBXrtkH3dnecPFezoIKMl9T2zgWMVFoSJUmeHJcMwz92HVSjxyXqXUUrB0imDenYIOGIA/hYpjbJbH72NE2AZaOKez5XzJjiplp2OEagcz6TaIrG2sbBiuRyI/pKNTqYoLdsvUALB1TMdcuCXPMI2Bmqwn5yEyp77KIyCIS02cJmJIz5vgxUyW4qTPcWWOQwvpGAQyK1Cc4O7cspqbGIpJZlzCxfLuBBNdQdHRzddMoK5bsImXzCXbP/jIYmAZhtkkgZhh4Y7ZpEPSN/KFv7M+OU3Sd2ZH681Q9N3Z95hwhOzcwC2HffT6Tj9lmISwKm20aAsO5YaAjFeoGdCRfYGPsg6Txk5A0YRLmc2X8gPMJk5A8oKRMmASupE6YhNQJk7UlbcJkcCV9wmSkT5wMOmZQmTgZa0PDNX1WKl+t06FQpRLs5u2HMWW6y6ASm7AUuUs3Yln+ZhQUbYe3MBnzUwvg45+C5PRCpPSXgJBMhIRnaa8lpxXCxT0GdOSKEy9a+24vPUc81jP4XUpzaiaDFYlkmTrtiq5ggj10tEJbGQ768eNv0HqvAzcbWnD9xm1ExOTg4eOvceKUBM0tbag4cxb1DS2QyC7jam0DbjXexbkL15CaWcQaqbnlHiqrzqKx6S7E0kva93vpOvwuoNSgN5eu0CgrkYXrdHZ2OROsRPaiMhzs/gOncPHyDVy6chOPHn2D/QfKGOxXJ0S419YJWc0V3G6+B7HkIq7W3ULj7VacLJMiIDgDS5ZvQlubAhQi9vX1ITp+yb8EtnYDTfVqUCUWO+u0tSn0Cfb6zSZtZTjY9Rv34/CRM9oSFLYAe/efxPy0QuzcfUxb5kUtQtHqHdr7Dh+pQFjkImbyn+m6omjNTsQlLdO+X2DAw0Oe1+9QPHHx4GEGW1kpmaFzvaVlLMF2KFT4fIabtkIEXHLwNC5euoEL/UUgTMaFi9ehUKpZablzHx7eiZCfvap9zsYxnGUVr9TWM9OuEp2Hp08SqAG4RvQLysA///nP36WcPX+RwZaWl4/RoZSkqrvnJwK2sA3WVogqdrO+GbebW1FRWcP6ZkHRNvzw40+wtJ8HC7twNDS1IWfJBnz/w4/a53he8Xj48DF7Riq/xCKqkPBsXL/xwnL8fyfYZ8+eMVCxVP4jZUhZTkrZxXK/8A/O0FaaYMkpbd56mPU38symloH44Ye/Y29JOfaUlKPnwTdIzShiQfvRr6pw9KtqZOesxZMn3zJPfeduO/bsO4Hg8Kx/CSxNIlgyXiJr1ibfFCpNfJy5cM0gWL4gAcbmfoOu8TzjEB2Xh+i4JQgKzcS0mTxmymTOfEEiDE19ETovmz0z29gb9A665sqP1b5nrm0UspceQ0r2bqTnHkBm3mHEpWxC/loZQiNXYHH+KSzIO4yw6HwsLjjFvktbvB8LlhxB2qJ9SEzfioXLv0JGzgEkZWzH0tXVSM7ahZTsPQiPKURgWA7Scw4ib9lGjbISWdkL2C5NFLVpy0Fthbj+9TaO02d5wc23AL7hxWxuLIzYAq/gdSyvHJFyBNbO6fAK+hJuvoVw91sJj8A1EM7bAnv+Irj55oMfsAoB0Ttg67oAoYkl7B5ByDoW6rr6rIBfxFaWYFi1VpNiraaAgvvrVKoTqM9Wi8//LrAUd3sErAbPtwAh8ftZvOwZuAb+UdvZ7IoaQQO1Gk6eeQhNKGHhqm/YJrj55LP7KBqj+3l+K8H3LwLfX3NvUOweuHgvY41XUnqGKUvpVI5Vp62z05pgaX1mqp7rWwemsJIU4wesZtNF/8jtDIpUEQSvg0fAGjZTIrCQ+H0sNvdhDVAIz6AvWWxOR+G8zSwnxvdfxRqJ7nX1yQc1XFDMTlRUUqKtBoMS5vX19e+qux+AioNL5FuHJVWcvJZogP1XMZMjs3YnhQJWs+wIqUn32PGymMp+EVsYpLtfEZy9liIs8QCbNpKF0NSTVCZImrWRyXv4asJEiVz+TJsk5+TtUncrSd30BaveOixNCkgNnrCQVZwqSKZLlSYQYcRmUEaE51fEKh8YvYtNP0lNpn7IegZKJu7quwJ8vyIExuyChf18eAWvZZONVRvK+52TvJ5j1B6VKvVxgt2z/8RbhyVlSUGCoz5G0DRXDk86xKaF1F+pkJnSFJEylKQ8OSVKyNN3lBCg/u4sWAqfsI3QMxSyBiTnRuA79moWvmjdRwvJnShUmtlPQ+MdUIhHXljf0B1T9XijDk/TRDI779ANoHkx9VnyuDT/pTQtqU4elfo23cM8bOQ20HNk6vTZd95m2LplsRyZA38xe56gqeGov5ZXipiytJjNMWqP7e3thqQsFWd3zXTs6GYTPL0+DsuzzEcFeKqeCz6b7sKcCWVFvEPWM/UoQUAA9u4LEZJQwjIl9JkagMybzN7VezmcPHOZwyJVSWlKKgTH7YWLYBk7kqXQECTwS2Wg5JzOnDkzTgvJnZSWNv1B2b+Ct6JwC6ZMd4W1rQekB8zQ2/C/2FJogun6v91Tbyk0wtMbf0FWqitmmQQxCMp+EJSjRy78IrfBwjGFqUuNQDDC8GLoGfjCu18x6o+0YuEsWMbASXVByHo48BfBwiGJmTupvHqdZnwVSWWtHN9LR6VKk3yrOXeVRUZFeS4wMffAjZO66K3/Mw4VG8NP6P7aKjs68dF4+lP0NfwZ+zaYYqqeO4OhMZKCByevPOjO9mENQGMv9edp+p5sLCZFg2P3sBQQeWKCob5KVkDKU0qIAw5mQ88ynCir1JiwWL7xJUjuQodCFcOZsr1LBINKiHKGv9ADlw5NRF/DO1Bd+BQ+AqdhgWmMLsq1gZk5D9a2XkiItEN8pAu+q30fP99+F70N70B9aTzSUyMQELUDYVE5cHANZZXn+WRjYbZm2SVkXjZ2b1sMvt8y2LotYKAETXCC4LUswqJ8F3lx6qekOI3bLuSs/NO0JlwpFttzbC8d61tbP+DWaVd9uZMBGRjzERnmgeRoe/zj5l/R1/AuntZPxrY19i8BzzHxgPr8e/j7rY/wvHkc+prHorfxPfTefBd9jWPR1/gODmyyQnB4KnIyvXGt0gYNMnecPeULda0B0tKiWZ8U+ERAdWkGXNx8ERizUwtFzpI8MaV7OU9MfZqsgBwTJQo3bz/KYGnDya5du/7rJciBF5Sqbra9oKGxhZkyeeXPZ/Dg7OSCokV26L35Hnrr30dT1Wdwc3PSem66jxJxFw5PZn289/ZH6GsYi96bY9B7Ywx669/Bs9sfIizYGYZzg3H5yETMTwxGTOIS7N21BJl5JWxdl9aCHdySUHPcE1kL89nQYmLuiTWrspG7dBnCEzaxhTZyUobm4XDwWMy8N1M4YBmqxVINrES2byDXsOdcnEzmTNM6biLgI3CFviEfrdUT0XvrXfTdGoOGSn3YOwqwpchWCy308YD67P+hr2ks+ho+wPPrY9B78y/oa3wXK3Os2fts7fjoOfsO/tE8CV21cxEXFw0XQQ7rq27CQjbsGJgFwtEzl43FRQVpeNZE7xiDVbk22jg4KXMrgoJDmaq0zJqeVfhqJsyRNzW1j1F19zwjWPm5q5iiOzjjmBDNxw/XyDw/Qm/DB1BcnI6gAD4WpXsgK8UZU3VdsTrXAi2iaei7/T6e3/orSOWfGj9GWJAjpuu740LpHPQ1f4j6M0YQHTKFZ9AXIOdD3pWsIzAiH6kZefjiywLERgfCK7AAx3b74tHFiei4YIh5STtRlOuOJ3UT0Ns4Fjcl3thanImyimrOhJWvvE9K2aU+xjmqkAjN3JRTmI7zY73w3Y1J6K1/D89bJsDQmMeU/XzGi6FJb5Y7vLy8YG7tjZWL7RDg98KppSSGo+vsB9i+NhDfNUxAaMxK6M4SsIAhLWMBTh6MAU+Qji/zvbFrvRfi5+cgKzsXj67p41HdTHSe18WzW/+j8QM330df/Ri0XY3RqioWS/M48X71eK+jw5KDPXuhdtiZUEigAA/qZuJuzWxMnzk4dzWwYYY7d+Ilorl6CmLmr0FiDA/CeRvYOEvDCnlUAqf5LY3BFGkZmIawcwMTHySlrcGujT6oqw7B88YP0df4If5+Ywpq5BUc7E8nT1aP/VVI7gbK1yhVPbSTjUVUlOgertJmFl4I9PPElVNGqCoxQVKMEz7Xc4OrixtMzEZuAAPTYAj9o+AV/CUbOmjZhaIgCjYCY3az+ShN8z7TdQNPWAA7t2wWF9M8lbwxeV1Lx2QsSA3Fd1f/gqaLuRwobQXcxXG88rFdofDhYJuaW0GtOhzwHBM+1q1wRe3pufixcRpuVNvi4SU9fFevix1f2MLByQuW1vxBz84yDmRDCi2K0SyHmxBQJEReljaxUJaCZjnkZWk8nW0SrNnP4ZiCoJjdTOmopA24VuEOaf8WIImsprdcLJ74ypDcjdTBleruJg54977jgyo8FJwmD/qGPOZgQgI9sW2VDb7aYYGbVVZIidc4OR+BO/ZtsEVmqi+W5KbhUmUYDu9OwKa1SWyN1ydwEaISVyM8cSdbFqUZzbSZnixooBCR4mBaTaTzKbqu2LkpFpfOHdKqKhLL93D1f+1je7uCx8HSxJ6WP4ZC/tpnaoRp/floykvT8BUVEYiTB+MRFRUBV690+IStQ+k2LzTVkEPyQGLKEjblozCRTJeyFzONAjSL4C4Z8Az8gmUzincM2L8or/lx2KD/daiVKpWEA77Teh9W9qGvDTy0QYwtI+DlG4fU9AX9ybK18PJ0h0/IagYXGL2TJdO4zWY0laNIiUJCmjDQbCcqfrlWUZrdVL+OBx6pAVpbO6dw4y5Bn794DTMNPd8ImCpPsxrKEtJ6r0fgF6x/UoxLWxhoCZT6L3ljmojTHJfSL9RolJeizSjVEs1WPQIVS+V3dslkvxwajgQ49HqnUrWYU5eOx0+JWQg5VLFX/Uzb/Wi2QsOKIHQDC+xp2KGtSKQgOSS/yK3QM/RlXpoahK6T04pN24sTpzRZQwKVyGt+rqqSmA2t82/+3O+srgwEPnDo9G8GJm9LSlEOiQo5HUrPUF6YJ1ypUdC3APa8hQiI3smsgJySnUssyio0sS8D1Zhv4W8GG+nBu3c7P1F193w9EPhQaTmm6w8eVl5FXdqgYuWUyswzOG4f23hNwcRMI39tGoZUpznrXNt4NqH3Dy/E6TMvTLfffM+Vlpb+YaQ6v9H1dqXSXt3d0zsQmBa9RhqDRwKfOcePDSO095GUpaQ5pT8FIWvZOKvZ05HAkug0Didn7UFZedUghySWyjvLy2Vj3gjo1x7u6FDGDYSl89rrt+A8YBvBSJDcdX3jQOZ8aPMJ9UXKVtBOc0rP0DX/yG1sJkO54piEPO20jTNdiUz+5MwZ8bRfq+uofN+uVOYNBW7vVIIWxrjMJAc23JGSbeRlvUPXg7YdkbclL0z9ljITlF2kRbGNWw4OUlMDK//+jEhkMiogr/qSDkXX8qHA9LmsQgZrh7BfHJpoF42DRw4zYQYZt4f1Sxef5SzBlr20BGUVmqWLF2qS55U/HVXP+6qwdF+HQpGs7u556Tc9HYouFH2xEzMNvYaFpl1xFPeSkpQVJE87yyQY6XnHsWPPsWHUZGPpg0FrNq9T0dG6l35joOru+X44lZvv3EPO0g0vQdNSI628ETDti0peWIp1m0oglo7wKy6p/NZpsfiT0arzG72ntbNzSpe6+9ZwwHSt5e59rP5yFyxtQ5jSNOyQKafnHsTuknKIpIOHlIGmK5LIS0pLZf/9RhUc7Yfr6ur+qFSq1qqG+aka1whKVTdOnpZgyYpinCx/+SdoAyHpF1mVIpFwtOs5qu+719Fh1KV+MfHnQAceL16+Mmy/ZLDymp9JzXLa3fLv8EfhZYdCEcotgw4EpfORYMUS+YWqKonRvwPjS3Uk0+7sVCYMhR4KK5bIr9AONO32nZfe9G90oamp6Q/0E1SlWs0mE/2wvSKJ/NjvOW7+P41d2Y5lpTt1AAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/styles/globals.css b/styles/globals.css
index 22c8f20..2d72638 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,56 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-     
-.swiper {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-    background: #fff;
-  
-    /* Center slide text vertically */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .autoplay-progress {
-    position: absolute;
-    right: 16px;
-    bottom: 16px;
-    z-index: 10;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    color: var(--swiper-theme-color);
-  }
-  
-  .autoplay-progress svg {
-    --progress: 0;
-    position: absolute;
-    left: 0;
-    top: 0px;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
-    stroke-width: 4px;
-    stroke: var(--swiper-theme-color);
-    fill: none;
-    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
-    stroke-dasharray: 125.6;
-    transform: rotate(-90deg);
-  }
\ No newline at end of file
+
+/* 
+*{
+  border:1px solid green;
+}      */
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 5px;
+}
\ No newline at end of file