diff --git a/bun.lockb b/bun.lockb
index 8b693283..51c7faeb 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 8ffaa9f5..bde1c75a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@mantine/carousel": "^7.16.2",
     "@mantine/charts": "^7.17.1",
     "@mantine/core": "^7.16.2",
+    "@mantine/dates": "^7.17.4",
     "@mantine/dropzone": "^7.17.0",
     "@mantine/hooks": "^7.16.2",
     "@paljs/types": "^8.1.0",
@@ -32,6 +33,7 @@
     "animate.css": "^4.1.1",
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
+    "dayjs": "^1.11.13",
     "elysia": "^1.2.12",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx
index 4a34316a..bc2da828 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx
@@ -6,20 +6,20 @@ import React from 'react';
 const dataBeritaTerbaru = [
   {
     id: 1,
-    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
-    image: "/api/img/berita-1.png",
+    judul: 'FESTIVAL SENI BUDAYA KAB. BADUNG',
+    image: "/api/img/tari-3.jpg",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
     id: 2,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
     tanggal: "Kamis, 13 Januari 2025",
   },
 ]
@@ -34,23 +34,23 @@ function Budaya() {
               <Stack gap="md">
                 <Box>
                   <Image
-                    src="/api/img/berita-1.png"
+                    src="/api/img/budaya-1.jpg"
                     alt="Darmasaba Smart Village"
                     radius="md"
                     fit="cover"
-                    h={{ base: 450, md: 660 }}
+                    h={{ base: 450, md: 610 }}
                   />
                 </Box>
                 <Group>
                   <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                    <Text size="sm">Teknologi</Text>
+                    <Text size="sm">Budaya</Text>
                   </Paper>
                 </Group>
                 <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
-                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  FESTIVAL SENI BUDAYA KAB. BADUNG
                 </Text>
                 <Text size="md" lineClamp={3}>
-                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                Semeton Darmasaba yang suka menikmati seni seperti baleganjur, gong kebyar, tari, dan lainnya. Nih! ada acara keren di Puspem Badung tepatnya di Balai Budaya Giri Nata Mandala yaitu Festival Seni Budaya dari tanggal 1 November 2023 s.d. 16 November 2023.
                 </Text>
                 <Group>
                   <Group gap="xs">
@@ -74,18 +74,18 @@ function Budaya() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/tari-3.jpg"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Budaya</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  PELATIHAN TARI WALI
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -105,18 +105,18 @@ function Budaya() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/tari-3.jpg"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Sosial</Text>
+                      <Text size="sm">Budaya</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  LATIHAN TARI REJANG GIRI PUTRI
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -145,13 +145,13 @@ function Budaya() {
                   <Image
                     radius="md"
                     src={v.image}
-                    alt="Prestasi Voli"
+                    alt=""
                     fit="cover"
-                    h={180}
+                    h={282}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Budaya</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx
index 368cded1..517af84c 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx
@@ -6,20 +6,20 @@ import React from 'react';
 const dataBeritaTerbaru = [
   {
     id: 1,
-    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
-    image: "/api/img/berita-1.png",
+    judul: 'PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023',
+    image: "/api/img/ekonomi-sampingan-3.png",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
     id: 2,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba',
+    image: "/api/img/ekonomi-sampingan.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI ',
+    image: "/api/img/ekonomi-sampingan-2.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
 ]
@@ -34,7 +34,7 @@ function Ekonomi() {
               <Stack gap="md">
                 <Box>
                   <Image
-                    src="/api/img/berita-1.png"
+                    src="/api/img/ekonomi-utama.png"
                     alt="Darmasaba Smart Village"
                     radius="md"
                     fit="cover"
@@ -43,14 +43,14 @@ function Ekonomi() {
                 </Box>
                 <Group>
                   <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                    <Text size="sm">Teknologi</Text>
+                    <Text size="sm">Ekonomi</Text>
                   </Paper>
                 </Group>
                 <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
-                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023
                 </Text>
-                <Text size="md" lineClamp={3}>
-                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                <Text size="md" lineClamp={2}>
+                Pemerintah Desa Darmasaba melalui kegiatan ketahanan pangan ini menjalankan dua kategori yaitu pertanian dan peternakan untuk kategori pertanian telah membuahkan hasil panen pertama pada hari Kamis, 24 Agustus 2023 melakukan panen bawang merah di lokasi ketahanan pangan Br. Taman, Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung. Adapun varietas bawang yang dipanen adalah Bawang Bali Karet (Batu Ijo) pada lahan seluas kurang lebih 7 are.
                 </Text>
                 <Group>
                   <Group gap="xs">
@@ -74,18 +74,18 @@ function Ekonomi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/ekonomi-sampingan.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Ekonomi</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba 
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -105,18 +105,18 @@ function Ekonomi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/ekonomi-sampingan-2.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Sosial</Text>
+                      <Text size="sm">Ekonomi</Text>
                     </Paper>
                   </Group>
-                  <Text fz="lg" fw="bold" lineClamp={2}>
-                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                  ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -151,7 +151,7 @@ function Ekonomi() {
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Ekonomi</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx
index 16fa774d..f094f8a4 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx
@@ -6,21 +6,21 @@ import React from 'react';
 const dataBeritaTerbaru = [
   {
     id: 1,
-    judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
+    judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
     image: "/api/img/pembangunan-1.jpg",
-    tanggal: "Selasa, 11 Januari 2025",
+    tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 2,
-    judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
-    image: "/api/img/pembangunan-2.jpg",
+    judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
+    image: "/api/img/pembangunan-3.jpg",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
-    image: "/api/img/pembangunan-3.jpg",
-    tanggal: "Kamis, 13 Januari 2025",
+    judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
+    image: "/api/img/pembangunan-1.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
   },
 ]
 function Pembangunan() {
@@ -153,7 +153,7 @@ Pemdes Darmasaba dalam rangka memenuhi kebutuhan masyarakat khususnya warga Br.
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Pembangunan</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx
index 2e610b81..e0bd49c5 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx
@@ -13,7 +13,7 @@ const dataBeritaTerbaru = [
   {
     id: 2,
     judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/pemerintahan-3.jpg",
+    image: "/api/img/pemrintahan-5.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
@@ -151,7 +151,7 @@ function Pemerintahan() {
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Pemerintahan</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
index 79092271..56a371de 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
@@ -9,18 +9,21 @@ const dataBeritaTerbaru = [
     judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
     image: "/api/img/berita-1.png",
     tanggal: "Selasa, 11 Januari 2025",
+    kategori: "Teknologi"
   },
   {
     id: 2,
     judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
     image: "/api/img/prestasi-voli.jpeg",
     tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Sosial"
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
     tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Teknologi"
   },
 ]
 function Semua() {
@@ -67,7 +70,7 @@ function Semua() {
           </GridCol>
 
           {/* Berita Sampingan */}
-          <GridCol span={{ base: 12,  xl: 4 }}>
+          <GridCol span={{ base: 12, xl: 4 }}>
             <Stack gap="md">
               {/* Berita Sampingan 1 */}
               <Paper p="md" shadow="sm" radius="md">
@@ -147,11 +150,11 @@ function Semua() {
                     src={v.image}
                     alt="Prestasi Voli"
                     fit="cover"
-                    h={180}
+                    h={{ base: 180, xl: 250 }}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">{v.kategori}</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx
index bc6cdec8..c54b3754 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx
@@ -7,7 +7,7 @@ const dataBeritaTerbaru = [
   {
     id: 1,
     judul: 'AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025',
-    image: "/api/img/sosial-1.jpeg",
+    image: "/api/img/sosial-4.png",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
@@ -170,7 +170,7 @@ Jaga Bumi, Pilah Sampah dari Sekarang! ♻️
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Sosial</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
diff --git a/src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx b/src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
index 6a9ef310..2aab958d 100644
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
@@ -7,19 +7,19 @@ const dataBeritaTerbaru = [
   {
     id: 1,
     judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
-    image: "/api/img/berita-1.png",
+    image: "/api/img/teknologi-3.png",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
     id: 2,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'DARMASABA MENUJU DESA DIGITAL',
+    image: "/api/img/teknologi-2.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
 ]
@@ -74,7 +74,7 @@ function Teknologi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/teknologi-1.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
@@ -85,7 +85,8 @@ function Teknologi() {
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  DARMASABA DIGITAL PROJECT IS COMING! Desa Darmasaba nggak pernah berhenti berinovasi! ?
+                  Kali ini, kami siap menghadirkan gebrakan baru yang akan mempermudah sistem kerja di lingkungan
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -105,18 +106,18 @@ function Teknologi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/teknologi-2.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Sosial</Text>
+                      <Text size="sm">Teknologi</Text>
                     </Paper>
                   </Group>
-                  <Text fz="lg" fw="bold" lineClamp={2}>
-                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                    DARMASABA MENUJU DESA DIGITAL
                   </Text>
                   <Group>
                     <Group gap="xs">
diff --git a/src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx b/src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx
index da96cfff..9f61ab04 100644
--- a/src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx
+++ b/src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx
@@ -1,62 +1,62 @@
 import colors from '@/con/colors';
-import { SimpleGrid, Box, Paper, Center, Stack, Image, Text } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 
 const data = [
   {
     id: 1,
-    image: "/api/img/galeri-1.png",
-    title: "Pendapatan",
+    video: "https://www.youtube.com/embed/J2uZcZlvL7g?si=3pWy0ho77dW0E2Gt",
     tanggal: "3 Mar 2025",
-    judul: "Pemasangan Wifi Gratis Di Publik Desa",
+    judul: "MENERIMA KUNJUNGAN STUDI TIRU DARI PEMERINTAH DESA TUA SULAWESI SELATAN",
 
   },
   {
     id: 2,
-    image: "/api/img/galeri-2.png",
-    title: "Belanja",
+    video: "https://www.youtube.com/embed/GX4sqS5zAzw?si=rulOAa2Ylbs4_R82",
     tanggal: "4 Mar 2025",
-    judul: "Panen raya Desa Darmasaba",
+    judul: "Sosialisasi Pengelolaan Sampah di SD NO 3 Desa Darmasaba",
   },
   {
     id: 3,
-    image: "/api/img/galeri-3.png",
-    title: "Pembiayaan",
+    video: "https://www.youtube.com/embed/HCY4H6ODmeA?si=0epW8PAtd6Jum90k",
     tanggal: "5 Mar 2025",
-    judul: "Kegiatan Pembangunan Pelinggih",
+    judul: "Posyandu dan Senam Lansia Banjar Gulingan",
   }
 ]
 function Video() {
   return (
     <Box pt={20}>
       <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3,
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                  <Box>
-                    <Center>
-                      <Image src={v.image} alt='' />
-                    </Center>
-                  </Box>
-                  <Box>
-                    <Stack gap={"sm"} py={10}>
-                      <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
-                      <Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
-                      <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Fusce sagittis nec arcu ac ornare. Praesent a porttitor
-                        felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
-                    </Stack>
-                  </Box>
-                </Paper>
-              </Box>
-            )
-          })}
-        </SimpleGrid>
+        cols={{
+          base: 1,
+          md: 3,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box key={k}>
+              <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Box>
+                  <Center>
+                    <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
+                      <iframe style={{ borderRadius: "16px" }} width="100%"
+                        height="100%"
+                        src={v.video} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+                    </Box>
+                  </Center>
+                </Box>
+                <Box>
+                  <Stack gap={"sm"} py={10}>
+                    <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
+                    <Text fw={"bold"} fz={{ base: "sm", md: "sm" }} lineClamp={1}>{v.judul}</Text>
+                    <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Fusce sagittis nec arcu ac ornare. Praesent a porttitor
+                      felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
+                  </Stack>
+                </Box>
+              </Paper>
+            </Box>
+          )
+        })}
+      </SimpleGrid>
     </Box>
   );
 }
diff --git a/src/app/darmasaba/(pages)/desa/galery/page.tsx b/src/app/darmasaba/(pages)/desa/galery/page.tsx
index c1a57af5..d2e080ef 100644
--- a/src/app/darmasaba/(pages)/desa/galery/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/galery/page.tsx
@@ -22,7 +22,7 @@ function Page() {
       </Container>
       <Box px={{ base: "md", md: 100 }}>
         <Tabs color={colors['blue-button']} defaultValue="foto">
-          <Grid>
+          <Grid align='center'>
             <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
               <Group>
                 <TabsList>
diff --git a/src/app/darmasaba/(pages)/desa/layanan/page.tsx b/src/app/darmasaba/(pages)/desa/layanan/page.tsx
index 9f052bc9..4ccfd02c 100644
--- a/src/app/darmasaba/(pages)/desa/layanan/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/layanan/page.tsx
@@ -81,7 +81,7 @@ export default function Page() {
     const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
     const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
     return (
-        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
+        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
             <Box px={{ base: 'md', md: 100 }}>
                 <BackButton />
             </Box>
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/adat-&-budaya/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/adat-&-budaya/page.tsx
new file mode 100644
index 00000000..7558c11a
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/adat-&-budaya/page.tsx
@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 2,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 3,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 4,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 5,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Adat & Budaya
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman adat & budaya di Desa Darmasaba.
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/digitalisasi-desa/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/digitalisasi-desa/page.tsx
new file mode 100644
index 00000000..e6837804
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/digitalisasi-desa/page.tsx
@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 2,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 3,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 5,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Digitalisasi Desa
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman digitalisasi desa
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/ekonomi-&-umkm/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/ekonomi-&-umkm/page.tsx
new file mode 100644
index 00000000..ffb38abc
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/ekonomi-&-umkm/page.tsx
@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 2,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 3,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 5,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Ekonomi & UMKM
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman ekonomi & umkm
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/lingkungan-&-bencana/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/lingkungan-&-bencana/page.tsx
new file mode 100644
index 00000000..50320eeb
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/lingkungan-&-bencana/page.tsx
@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 2,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 3,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 4,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 5,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Lingkungan & Bencana
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman lingkungan & bencana
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/pendidikan-&-kepemudaan/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/pendidikan-&-kepemudaan/page.tsx
new file mode 100644
index 00000000..003785fc
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/pendidikan-&-kepemudaan/page.tsx
@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 2,
+    judul: 'Lomba Video Pendek Hari Lingkungan',
+    tanggal: 'Deadline: 28 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Online Submission',
+    deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
+  },
+  {
+    id: 3,
+    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 4,
+    judul: 'Lomba Video Pendek Hari Lingkungan',
+    tanggal: 'Deadline: 28 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Online Submission',
+    deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
+  },
+  {
+    id: 5,
+    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Pendidikan & Kepemudaan
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman pendidikan & kepemudaan
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/sosial-&-kesehatan/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/sosial-&-kesehatan/page.tsx
new file mode 100644
index 00000000..f6924545
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/sosial-&-kesehatan/page.tsx
@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 2,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 3,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 4,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 5,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Sosial & Kesehatan
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman sosial & kesehatan
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/jadwal-rapat/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/jadwal-rapat/page.tsx
new file mode 100644
index 00000000..ed8e840a
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/jadwal-rapat/page.tsx
@@ -0,0 +1,65 @@
+import colors from '@/con/colors';
+import { Calendar } from '@mantine/dates';
+import { Stack, Box, Container, Text, Grid, Paper, GridCol, Center, SimpleGrid } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+            Jadwal Rapat
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }} >
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Center>
+                <Calendar size='xl' />
+              </Center>
+            </Paper>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }} >
+            <Paper bg={colors['white-1']} p={'md'}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  xl: 3,
+              }}
+              >
+                <Box>
+                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Hari Ini</Text>
+                  <Text fz={'lg'} >Senin, 13 Februari 2023</Text>
+                  <Text fz={'lg'} >09:00 - 12:00</Text>
+                  <Text fz={'lg'} >12:00 - 15:00</Text>
+                </Box>
+                <Box>
+                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Besok</Text>
+                  <Text fz={'lg'} >Selasa, 14 Februari 2023</Text>
+                  <Text fz={'lg'} >09:00 - 12:00</Text>
+                  <Text fz={'lg'} >12:00 - 15:00</Text>
+                </Box>
+                <Box>
+                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Minggu Depan</Text>
+                  <Text fz={'lg'} >Senin, 20 Februari 2023</Text>
+                  <Text fz={'lg'} >09:00 - 12:00</Text>
+                  <Text fz={'lg'} >12:00 - 15:00</Text>
+                </Box>
+              </SimpleGrid>
+            </Paper>
+          </GridCol>
+        </Grid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/pendaftaran-umkm/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/pendaftaran-umkm/page.tsx
new file mode 100644
index 00000000..5deb13c5
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/pendaftaran-umkm/page.tsx
@@ -0,0 +1,49 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Image, Grid, GridCol, Paper, TextInput, Center, Button } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+            Pendaftaran UMKM
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }}>
+            <Center>
+              <Image src={'/api/img/market.png'} w={{ base: 300, md: 500, lg: 530, xl: 550 }} alt='' />
+            </Center>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }}>
+            <Paper bg={colors['white-1']} p={'md'} h={'500'}>
+              <Text ta={'center'} fz={{ base: "1.5rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
+                Pendaftaran UMKM
+              </Text>
+              <Stack pt={20}>
+                <TextInput placeholder='Nama Lengkap' />
+                <TextInput placeholder='Alamat' />
+                <TextInput placeholder='No. Telepon' />
+                <TextInput placeholder='Email' />
+                <TextInput placeholder='Nama UMKM' />
+                <Button bg={colors['blue-button']} fullWidth>Daftar Sekarang</Button>
+              </Stack>
+            </Paper>
+
+          </GridCol>
+        </Grid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/desa/pengumuman/page.tsx b/src/app/darmasaba/(pages)/desa/pengumuman/page.tsx
index a4312087..5f18a7a8 100644
--- a/src/app/darmasaba/(pages)/desa/pengumuman/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/page.tsx
@@ -1,9 +1,61 @@
 import colors from '@/con/colors';
-import { Stack, Box, Container, Text, TextInput, SimpleGrid, Notification, Flex, Anchor, Paper } from '@mantine/core';
-import React from 'react';
+import { Anchor, Box, Container, Flex, Group, Notification, Paper, SimpleGrid, Stack, Text, TextInput, UnstyledButton } from '@mantine/core';
+import { IconCalendar, IconClock, IconSearch } from '@tabler/icons-react';
 import BackButton from '../layanan/_com/BackButto';
-import { IconSearch } from '@tabler/icons-react';
+import Link from 'next/link';
 
+const dataKategori = [
+  {
+    id: 1,
+    kategori: 'Sosial & Kesehatan',
+    jumlah: 5,
+    link: '/darmasaba/desa/pengumuman/sosial-&-kesehatan'
+  },
+  {
+    id: 2,
+    kategori: 'Ekonomi & UMKM',
+    jumlah: 7,
+    link: '/darmasaba/desa/pengumuman/ekonomi-&-umkm'
+  },
+  {
+    id: 3,
+    kategori: 'Pendidikan & Kepemudaan',
+    jumlah: 9,
+    link: '/darmasaba/desa/pengumuman/pendidikan-&-kepemudaan'
+  },
+  {
+    id: 4,
+    kategori: 'Lingkungan & Bencana',
+    jumlah: 6,
+    link: '/darmasaba/desa/pengumuman/lingkungan-&-bencana'
+  },
+  {
+    id: 5,
+    kategori: 'Adat & Budaya',
+    jumlah: 8,
+    link: '/darmasaba/desa/pengumuman/adat-&-budaya'
+  },
+  {
+    id: 6,
+    kategori: 'Digitalisasi Desa',
+    jumlah: 6,
+    link: '/darmasaba/desa/pengumuman/digitalisasi-desa'
+  },
+]
+const dataPenting = [
+  {
+    id: 1,
+    judul: 'Jadwal Rapat',
+    jumlah: 5,
+    link: '/darmasaba/desa/pengumuman/jadwal-rapat'
+  },
+  {
+    id: 2,
+    judul: 'Pendaftaran UMKM',
+    jumlah: 7,
+    link: '/darmasaba/desa/pengumuman/pendaftaran-umkm'
+  }
+]
 function Page() {
   return (
     <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
@@ -41,32 +93,36 @@ function Page() {
               <Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
             </Stack>
             <Flex pt={20} gap={"md"} justify={"space-between"}>
-              <Text fz={"xs"} c={"black"}>1 Februari 2025</Text>
-              <Text fz={"xs"} c={"black"}>09:00 WITA</Text>
+              <Group style={{ color: 'black' }}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">Kamis, 13 Januari 2025</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">09:00 WITA</Text>
+                </Group>
+              </Group>
               <Anchor>
-                <Text fz={"xs"}>Baca Selengkapnya</Text>
+                <Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
               </Anchor>
             </Flex>
           </Notification>
           <Paper p={"md"}>
             <Stack gap={"xs"}>
               <Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Kategori</Text>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Pengumuman</Text>
-                <Text fz={"md"} c={"black"}>5</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Kegiatan</Text>
-                <Text fz={"md"} c={"black"}>10</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Informasi</Text>
-                <Text fz={"md"} c={"black"}>12</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Layanan</Text>
-                <Text fz={"md"} c={"black"}>6</Text>
-              </Flex>
+              {dataKategori.map((v, k) => {
+                return (
+                  <UnstyledButton component={Link} href={v.link} key={k}>
+                    <Paper bg={colors["BG-trans"]} p={5}>
+                      <Group px={3} justify={"space-between"}>
+                        <Text fz={"md"} c={"black"}>{v.kategori}</Text>
+                        <Text fz={"md"} c={"black"}>{v.jumlah}</Text>
+                      </Group>
+                    </Paper>
+                  </UnstyledButton>
+                )
+              })}
             </Stack>
           </Paper>
           <Notification color='yellow' styles={{ title: { fontWeight: "bold" } }} withCloseButton={false} title="Informasi">
@@ -74,25 +130,36 @@ function Page() {
               <Text fz={"sm"} fw={"bold"} c={"black"}>LELANG PEMASANGAN CCTV DESA DARMASABA</Text>
               <Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
             </Stack>
-            <Flex pt={20} gap={"md"} justify={"space-between"}>
-              <Text fz={"xs"} c={"black"}>2 Februari 2025</Text>
-              <Text fz={"xs"} c={"black"}>10:00 WITA</Text>
+            <Flex pt={20} gap={"md"} justify={"space-between"}><Group style={{ color: 'black' }}>
+              <Group gap="xs">
+                <IconCalendar size={18} />
+                <Text size="sm">Kamis, 2 Februari 2025</Text>
+              </Group>
+              <Group gap="xs">
+                <IconClock size={18} />
+                <Text size="sm">10:00 WITA</Text>
+              </Group>
+            </Group>
               <Anchor>
-                <Text fz={"xs"}>Baca Selengkapnya</Text>
+                <Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
               </Anchor>
             </Flex>
           </Notification>
           <Paper p={"md"}>
             <Stack gap={"xs"}>
               <Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Pengumuman Penting</Text>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Jadwal Rapat</Text>
-                <Text fz={"md"} c={"black"}>5</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Pendaftaran UMKM</Text>
-                <Text fz={"md"} c={"black"}>10</Text>
-              </Flex>
+              {dataPenting.map((v, k) => {
+                return (
+                  <UnstyledButton component={Link} href={v.link} key={k}>
+                    <Paper bg={colors["BG-trans"]} p={5}>
+                      <Group px={3} justify={"space-between"}>
+                        <Text fz={"md"} c={"black"}>{v.judul}</Text>
+                        <Text fz={"md"} c={"black"}>{v.jumlah}</Text>
+                      </Group>
+                    </Paper>
+                  </UnstyledButton>
+                )
+              })}
             </Stack>
           </Paper>
         </SimpleGrid>
diff --git a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/artikel-kesehatan/page.tsx b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/artikel-kesehatan/page.tsx
new file mode 100644
index 00000000..69da2f21
--- /dev/null
+++ b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/artikel-kesehatan/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/fasilitas-kesehatan/page.tsx b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/fasilitas-kesehatan/page.tsx
new file mode 100644
index 00000000..a8916391
--- /dev/null
+++ b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/fasilitas-kesehatan/page.tsx
@@ -0,0 +1,194 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Divider, Group, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+
+const dataDokter = [
+  {
+    id: 1,
+    nama: 'dr. Adi Putra',
+    spesilisasi: 'Dokter Umum',
+    jadwal: 'Senin-Jumat, 08:00-12:00'
+  },
+  {
+    id: 2,
+    nama: 'drg. Ratna Dewi',
+    spesilisasi: 'Dokter Gigi',
+    jadwal: 'Senin, Rabu, Jumat 08:00-14:00'
+  },
+  {
+    id: 3,
+    nama: 'Bidan Komang',
+    spesilisasi: 'Kebidanan',
+    jadwal: 'Setiap hari, 08:00-16:00'
+  },
+]
+const dataBiaya = [
+  {
+    id: 1,
+    layanan: 'Poli Umum',
+    tarif: '15.000',
+  },
+  {
+    id: 2,
+    layanan: 'Poli Gigi',
+    tarif: '20.000',
+  },
+  {
+    id: 3,
+    layanan: 'Imunisasi Dasar',
+    tarif: 'Gratis',
+  },
+  {
+    id: 4,
+    layanan: 'Konsultasi KB',
+    tarif: 'Gratis',
+  },
+]
+
+function Page() {
+  const rows = dataDokter.map((element) => (
+    <TableTr key={element.nama}>
+      <TableTd fz={'h4'}>{element.nama}</TableTd>
+      <TableTd fz={'h4'}>{element.spesilisasi}</TableTd>
+      <TableTd fz={'h4'}>{element.jadwal}</TableTd>
+    </TableTr>
+  ));
+
+  const rows2 = dataBiaya.map((element2) => (
+    <TableTr key={element2.layanan}>
+      <TableTd fz={'h4'}>{element2.layanan}</TableTd>
+      <TableTd fz={'h4'}>{element2.tarif}</TableTd>
+    </TableTr>
+  ));
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10}>
+            <Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
+              <Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
+                Detail Lengkap Fasilitas Kesehatan
+              </Text>
+            </Box>
+            <Box p={'md'} >
+              <Stack gap={'xs'}>
+                {/* Informasi Umum */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Informasi Umum
+                </Text>
+                <Divider />
+                <Text fz={'h4'} fw={"bold"}>
+                  Nama Fasilitas : <Text span fz={'h4'}>UPTD Puskesmas Abiansemal III</Text>
+                </Text>
+                <Text fz={'h4'} fw={"bold"}>
+                  Alamat : <Text span fz={'h4'}>Jl. Ratna, Sibang Kaja</Text>
+                </Text>
+                <Text pb={10} fz={'h4'} fw={"bold"}>
+                  Jam Operasional: : <Text span fz={'h4'}>08:00-16:00 WITA (Senin-Sabtu)</Text>
+                </Text>
+                {/* Layanan Unggulan */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Layanan Unggulan
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Poli Umum</ListItem>
+                  <ListItem fz={'h4'}>Poli Gigi</ListItem>
+                  <ListItem fz={'h4'}>Imunisasi</ListItem>
+                  <ListItem fz={'h4'}>Ibu/KB</ListItem>
+                  <ListItem fz={'h4'}>Laboratorium Dasar</ListItem>
+                  <ListItem fz={'h4'}>Farmasi</ListItem>
+                  <ListItem fz={'h4'}>Konsultasi Gizi</ListItem>
+                </List>
+                {/* Tenaga Medis */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Dokter & Tenaga Medis
+                </Text>
+                <Divider />
+                <Table pb={10} highlightOnHover withTableBorder withColumnBorders>
+                  <TableThead>
+                    <TableTr>
+                      <TableTh fz={'h4'}>Nama</TableTh>
+                      <TableTh fz={'h4'}>Spesialisasi</TableTh>
+                      <TableTh fz={'h4'}>Jadwal</TableTh>
+                    </TableTr>
+                  </TableThead>
+                  <TableTbody>{rows}</TableTbody>
+                </Table>
+                {/* Fasilitas Pendukung */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Fasilitas Pendukung
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Apotek dengan ketersediaan obat lengkap</ListItem>
+                  <ListItem fz={'h4'}>Ruang tunggu ber-AC</ListItem>
+                  <ListItem fz={'h4'}>Area bermain anak</ListItem>
+                  <ListItem fz={'h4'}>Ambulans 24 jam</ListItem>
+                  <ListItem fz={'h4'}>Toilet khusus disabilitas</ListItem>
+                  <ListItem fz={'h4'}>Tempat parkir luas</ListItem>
+                </List>
+                {/* Dokter */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Dokter & Tenaga Medis
+                </Text>
+                <Divider />
+                <Table highlightOnHover withTableBorder withColumnBorders>
+                  <TableThead>
+                    <TableTr>
+                      <TableTh fz={'h4'}>Layanan</TableTh>
+                      <TableTh fz={'h4'}>Tarif</TableTh>
+                    </TableTr>
+                  </TableThead>
+                  <TableTbody>{rows2}</TableTbody>
+                </Table>
+                <Text fz={'h6'} pb={10} fw={"bold"}>
+                  * Gratis dengan BPJS Kesehatan
+                </Text>
+                {/* Prosedur Pendaftaran */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Prosedur Pendaftaran
+                </Text>
+                <Divider />
+                <List type='ordered' pb={10} >
+                  <ListItem fz={'h4'}>Pendaftaran dibuka pukul 07:30 WITA</ListItem>
+                  <ListItem fz={'h4'}>Bawa KTP dan Kartu BPJS (jika ada)</ListItem>
+                  <ListItem fz={'h4'}>Ambil nomor antrian di loket pendaftaran</ListItem>
+                  <ListItem fz={'h4'}>Pengunjung baru wajib mengisi formulir pendaftaran</ListItem>
+                  <ListItem fz={'h4'}>Pendaftaran online tersedia melalui aplikasi S-Sehat</ListItem>
+                </List>
+                <Paper p={'lg'} bg={colors['blue-button-trans']}>
+                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Kontak Darurat</Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Telepon : <Text span fz={'h4'}>(0361) 123456</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    WhatsApp : <Text span fz={'h4'}>081234567890</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Email : <Text span fz={'h4'}>puskesmasabiansemal3@gmail.com</Text>
+                  </Text>
+                </Paper>
+                <Paper p={'lg'} w={{ base: "100%", md: "100%" }}>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.272172359321!2d115.21836257533302!3d-8.569807186941553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23e9d99b9395f%3A0xb002795fdcb33b30!2sUPTD%20Puskesmas%20Abiansemal%20III!5e0!3m2!1sid!2sid!4v1744792682341!5m2!1sid!2sid" width="600" height="450" style={{ border: 2, width: "100%", borderRadius: 10 }} loading="lazy"></iframe>
+                </Paper>
+                <Group>
+                  <Button fz={'lg'} bg={colors['blue-button']}>
+                    Download Brosur Layanan (PDF)
+                  </Button>
+                </Group>
+              </Stack>
+            </Box>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/jadwal-kegiatan/page.tsx b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/jadwal-kegiatan/page.tsx
new file mode 100644
index 00000000..69da2f21
--- /dev/null
+++ b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/jadwal-kegiatan/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx
index 81b4c6d3..70d8962a 100644
--- a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx
+++ b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx
@@ -3,6 +3,7 @@ import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor,
 import React from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { BarChart } from '@mantine/charts';
+import Link from 'next/link';
 
 
 const dataKematian = [
@@ -144,7 +145,7 @@ function Page() {
                       <Text fz={'h4'}>
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
                         <Text c={'black'} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
@@ -165,7 +166,7 @@ function Page() {
                       <Text fz={'h4'}>
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
                         <Text c={'black'} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
@@ -186,7 +187,7 @@ function Page() {
                       <Text fz={'h4'}>
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
                         <Text c={'black'} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 12e3ae27..b070366d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 import "./globals.css";
 import '@mantine/charts/styles.css';
+import '@mantine/dates/styles.css';
 
 
 
diff --git a/src/app/percobaan/page.tsx b/src/app/percobaan/page.tsx
index 7f11633f..e74f0edd 100644
--- a/src/app/percobaan/page.tsx
+++ b/src/app/percobaan/page.tsx
@@ -1,5 +1,6 @@
 'use client'
-import { Box, Flex, Grid, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { Box, Container, Flex, Grid, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useSearchParams } from 'next/navigation';
 import React from 'react';
 
 const tx = `
@@ -50,8 +51,55 @@ function Page() {
 
       </Flex>
 
+      <Page2/>
     </Stack>
   );
 }
 
 export default Page;
+
+const Halaman = [Halaman1, Halaman2, Halaman3]
+
+function Page2() {
+  const page = useSearchParams().get("p");
+  if (!page) return <Container >
+    <Stack>
+      <Text>halo 1</Text>
+      {Array.from({ length: 4 }).map((v, k) => <Skeleton h={100} key={k} />)}
+    </Stack>
+  </Container>
+
+
+  return (
+    <Container w={"100%"}>
+      <Stack>
+        <Text>halo 2</Text>
+        {Halaman[Number(page)-1]()}
+      </Stack>
+    </Container>
+
+  );
+}
+
+
+
+function Halaman1() {
+  return <Stack bg={"blue"}>
+    ini halaman 1
+  </Stack>
+}
+
+
+function Halaman2() {
+  return <Stack bg={"red"}>
+    ini halaman 2
+  </Stack>
+}
+
+
+function Halaman3() {
+  return <Stack bg={"grape"}> 
+    ini halaman 3
+  </Stack>
+}
+