From f436aa2ef06ad07631827a22766d68ac1646a921 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 2 Jan 2026 16:33:15 +0800
Subject: [PATCH] Fix QC Kak Inno Mobile Done FIx QC Kak Ayu Mobile Admin Done
 Fix Tampilan Admin Mobile Device All Menu Done

---
 .../(dashboard)/_state/desa/pengumuman.ts     |   2 +-
 .../admin/(dashboard)/_state/desa/potensi.ts  |   2 +-
 .../desa/profil/profil-perbekel/page.tsx      |  32 +-
 .../info-teknologi-tepat-guna/page.tsx        |   4 +-
 .../kategori-desa-anti-korupsi/page.tsx       |  10 +-
 .../list-desa-anti-korupsi/page.tsx           |   7 +-
 .../responden/page.tsx                        |   2 +-
 .../landing-page/profil/media-sosial/page.tsx |  62 ++--
 .../landing-page/profil/pejabat-desa/page.tsx |  30 +-
 .../data-lingkungan-desa/[id]/edit/page.tsx   |   2 +-
 .../data-lingkungan-desa/[id]/page.tsx        |   8 +-
 .../data-lingkungan-desa/create/page.tsx      |   2 +-
 .../lingkungan/data-lingkungan-desa/page.tsx  | 226 ++++++++++---
 .../edukasi-lingkungan/_lib/layouTabs.tsx     | 105 +++---
 .../edit/page.tsx                             |   2 +-
 .../contoh-kegiatan-desa-darmasaba/page.tsx   |  10 +-
 .../lingkungan/edukasi-lingkungan/layout.tsx  |  21 ++
 .../edit/page.tsx                             |   2 +-
 .../materi-edukasi-yang-diberikan/page.tsx    |  10 +-
 .../tujuan-edukasi-lingkungan/edit/page.tsx   |   2 +-
 .../tujuan-edukasi-lingkungan/page.tsx        |  36 +--
 .../gotong-royong/_lib/layoutTabs.tsx         | 101 ++++--
 .../kategori-kegiatan/[id]/page.tsx           |   2 +-
 .../kategori-kegiatan/create/page.tsx         |   2 +-
 .../gotong-royong/kategori-kegiatan/page.tsx  | 158 +++++++--
 .../kegiatan-desa/[id]/edit/page.tsx          |   2 +-
 .../gotong-royong/kegiatan-desa/[id]/page.tsx |  12 +-
 .../kegiatan-desa/create/page.tsx             |   2 +-
 .../gotong-royong/kegiatan-desa/page.tsx      | 145 +++++++--
 .../lingkungan/gotong-royong/layout.tsx       |  22 ++
 .../konservasi-adat-bali/_lib/layoutTabs.tsx  | 105 +++---
 .../edit/page.tsx                             |   2 +-
 .../page.tsx                                  |  44 ++-
 .../filosofi-tri-hita-karana/edit/page.tsx    |   2 +-
 .../filosofi-tri-hita-karana/page.tsx         |  44 ++-
 .../konservasi-adat-bali/layout.tsx           |  21 ++
 .../nilai-konservasi-adat/edit/page.tsx       |   2 +-
 .../nilai-konservasi-adat/page.tsx            |  40 ++-
 .../[id]/edit/page.tsx                        |   2 +-
 .../[id]/page.tsx                             |   4 +-
 .../create/page.tsx                           |   2 +-
 .../keterangan-bank-sampah-terdekat/page.tsx  | 129 ++++++--
 .../[id]/page.tsx                             |   2 +-
 .../create/page.tsx                           |   2 +-
 .../page.tsx                                  | 176 ++++++++--
 .../program-penghijauan/[id]/edit/page.tsx    |   2 +-
 .../program-penghijauan/[id]/page.tsx         |   8 +-
 .../program-penghijauan/create/page.tsx       |   2 +-
 .../lingkungan/program-penghijauan/page.tsx   | 305 ++++++++++++++----
 .../beasiswa-desa/_lib/layoutTabs.tsx         | 101 ++++--
 .../beasiswa-pendaftar/[id]/page.tsx          |   2 +-
 .../beasiswa-desa/beasiswa-pendaftar/page.tsx | 181 ++++++++---
 .../keunggulan-program/[id]/page.tsx          |   2 +-
 .../keunggulan-program/create/page.tsx        |   2 +-
 .../beasiswa-desa/keunggulan-program/page.tsx | 114 +++++--
 .../pendidikan/beasiswa-desa/layout.tsx       |  21 ++
 .../_lib/layoutTabs.tsx                       | 101 ++++--
 .../fasilitas-yang-disediakan/edit/page.tsx   |   2 +-
 .../fasilitas-yang-disediakan/page.tsx        |  84 +++--
 .../bimbingan-belajar-desa/layout.tsx         |  22 ++
 .../lokasi-dan-jadwal/edit/page.tsx           |   2 +-
 .../lokasi-dan-jadwal/page.tsx                |  85 +++--
 .../tujuan-program/edit/page.tsx              |   2 +-
 .../tujuan-program/page.tsx                   |  85 +++--
 .../pendidikan/data-pendidikan/[id]/page.tsx  |   2 +-
 .../data-pendidikan/create/page.tsx           |   2 +-
 .../info-sekolah/_lib/layoutTabs.tsx          | 101 ++++--
 .../jenjang-pendidikan/[id]/page.tsx          |   2 +-
 .../jenjang-pendidikan/create/page.tsx        |   2 +-
 .../info-sekolah/jenjang-pendidikan/page.tsx  | 163 +++++++---
 .../pendidikan/info-sekolah/layout.tsx        |  22 ++
 .../info-sekolah/lembaga/[id]/edit/page.tsx   |   2 +-
 .../info-sekolah/lembaga/[id]/page.tsx        |   4 +-
 .../info-sekolah/lembaga/create/page.tsx      |   2 +-
 .../pendidikan/info-sekolah/lembaga/page.tsx  | 143 ++++++--
 .../info-sekolah/pengajar/[id]/edit/page.tsx  |   2 +-
 .../info-sekolah/pengajar/[id]/page.tsx       |   4 +-
 .../info-sekolah/pengajar/create/page.tsx     |   2 +-
 .../pendidikan/info-sekolah/pengajar/page.tsx | 129 ++++++--
 .../info-sekolah/siswa/[id]/edit/page.tsx     |   2 +-
 .../info-sekolah/siswa/[id]/page.tsx          |   4 +-
 .../info-sekolah/siswa/create/page.tsx        |   2 +-
 .../pendidikan/info-sekolah/siswa/page.tsx    | 166 +++++++---
 .../pendidikan-non-formal/_lib/layoutTabs.tsx |  99 ++++--
 .../edit/page.tsx                             |   2 +-
 .../page.tsx                                  |  57 ++--
 .../pendidikan-non-formal/layout.tsx          |  22 ++
 .../tempat-kegiatan/edit/page.tsx             |   2 +-
 .../tempat-kegiatan/page.tsx                  |  56 ++--
 .../tujuan-program/edit/page.tsx              |   2 +-
 .../tujuan-program/page.tsx                   |  57 ++--
 .../perpustakaan-digital/_lib/layoutTabs.tsx  | 101 ++++--
 .../data-perpustakaan/[id]/edit/page.tsx      |   2 +-
 .../data-perpustakaan/[id]/page.tsx           |   4 +-
 .../data-perpustakaan/create/page.tsx         |   2 +-
 .../data-perpustakaan/page.tsx                | 213 ++++++++++--
 .../kategori-buku/[id]/page.tsx               |   2 +-
 .../kategori-buku/create/page.tsx             |   2 +-
 .../kategori-buku/page.tsx                    | 152 ++++++---
 .../perpustakaan-digital/layout.tsx           |  21 ++
 .../perpustakaan-digital/peminjam/page.tsx    | 144 +++++++--
 .../_lib/layoutTabs.tsx                       | 101 ++++--
 .../program-pendidikan-anak/layout.tsx        |  21 ++
 .../program-unggulan/edit/page.tsx            |   2 +-
 .../program-unggulan/page.tsx                 |  57 ++--
 .../tujuan-program/edit/page.tsx              |   2 +-
 .../tujuan-program/page.tsx                   |  61 +++-
 .../responden/page.tsx                        |   5 -
 .../ppid/permohonan-informasi-publik/page.tsx |   4 +-
 .../page.tsx                                  |   4 +-
 .../admin/(dashboard)/user&role/layout.tsx    |  95 ++++--
 .../(dashboard)/user&role/role/[id]/page.tsx  |   2 +-
 .../user&role/role/create/page.tsx            |   2 +-
 .../admin/(dashboard)/user&role/role/page.tsx | 168 +++++++---
 .../admin/(dashboard)/user&role/user/page.tsx | 204 +++++++++---
 .../_lib/landing_page/apbdes/findMany.ts      |  23 +-
 .../info-sekolah-paud/pengajar/findMany.ts    |   3 -
 117 files changed, 3812 insertions(+), 1361 deletions(-)

diff --git a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts b/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
index dd289918..702b006d 100644
--- a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
+++ b/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
@@ -68,7 +68,7 @@ const category = proxy({
         const res = await ApiFetch.api.desa.kategoripengumuman[
           "findMany"
         ].get({
-          query: { page, limit },
+          query: { page, limit, search },
         });
   
         if (res.status === 200 && res.data?.success) {
diff --git a/src/app/admin/(dashboard)/_state/desa/potensi.ts b/src/app/admin/(dashboard)/_state/desa/potensi.ts
index 0c158b38..3eb55c54 100644
--- a/src/app/admin/(dashboard)/_state/desa/potensi.ts
+++ b/src/app/admin/(dashboard)/_state/desa/potensi.ts
@@ -65,7 +65,7 @@ const potensiDesa = proxy({
         const res = await ApiFetch.api.desa.potensi[
           "find-many"
         ].get({
-          query: { page, limit },
+          query: { page, limit, search },
         });
   
         if (res.status === 200 && res.data?.success) {
diff --git a/src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx b/src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx
index d06dcb40..d3b1cb21 100644
--- a/src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Group, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -31,22 +31,18 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header + tombol edit */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2} c={colors['blue-button']} lh={1.2} />
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() => router.push(`/admin/desa/profil/profil-perbekel/${perbekel.id}`)}
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify="space-between">
+          <Title order={2} c={colors['blue-button']} lh={1.2}>Profil Perbekel</Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() => router.push(`/admin/desa/profil/profil-perbekel/${perbekel.id}`)}
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Card Profil */}
         <Paper p="xl" bg={colors['white-1']} withBorder radius="md" shadow="xs">
@@ -60,7 +56,7 @@ function Page() {
               <GridCol span={12}>
                 <Text
                   ta="center"
-                  fz={{ base: 'sm', md: 'md' }}
+                  fz={{ base: 'sm', md: 'xl' }}
                   fw="bold"
                   c={colors['blue-button']}
                   lh={{ base: 1.45, md: 1.45 }}
diff --git a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
index dcac66fc..ef36c286 100644
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
@@ -183,7 +183,8 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
                     <Text fz={"sm"} fw={600} lh={1.4}>
                       Deskripsi Singkat
                     </Text>
-                    <Text
+                   <Box pl={5}>
+                     <Text
                       fz="sm"
                       fw={500}
                       lh={1.4}
@@ -191,6 +192,7 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
                         __html: item.deskripsi || '-',
                       }}
                     />
+                   </Box>
                   </Box>
                   <Group justify="flex-end">
                     <Button
diff --git a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
index f572baec..9d065f85 100644
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -50,6 +50,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   const router = useRouter();
 
   const { data, page, totalPages, loading, load } = stateKategori.findMany;
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const handleHapus = () => {
     if (selectedId) {
@@ -60,8 +61,8 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   };
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
@@ -211,7 +212,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
         <Box hiddenFrom="md">{renderMobileCards()}</Box>
       </Paper>
 
-      {totalPages > 1 && (
+      
         <Center mt="xl">
           <Pagination
             value={page}
@@ -224,7 +225,6 @@ function ListKategoriKegiatan({ search }: { search: string }) {
             radius="md"
           />
         </Center>
-      )}
 
       <ModalKonfirmasiHapus
         opened={modalHapus}
diff --git a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
index b2c201c6..a2bd6831 100644
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -29,10 +29,11 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
   const router = useRouter();
   const listState = useProxy(korupsiState.desaAntikorupsi);
   const { data, page, totalPages, loading, load } = listState.findMany;
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
diff --git a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx b/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx
index 4372230a..a183535e 100644
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx
@@ -50,7 +50,7 @@ function ListResponden({ search }: ListRespondenProps) {
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 10);
+    load(page, 10,);
   }, [page]);
 
   const filteredData = (data || []).filter((item) => {
diff --git a/src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx b/src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx
index d37d77a0..62a05e15 100644
--- a/src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx
@@ -196,6 +196,7 @@ function ListMediaSosial({ search }: { search: string }) {
             {filteredData.length > 0 ? (
               filteredData.map((item) => (
                 <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
                     <Box>
                       <Text fz="sm" fw={600} lh={1.4}>Nama Media Sosial / Kontak</Text>
                       <Text fw={500} fz="sm" lh={1.45}>
@@ -221,37 +222,38 @@ function ListMediaSosial({ search }: { search: string }) {
                         return <Box bg={colors['blue-button']} w="100%" h="100%" />;
                       })()}
                     </Box>
-                  <Box>
-                    <Text fz="sm" fw={600} lh={1.4}>Link / No. Telepon</Text>
-                    <a
-                      href={item.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ textDecoration: 'underline' }}
-                    >
-                      <Text
-                        fz="sm"
-                        c="blue"
-                        truncate
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Link / No. Telepon</Text>
+                      <a
+                        href={item.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ textDecoration: 'underline' }}
                       >
-                        {item.iconUrl || item.noTelp || '-'}
-                      </Text>
-                    </a>
-                  </Box>
-                  <Group mt="sm" justify="flex-end">
-                    <Button
-                      size="xs"
-                      radius="md"
-                      variant="light"
-                      color="blue"
-                      leftSection={<IconDeviceImacCog size={16} />}
-                      onClick={() =>
-                        router.push(`/admin/landing-page/profil/media-sosial/${item.id}`)
-                      }
-                    >
-                      Detail
-                    </Button>
-                  </Group>
+                        <Text
+                          fz="sm"
+                          c="blue"
+                          truncate
+                        >
+                          {item.iconUrl || item.noTelp || '-'}
+                        </Text>
+                      </a>
+                    </Box>
+                    <Group mt="sm" justify="flex-end">
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(`/admin/landing-page/profil/media-sosial/${item.id}`)
+                        }
+                      >
+                        Detail
+                      </Button>
+                    </Group>
+                  </Stack>
                 </Paper>
               ))
             ) : (
diff --git a/src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/page.tsx b/src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/page.tsx
index 9c54faab..6655dd19 100644
--- a/src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Group, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -29,22 +29,18 @@ function Page() {
   return (
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>Preview Pejabat Desa</Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              style={{fontSize: 15, fontWeight: "bold"}}
-              c="green"
-              variant="light"
-              radius="md"
-              onClick={() => router.push(`/admin/landing-page/profil/pejabat-desa/${allList.findUnique.data?.id}`)}
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify="space-between">
+          <Title order={3} c={colors['blue-button']}>Preview Pejabat Desa</Title>
+          <Button
+            style={{ fontSize: 15, fontWeight: "bold" }}
+            c="green"
+            variant="light"
+            radius="md"
+            onClick={() => router.push(`/admin/landing-page/profil/pejabat-desa/${allList.findUnique.data?.id}`)}
+          >
+            Edit
+          </Button>
+        </Group>
         {dataArray.map((item) => (
           <Paper key={item.id} p="xl" bg={'white'} withBorder radius="md" shadow="xs">
             <Box px={{ base: "sm", md: 100 }}>
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx
index 78b5771d..c04f6acb 100644
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx
@@ -132,7 +132,7 @@ export default function EditDataLingkunganDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx
index cab104f6..9538c0d3 100644
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx
@@ -79,7 +79,7 @@ function DetailDataLingkunganDesa() {
   const data = stateDataLingkungan.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Back Button */}
       <Button
         variant="subtle"
@@ -93,7 +93,7 @@ function DetailDataLingkunganDesa() {
       {/* Main Card */}
       <Paper
         withBorder
-        w={{ base: '100%', md: '60%' }}
+        w={{ base: '100%', md: '70%' }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -131,7 +131,9 @@ function DetailDataLingkunganDesa() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+                <Box pl={5}>
+                  <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+                </Box>
               </Box>
 
               {/* Action Buttons */}
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
index ad1f00dc..41e20ec8 100644
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
@@ -49,7 +49,7 @@ function CreateDataLingkunganDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
index e87e10ca..ac7f4510 100644
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
@@ -1,30 +1,65 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import {
-  Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack,
-  Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text,
-  Title
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
 } from '@mantine/core';
 import {
-  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled,
-  IconDeviceImacCog, IconDroplet, IconHome, IconHomeEco, IconLeaf,
+  IconAlertTriangle,
+  IconAmbulance,
+  IconBuilding,
+  IconCash,
+  IconChartLine,
+  IconChristmasTreeFilled,
+  IconClipboardTextFilled,
+  IconDeviceImacCog,
+  IconDroplet,
+  IconFiretruck,
+  IconHome,
+  IconHomeEco,
+  IconHospital,
+  IconLeaf,
   IconPlus,
-  IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
-  IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled
+  IconRecycle,
+  IconScale,
+  IconSchool,
+  IconSearch,
+  IconShieldFilled,
+  IconShoppingCart,
+  IconTent,
+  IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
+  IconTrophy,
+  IconTruckFilled,
 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import dataLingkunganDesaState from '../../_state/lingkungan/data-lingkungan-desa';
-
+import { useDebouncedValue } from '@mantine/hooks';
 
 function DataLingkunganDesa() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
-    <Box>
+    <Box py={{ base: 'md', md: 'lg' }} px={{ base: 'sm', md: 0 }}>
       <HeaderSearch
         title='Data Lingkungan Desa'
         placeholder='Cari data lingkungan...'
@@ -38,15 +73,16 @@ function DataLingkunganDesa() {
 }
 
 function ListDataLingkunganDesa({ search }: { search: string }) {
-  const listState = useProxy(dataLingkunganDesaState)
-  const { data, loading, page, totalPages, load } = listState.findMany
+  const listState = useProxy(dataLingkunganDesaState);
+  const { data, loading, page, totalPages, load } = listState.findMany;
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   useEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,
@@ -64,12 +100,22 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
     mencegahBencana: IconShieldFilled,
     rumah: IconHome,
     pohon: IconTree,
-    air: IconDroplet
+    air: IconDroplet,
+    bantuan: IconCash,
+    pelatihan: IconSchool,
+    subsidi: IconShoppingCart,
+    layananKesehatan: IconHospital,
+    polisi: IconShieldFilled,
+    ambulans: IconAmbulance,
+    pemadam: IconFiretruck,
+    rumahSakit: IconHospital,
+    bangunan: IconBuilding,
+    darurat: IconAlertTriangle
   };
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
@@ -77,46 +123,66 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
 
   if (data.length === 0) {
     return (
-      <Box py={10}>
-        <Paper withBorder shadow="md" radius="md" p="lg" bg={colors['white-1']}>
+      <Box py="md">
+        <Paper withBorder shadow="md" radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
           <Stack>
             <Group justify="space-between" mb="md">
-              <Title order={4}>Daftar Data Lingkungan Desa</Title>
-              <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
+              <Title order={4} lh={1.2}>
+                Daftar Data Lingkungan Desa
+              </Title>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}
+              >
                 Tambah Baru
               </Button>
             </Group>
-            <Table highlightOnHover>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama Data Lingkungan Desa</TableTh>
-                  <TableTh>Jumlah</TableTh>
-                  <TableTh>Ikon</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-            <Center py={20}>
-              <Text c="dimmed">Tidak ada data lingkungan desa yang tersedia</Text>
+            <Box visibleFrom="md">
+              <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
+                <TableThead>
+                  <TableTr>
+                    <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                    <TableTh style={{ width: '25%' }}>Nama Data Lingkungan Desa</TableTh>
+                    <TableTh style={{ width: '35%' }}>Jumlah</TableTh>
+                    <TableTh style={{ width: '15%' }}>Ikon</TableTh>
+                    <TableTh style={{ width: '20%', textAlign: 'center' }}>Detail</TableTh>
+                  </TableTr>
+                </TableThead>
+              </Table>
+            </Box>
+            <Center py="xl">
+              <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.4}>
+                Tidak ada data lingkungan desa yang tersedia
+              </Text>
             </Center>
           </Stack>
         </Paper>
-      </Box >
+      </Box>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder shadow="md" radius="md" bg={colors['white-1']} p="lg">
+    <Box py="md">
+      <Paper withBorder shadow="md" radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Data Lingkungan Desa</Title>
-          <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
+          <Title order={4} lh={1.2}>
+            Daftar Data Lingkungan Desa
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}
+          >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
@@ -129,21 +195,21 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
             <TableTbody>
               {filteredData.map((item, index) => (
                 <TableTr key={item.id}>
-                  <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd ta="center">{index + 1}</TableTd>
                   <TableTd>
-                    <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
+                    <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
+                      {item.name}
+                    </Text>
                   </TableTd>
                   <TableTd>
-                    <Text fz="sm" c="dimmed">± {item.jumlah}</Text>
+                    <Text fz="sm" c="dimmed" lh={1.5}>
+                      ± {item.jumlah}
+                    </Text>
                   </TableTd>
                   <TableTd>
-                    {iconMap[item.icon] && (
-                      <Box title={item.icon}>
-                        {React.createElement(iconMap[item.icon], { size: 22 })}
-                      </Box>
-                    )}
+                    {iconMap[item.icon] && <Box title={item.icon}>{React.createElement(iconMap[item.icon], { size: 22 })}</Box>}
                   </TableTd>
-                  <TableTd style={{ textAlign: 'center' }}>
+                  <TableTd ta="center">
                     <Button
                       size="xs"
                       radius="md"
@@ -160,7 +226,62 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.map((item, index) => (
+              <Paper key={item.id} withBorder radius="md" p="sm" bg={colors['white-1']}>
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      No
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {index + 1}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Data
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                      {item.name}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Jumlah
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      ± {item.jumlah}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Ikon
+                    </Text>
+                    {iconMap[item.icon] && <Box title={item.icon}>{React.createElement(iconMap[item.icon], { size: 22 })}</Box>}
+                  </Box>
+                  <Center>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}
+                    >
+                      Detail
+                    </Button>
+                  </Center>
+                </Stack>
+              </Paper>
+            ))}
+          </Stack>
+        </Box>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
@@ -178,4 +299,5 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
     </Box>
   );
 }
-export default DataLingkunganDesa;
+
+export default DataLingkunganDesa;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx
index db1dcba1..4e44c404 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx
@@ -59,43 +59,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                 radius="lg"
                 keepMounted={false}
             >
-                <ScrollArea type="auto" offsetScrollbars>
-                    <TabsList
-                        p="sm"
-                        style={{
-                            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                            borderRadius: "1rem",
-                            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                            display: "flex",
-                            flexWrap: "nowrap",
-                            gap: "0.5rem",
-                            paddingInline: "0.5rem",
-                        }}
-                    >
-                        {tabs.map((tab, i) => (
-                            <TabsTab
-                                key={i}
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    whiteSpace: "nowrap",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                <span style={{
-                                    display: "inline-block",
-                                    maxWidth: "200px",
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis"
-                                }}>
+                <Box visibleFrom='md' pb={10}>
+                    <ScrollArea type="auto" offsetScrollbars>
+                        <TabsList
+                            p="sm"
+                            style={{
+                                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                                borderRadius: "1rem",
+                                boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                                display: "flex",
+                                flexWrap: "nowrap",
+                                gap: "0.5rem",
+                                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                            }}
+                        >
+                            {tabs.map((tab, i) => (
+                                <TabsTab
+                                    key={i}
+                                    value={tab.value}
+                                    leftSection={tab.icon}
+                                    style={{
+                                        fontWeight: 600,
+                                        fontSize: "0.9rem",
+                                        transition: "all 0.2s ease",
+                                        flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                                    }}
+                                >
                                     {tab.label}
-                                </span>
-                            </TabsTab>
-                        ))}
-                    </TabsList>
-                </ScrollArea>
+                                </TabsTab>
+                            ))}
+                        </TabsList>
+                    </ScrollArea>
+                </Box>
+
+                <Box hiddenFrom='md' pb={10}>
+                    <ScrollArea
+                        type="auto"
+                        offsetScrollbars={false}
+                        w="100%"
+                    >
+
+                        <TabsList
+                            p="xs" // lebih kecil
+                            style={{
+                                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                                borderRadius: "1rem",
+                                display: "flex",
+                                flexWrap: "nowrap",
+                                gap: "0.5rem",
+                                width: "max-content", // ⬅️ kunci
+                                maxWidth: "100%",     // ⬅️ penting
+                            }}
+                        >
+                            {tabs.map((tab, i) => (
+                                <TabsTab
+                                    key={i}
+                                    value={tab.value}
+                                    leftSection={tab.icon}
+                                    style={{
+                                        fontWeight: 600,
+                                        fontSize: "0.9rem",
+                                        paddingInline: "0.75rem", // ⬅️ lebih ramping
+                                        flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                                    }}
+                                >
+                                    {tab.label}
+                                </TabsTab>
+                            ))}
+                        </TabsList>
+                    </ScrollArea>
+                </Box>
 
                 {tabs.map((tab, i) => (
                     <TabsPanel key={i} value={tab.value}>
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
index ef782f70..1dbf993d 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
@@ -96,7 +96,7 @@ export default function EditContohKegiatanDesaDarmasaba() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx
index a7b7a396..d186eb20 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,13 +25,10 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
+        <Group justify="space-between" align="center" mb={{ base: 'md', md: 'lg' }}>
             <Title order={3} fw={600}>
               Preview Contoh Kegiatan Di Desa Darmasaba
             </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
             <Button
               size="sm"
               variant="light"
@@ -46,8 +43,7 @@ function Page() {
             >
               Edit
             </Button>
-          </GridCol>
-        </Grid>
+        </Group>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx
index 9554a428..6ec4734e 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx
@@ -1,7 +1,28 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layouTabs";
+import { Box } from "@mantine/core";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
index 0eb0c956..5614e6bf 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
@@ -81,7 +81,7 @@ export default function EditMateriEdukasiYangDiberikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx
index 942d3d78..e8c43b1d 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,11 +25,8 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
+        <Group align="center" justify='space-between' mb={{ base: 'md', md: 'lg' }}> 
             <Title order={3} fw={600}>Preview Materi Edukasi Yang Diberikan</Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
             <Button
               size="sm"
               variant="light"
@@ -42,8 +39,7 @@ function Page() {
             >
               Edit
             </Button>
-          </GridCol>
-        </Grid>
+        </Group>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
index 527358ea..a1e5952a 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
@@ -84,7 +84,7 @@ export default function EditTujuanEdukasiLingkungan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx
index 48b88aa8..2dd05f54 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,25 +25,21 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} fw={600}>Preview Tujuan Edukasi Lingkungan</Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
-            <Button
-              size="sm"
-              variant="light"
-              color="green"
-              radius="md"
-              leftSection={<IconEdit size={16} />}
-              onClick={() =>
-                router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit')
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group align="center" justify='space-between' mb={{ base: 'md', md: 'lg' }}>
+          <Title order={3} fw={600}>Preview Tujuan Edukasi Lingkungan</Title>
+          <Button
+            size="sm"
+            variant="light"
+            color="green"
+            radius="md"
+            leftSection={<IconEdit size={16} />}
+            onClick={() =>
+              router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit')
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx
index 0eb63690..7365d723 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconClipboardList, IconTags } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -59,35 +59,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         keepMounted={false}
       >
         {/* ✅ Scroll horizontal */}
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem",
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+         <Box visibleFrom='md' pb={10}>
+                  <ScrollArea type="auto" offsetScrollbars>
+                    <TabsList
+                      p="sm"
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {/* ✅ Panel dengan gaya kartu */}
         {tabs.map((tab, i) => (
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx
index 5dcce580..aa1b6a11 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx
@@ -83,7 +83,7 @@ function EditKategoriKegiatan() {
   if (loading) return <Text>Loading...</Text>;
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md" align="center">
         <Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx
index b6b937b6..9b068f04 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx
@@ -39,7 +39,7 @@ function CreateKategoriKegiatan() {
   }
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md" align="center">
         <Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx
index 2086850e..414c3273 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -28,7 +28,7 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import gotongRoyongState from '../../../_state/lingkungan/gotong-royong';
 
 function KategoriKegiatan() {
-  const [search, setSearch] = useState("")
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
@@ -44,10 +44,11 @@ function KategoriKegiatan() {
 }
 
 function ListKategoriKegiatan({ search }: { search: string }) {
-  const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter()
+  const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,52 +56,76 @@ function ListKategoriKegiatan({ search }: { search: string }) {
     totalPages,
     loading,
     load,
-  } = stateKategori.findMany
+  } = stateKategori.findMany;
 
   const handleHapus = () => {
     if (selectedId) {
-      stateKategori.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
+      stateKategori.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
     }
-  }
+  };
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'md', md: 'lg' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+    <Box py={{ base: 'md', md: 'lg' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kategori Kegiatan</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Kategori Kegiatan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')}
+            onClick={() =>
+              router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
-                <TableTh style={{ width: '20%' }}>Edit</TableTh>
-                <TableTh style={{ width: '20%' }}>Delete</TableTh>
+                <TableTh style={{ width: '60%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} ta="left">
+                    Nama Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} ta="center">
+                    Edit
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} ta="center">
+                    Delete
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -108,21 +133,27 @@ function ListKategoriKegiatan({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
-                    <TableTd>
+                    <TableTd ta="center">
                       <Button
                         size="xs"
                         radius="md"
                         variant="light"
                         color="green"
                         leftSection={<IconEdit size={16} />}
-                        onClick={() => router.push(`/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`
+                          )
+                        }
                       >
                         Edit
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd ta="center">
                       <Button
                         size="xs"
                         radius="md"
@@ -130,8 +161,8 @@ function ListKategoriKegiatan({ search }: { search: string }) {
                         color="red"
                         leftSection={<IconTrash size={16} />}
                         onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
+                          setSelectedId(item.id);
+                          setModalHapus(true);
                         }}
                       >
                         Hapus
@@ -142,8 +173,10 @@ function ListKategoriKegiatan({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada kategori kegiatan yang cocok</Text>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada kategori kegiatan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -151,6 +184,63 @@ function ListKategoriKegiatan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="md" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Kategori
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="green"
+                        leftSection={<IconEdit size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`
+                          )
+                        }
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="red"
+                        leftSection={<IconTrash size={16} />}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        Hapus
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada kategori kegiatan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>
@@ -179,4 +269,4 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   );
 }
 
-export default KategoriKegiatan;
+export default KategoriKegiatan;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx
index 2aad0154..870d7f3b 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx
@@ -162,7 +162,7 @@ export default function EditKegiatanDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx
index a73c1f32..63dcbafe 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx
@@ -41,7 +41,7 @@ function DetailKegiatanDesa() {
   const data = kegiatanDesaState.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -55,7 +55,7 @@ function DetailKegiatanDesa() {
       {/* Container Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -85,13 +85,17 @@ function DetailKegiatanDesa() {
               {/* Deskripsi Singkat */}
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat || '-' }} />
+                <Box pl={5}>
+                  <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat || '-' }} />
+                </Box>
               </Box>
 
               {/* Deskripsi Lengkap */}
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }} />
+                <Box pl={5}>
+                  <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }} />
+                </Box>
               </Box>
 
               {/* Kategori */}
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx
index a9605a38..10ae2d89 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx
@@ -86,7 +86,7 @@ function CreateKegiatanDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx
index ab7b83f0..6039332b 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -45,6 +45,7 @@ function KegiatanDesa() {
 function ListKegiatanDesa({ search }: { search: string }) {
   const listState = useProxy(gotongRoyongState.kegiatanDesa);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,24 +56,26 @@ function ListKegiatanDesa({ search }: { search: string }) {
   } = listState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kegiatan Desa</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Kegiatan Desa
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -84,14 +87,39 @@ function ListKegiatanDesa({ search }: { search: string }) {
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+
+        {/* Desktop: Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '30%' }}>Judul</TableTh>
-                <TableTh style={{ width: '25%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '25%' }}>Lokasi</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '30%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Judul
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Lokasi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -99,17 +127,36 @@ function ListKegiatanDesa({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Text
+                        fz="md"
+                        fw={500}
+                        lh={1.5}
+                        truncate="end"
+                        lineClamp={1}
+                        c="dark"
+                      >
                         {item.judul}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">
+                      <Text
+                        fz="sm"
+                        fw={500}
+                        lh={1.5}
+                        c="dark"
+                      >
                         {item.kategoriKegiatan?.nama || '-'}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm">{item.lokasi}</Text>
+                      <Text
+                        fz="sm"
+                        fw={500}
+                        lh={1.5}
+                        c="dark"
+                      >
+                        {item.lokasi}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
@@ -133,7 +180,7 @@ function ListKegiatanDesa({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">
+                      <Text fz="sm" c="dimmed" lh={1.4}>
                         Tidak ada kegiatan desa yang cocok dengan pencarian
                       </Text>
                     </Center>
@@ -143,6 +190,64 @@ function ListKegiatanDesa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile: Card List */}
+        <Stack hiddenFrom="md" gap="xs">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder radius="md" p="sm">
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4} c="dark">
+                      Judul
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dark" truncate="end">
+                      {item.judul}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4} c="dark">
+                      Kategori
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dark">
+                      {item.kategoriKegiatan?.nama || '-'}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4} c="dark">
+                      Lokasi
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dark">
+                      {item.lokasi}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() =>
+                        router.push(
+                          `/admin/lingkungan/gotong-royong/kegiatan-desa/${item.id}`
+                        )
+                      }
+                    >
+                      Detail
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={20}>
+              <Text fz="sm" c="dimmed" lh={1.4}>
+                Tidak ada kegiatan desa yang cocok dengan pencarian
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
       <Center>
         <Pagination
@@ -162,4 +267,4 @@ function ListKegiatanDesa({ search }: { search: string }) {
   );
 }
 
-export default KegiatanDesa;
+export default KegiatanDesa;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/layout.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/layout.tsx
index 285fc16e..88575fbf 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/layout.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/layout.tsx
@@ -1,6 +1,28 @@
+'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs";
+import { Box } from "@mantine/core";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx
index badcf110..ea86ad13 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx
@@ -59,43 +59,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem",
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  whiteSpace: "nowrap",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                <span style={{
-                  display: "inline-block",
-                  maxWidth: "200px",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis"
-                }}>
+        <Box visibleFrom='md' pb={10}>
+          <ScrollArea type="auto" offsetScrollbars>
+            <TabsList
+              p="sm"
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
                   {tab.label}
-                </span>
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
+
+        <Box hiddenFrom='md' pb={10}>
+          <ScrollArea
+            type="auto"
+            offsetScrollbars={false}
+            w="100%"
+          >
+
+            <TabsList
+              p="xs" // lebih kecil
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                width: "max-content", // ⬅️ kunci
+                maxWidth: "100%",     // ⬅️ penting
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    paddingInline: "0.75rem", // ⬅️ lebih ramping
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel key={i} value={tab.value}>
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
index e6694a8c..9a1821c5 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
@@ -77,7 +77,7 @@ function EditBentukKonservasiBerdasarkanAdat() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx
index e8cd6000..c3a1be47 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -28,29 +28,25 @@ function Page() {
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
         {/* Header */}
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} fw={600} c="dark">
-              Preview Bentuk Konservasi Berdasarkan Adat
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
-            <Button
-              size="sm"
-              variant="light"
-              color="green"
-              radius="md"
-              leftSection={<IconEdit size={16} />}
-              onClick={() =>
-                router.push(
-                  '/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center" mb={{ base: 'md', md: 'lg' }}>
+          <Title order={3} fw={600} c="dark">
+            Preview Bentuk Konservasi Berdasarkan Adat
+          </Title>
+          <Button
+            size="sm"
+            variant="light"
+            color="green"
+            radius="md"
+            leftSection={<IconEdit size={16} />}
+            onClick={() =>
+              router.push(
+                '/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten */}
         <Stack gap="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx
index 14a4e88c..df288ba9 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx
@@ -82,7 +82,7 @@ function EditFilosofiTriHitaKarana() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/page.tsx
index cbacceb3..aeb37ed8 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,29 +25,25 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} fw={600}>
-              Preview Filosofi Tri Hita Karana
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
-            <Button
-              size="sm"
-              variant="light"
-              color="green"
-              radius="md"
-              leftSection={<IconEdit size={16} />}
-              onClick={() =>
-                router.push(
-                  '/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify="space-between" align="center" mb={{ base: 'md', md: 'lg' }}>
+          <Title order={3} fw={600}>
+            Preview Filosofi Tri Hita Karana
+          </Title>
+          <Button
+            size="sm"
+            variant="light"
+            color="green"
+            radius="md"
+            leftSection={<IconEdit size={16} />}
+            onClick={() =>
+              router.push(
+                '/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/layout.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/layout.tsx
index 1fa8572a..1cd7f2db 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/layout.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/layout.tsx
@@ -1,8 +1,29 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs"
+import { Box } from "@mantine/core";
 
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
index ed32c9fa..25545db1 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
@@ -76,7 +76,7 @@ function EditNilaiKonservasiAdat() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx
index 32893221..8726401d 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,27 +25,23 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} fw={600}>
-              Preview Nilai Konservasi Adat
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
-            <Button
-              size="sm"
-              variant="light"
-              color="green"
-              radius="md"
-              leftSection={<IconEdit size={16} />}
-              onClick={() =>
-                router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group align="center" justify='space-between' mb={{ base: 'md', md: 'lg' }}>
+          <Title order={3} fw={600}>
+            Preview Nilai Konservasi Adat
+          </Title>
+          <Button
+            size="sm"
+            variant="light"
+            color="green"
+            radius="md"
+            leftSection={<IconEdit size={16} />}
+            onClick={() =>
+              router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx
index ef0cb555..1db48752 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx
@@ -120,7 +120,7 @@ function EditKeteranganBankSampahTerdekat() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/page.tsx
index 195861d8..1e07360e 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/page.tsx
@@ -43,7 +43,7 @@ function DetailKeteranganBankSampahTerdekat() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Box mb="md">
         <Button
           variant="light"
@@ -57,7 +57,7 @@ function DetailKeteranganBankSampahTerdekat() {
       </Box>
 
       <Paper
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         p="xl"
         radius="lg"
         withBorder
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx
index 8b702830..973665ac 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx
@@ -56,7 +56,7 @@ function CreateKeteranganBankSampahTerdekat() {
   }
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx
index 4be0d401..e4f363b0 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -28,6 +28,7 @@ function KeteranganBankSampahTerdekat() {
 function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
   const keteranganState = useProxy(pengelolaanSampahState.keteranganSampah);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -38,42 +39,52 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
   } = keteranganState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Bank Sampah Terdekat</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Bank Sampah Terdekat
+          </Title>
           <Button 
             leftSection={<IconPlus size={18} />} 
             color="blue" 
             variant="light" 
             onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create')}
-            >
-              Tambah Baru
-            </Button>
+          >
+            Tambah Baru
+          </Button>
         </Group>
         
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Bank Sampah</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Nama Tempat di Maps</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '30%' }}>Nama Bank Sampah</TableTh>
+                <TableTh style={{ width: '35%' }}>Alamat</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Tempat di Maps</TableTh>
+                <TableTh style={{ width: '10%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -81,17 +92,17 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500}>{item.name}</Text>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
-                        <Text lineClamp={2} truncate="end" fz="sm">
-                          {item.alamat || '-'}
-                        </Text>
-                      </Box>
+                      <Text fz="sm" lh={1.5} lineClamp={2}>
+                        {item.alamat || '-'}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm">
+                      <Text fz="sm" lh={1.5}>
                         {item.namaTempatMaps || '-'}
                       </Text>
                     </TableTd>
@@ -100,16 +111,19 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
                         variant="light"
                         color="blue"
                         onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
+                        p="xs"
                       >
-                          <IconDeviceImac size={20} />
-                        </Button>
+                        <IconDeviceImac size={20} />
+                      </Button>
                     </TableTd>
                   </TableTr>
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4} align="center" py="xl">
-                    <Text c="dimmed">Tidak ada data bank sampah terdekat</Text>
+                  <TableTd colSpan={4} ta="center" py="xl">
+                    <Text c="dimmed" fz="sm" lh={1.4}>
+                      Tidak ada data bank sampah terdekat
+                    </Text>
                   </TableTd>
                 </TableTr>
               )}
@@ -117,8 +131,60 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
           </Table>
         </Box>
 
-        {totalPages > 1 && (
-          <Center mt="xl">
+        {/* Mobile Card */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} p="sm" radius="sm" withBorder>
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Bank Sampah
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.name}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Alamat
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.alamat || '-'}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Tempat di Maps
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.namaTempatMaps || '-'}
+                      </Text>
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
+                        p="xs"
+                      >
+                        <IconDeviceImac size={20} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data bank sampah terdekat
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+          <Center mt={{ base: 'lg', md: 'xl' }}>
             <Pagination
               value={page}
               onChange={(newPage) => load(newPage)}
@@ -128,10 +194,9 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
               withEdges
             />
           </Center>
-        )}
       </Paper>
     </Box>
   );
 }
 
-export default KeteranganBankSampahTerdekat;
+export default KeteranganBankSampahTerdekat;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx
index c1c20352..5cd5ac57 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx
@@ -90,7 +90,7 @@ function EditProgramKreatifDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx
index a3b7dc61..acd88fac 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx
@@ -34,7 +34,7 @@ function CreatePengelolaanSampahBankSampah() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
           <Button 
             variant="subtle" 
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx
index 1b64d087..1b2d09d7 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx
@@ -1,8 +1,8 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconChartLine, IconClipboardTextFilled, IconEdit, IconLeaf, IconPlus, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconAlertTriangle, IconAmbulance, IconBuilding, IconCash, IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDroplet, IconEdit, IconFiretruck, IconHome, IconHomeEco, IconHospital, IconLeaf, IconPlus, IconRecycle, IconScale, IconSchool, IconSearch, IconShieldFilled, IconShoppingCart, IconTent, IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -32,6 +32,7 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const {
     data,
@@ -42,8 +43,8 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   } = stateList.findMany
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch)
+  }, [page, debouncedSearch])
 
 
   const handleHapus = () => {
@@ -66,6 +67,23 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
     scale: IconScale,
     clipboard: IconClipboardTextFilled,
     trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet,
+    bantuan: IconCash,
+    pelatihan: IconSchool,
+    subsidi: IconShoppingCart,
+    layananKesehatan: IconHospital,
+    polisi: IconShieldFilled,
+    ambulans: IconAmbulance,
+    pemadam: IconFiretruck,
+    rumahSakit: IconHospital,
+    bangunan: IconBuilding,
+    darurat: IconAlertTriangle,
   };
 
   if (loading || !data) {
@@ -77,28 +95,45 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pengelolaan Sampah Bank Sampah</Title>
+    <Box py={{ base: 'sm', md: 'lg' }}>
+      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.15 }}
+          >
+            Daftar Pengelolaan Sampah Bank Sampah
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create')}
+            onClick={() =>
+              router.push(
+                '/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create'
+              )
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Pengelolaan Sampah</TableTh>
-                <TableTh>Icon</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '50%' }}>Nama Pengelolaan Sampah</TableTh>
+                <TableTh style={{ width: '20%' }}>Icon</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -106,18 +141,22 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text lineClamp={1} truncate="end" fw={500}>{item.name}</Text>
+                      <Text fz="md" fw={500} lh={1.5} lineClamp={1} truncate="end">
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       {iconMap[item.icon] ? (
                         <Box>
                           {React.createElement(iconMap[item.icon], {
                             size: 24,
-                            style: { color: colors['blue-button'] }
+                            style: { color: colors['blue-button'] },
                           })}
                         </Box>
                       ) : (
-                        <Text c="dimmed" fz="sm">-</Text>
+                        <Text c="dimmed" fz="sm">
+                          -
+                        </Text>
                       )}
                     </TableTd>
                     <TableTd>
@@ -125,7 +164,11 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
                         variant="light"
                         color="green"
                         size="sm"
-                        onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`
+                          )
+                        }
                       >
                         <IconEdit size={18} />
                       </Button>
@@ -147,8 +190,10 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={3} align="center" py="xl">
-                    <Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
+                  <TableTd colSpan={4} ta="center" py="xl">
+                    <Text c="dimmed" fz="sm" lh={1.4}>
+                      Tidak ada data pengelolaan sampah
+                    </Text>
                   </TableTd>
                 </TableTr>
               )}
@@ -156,19 +201,82 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
           </Table>
         </Box>
 
-        {totalPages > 1 && (
-          <Center mt="xl">
-            <Pagination
-              value={page}
-              onChange={(newPage) => load(newPage)}
-              total={totalPages}
-              siblings={1}
-              boundaries={1}
-              withEdges
-            />
-          </Center>
-        )}
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          {filteredData.length > 0 ? (
+            <Stack gap="md">
+              {filteredData.map((item) => (
+                <Paper key={item.id} p="sm" withBorder>
+                  <Stack gap={"xs"}>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Pengelolaan Sampah
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.45} lineClamp={1}>
+                      {item.name}
+                    </Text>
+                    {iconMap[item.icon] ? (
+                      React.createElement(iconMap[item.icon], {
+                        size: 20,
+                        style: { color: colors['blue-button'] },
+                      })
+                    ) : (
+                      <Text c="dimmed" fz="sm">
+                        -
+                      </Text>
+                    )}
+                    <Group justify='right'>
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`
+                          )
+                        }
+                        radius="sm"
+                        p={4}
+                      >
+                        <IconEdit size={18} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                        radius="sm"
+                        p={4}
+                      >
+                        <IconTrashFilled size={18} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))}
+            </Stack>
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="xs" lh={1.4}>
+                Tidak ada data pengelolaan sampah
+              </Text>
+            </Center>
+          )}
+        </Box>
 
+
+        <Center mt={{ base: 'lg', md: 'xl' }}>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            siblings={1}
+            boundaries={1}
+            withEdges
+          />
+        </Center>
       </Paper>
 
       {/* Modal Konfirmasi Hapus */}
@@ -182,4 +290,4 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   );
 }
 
-export default PengelolaanSampahBankSampah;
+export default PengelolaanSampahBankSampah;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
index 3ebf74e0..b8c2b6bb 100644
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
@@ -129,7 +129,7 @@ function EditProgramPenghijauan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/page.tsx
index 307e30af..938dc046 100644
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/page.tsx
@@ -79,7 +79,7 @@ function DetailProgramPenghijauan() {
   const data = stateProgramPenghijauan.findUnique.data
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol kembali */}
       <Button
         variant="subtle"
@@ -93,7 +93,7 @@ function DetailProgramPenghijauan() {
       {/* Konten detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -129,7 +129,9 @@ function DetailProgramPenghijauan() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+                <Box pl={5}>
+                  <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+                </Box>
               </Box>
 
               {/* Tombol aksi */}
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
index e06a98d1..7ea44521 100644
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
@@ -49,7 +49,7 @@ function CreateProgramPenghijauan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol back + title */}
       <Group mb="md">
         <Button
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
index da424701..ff55c48d 100644
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Center,
+  Group,
   Pagination,
   Paper,
   Skeleton,
@@ -17,22 +18,33 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  Title,
 } from '@mantine/core';
 import {
+  IconAlertTriangle,
+  IconAmbulance,
+  IconBuilding,
+  IconCash,
   IconChartLine,
   IconChristmasTreeFilled,
   IconClipboardTextFilled,
   IconDeviceImac,
+  IconDroplet,
+  IconFiretruck,
+  IconHome,
   IconHomeEco,
+  IconHospital,
   IconLeaf,
   IconPlus,
   IconRecycle,
   IconScale,
+  IconSchool,
   IconSearch,
   IconShieldFilled,
+  IconShoppingCart,
   IconTent,
   IconTrashFilled,
+  IconTree,
   IconTrendingUp,
   IconTrophy,
   IconTruckFilled,
@@ -42,9 +54,10 @@ import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import programPenghijauanState from '../../_state/lingkungan/program-penghijauan';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function ProgramPenghijauan() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
@@ -60,15 +73,16 @@ function ProgramPenghijauan() {
 }
 
 function ListProgramPenghijauan({ search }: { search: string }) {
-  const listState = useProxy(programPenghijauanState)
-  const { data, loading, page, totalPages, load } = listState.findMany
+  const listState = useProxy(programPenghijauanState);
+  const { data, loading, page, totalPages, load } = listState.findMany;
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   useEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,
@@ -84,87 +98,244 @@ function ListProgramPenghijauan({ search }: { search: string }) {
     sumberOksigen: IconChristmasTreeFilled,
     ekonomiBerkelanjutan: IconTrendingUp,
     mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet,
+    bantuan: IconCash,
+    pelatihan: IconSchool,
+    subsidi: IconShoppingCart,
+    layananKesehatan: IconHospital,
+    polisi: IconShieldFilled,
+    ambulans: IconAmbulance,
+    pemadam: IconFiretruck,
+    rumahSakit: IconHospital,
+    bangunan: IconBuilding,
+    darurat: IconAlertTriangle,
   };
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         {/* Header Section */}
-        <Box mb="md" display="flex" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
-          <Title order={4}>Daftar Program Penghijauan</Title>
+        <Box mb="lg" visibleFrom="md">
+          <Group
+            justify="space-between"
+            align="center"
+            mb="md"
+          >
+            <Title order={4} size="md" lh={1.2}>
+              Daftar Program Penghijauan
+            </Title>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/lingkungan/program-penghijauan/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Group>
+
+          {/* Desktop Table */}
+          <Box miw={0}>
+            <Table
+              highlightOnHover
+              miw={0}
+              style={{ tableLayout: 'fixed', width: '100%' }}
+            >
+              <TableThead>
+                <TableTr>
+                  <TableTh style={{ width: '5%', textAlign: 'center' }}>
+                    <Text fz="xs" fw={600} lh={1.4} ta="center">
+                      No
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '25%' }}>
+                    <Text fz="xs" fw={600} lh={1.4}>
+                      Nama Program
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '35%' }}>
+                    <Text fz="xs" fw={600} lh={1.4}>
+                      Judul / Deskripsi
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '15%', textAlign: 'center' }}>
+                    <Text fz="xs" fw={600} lh={1.4} ta="center">
+                      Ikon
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '20%', textAlign: 'center' }}>
+                    <Text fz="xs" fw={600} lh={1.4} ta="center">
+                      Aksi
+                    </Text>
+                  </TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.length > 0 ? (
+                  filteredData.map((item, index) => (
+                    <TableTr key={item.id}>
+                      <TableTd ta="center">
+                        <Text fz="sm" fw={500} lh={1.5}>
+                          {index + 1}
+                        </Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text fz="sm" fw={500} lh={1.5} truncate="end">
+                          {item.name}
+                        </Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text
+                          fz="sm"
+                          fw={500}
+                          lh={1.5}
+                          lineClamp={1}
+                          dangerouslySetInnerHTML={{ __html: item.judul }}
+                        />
+                      </TableTd>
+                      <TableTd ta="center">
+                        {iconMap[item.icon] && (
+                          <Box mx="auto" title={item.icon}>
+                            {React.createElement(iconMap[item.icon], {
+                              size: 22,
+                            })}
+                          </Box>
+                        )}
+                      </TableTd>
+                      <TableTd ta="center">
+                        <Button
+                          size="xs"
+                          radius="md"
+                          variant="light"
+                          color="blue"
+                          leftSection={<IconDeviceImac size={16} />}
+                          onClick={() =>
+                            router.push(
+                              `/admin/lingkungan/program-penghijauan/${item.id}`
+                            )
+                          }
+                        >
+                          Detail
+                        </Button>
+                      </TableTd>
+                    </TableTr>
+                  ))
+                ) : (
+                  <TableTr>
+                    <TableTd colSpan={5}>
+                      <Center py="xl">
+                        <Text c="dimmed" fz="sm" lh={1.4}>
+                          Tidak ada data program penghijauan yang cocok
+                        </Text>
+                      </Center>
+                    </TableTd>
+                  </TableTr>
+                )}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Box>
+
+        {/* Mobile View – Card Layout */}
+        <Box hiddenFrom="md">
+          <Box mb="md">
+            <Title order={4} size="sm" lh={1.2}>
+              Daftar Program Penghijauan
+            </Title>
+          </Box>
+
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/lingkungan/program-penghijauan/create')}
+            mb="lg"
+            fullWidth
+            onClick={() =>
+              router.push('/admin/lingkungan/program-penghijauan/create')
+            }
           >
             Tambah Baru
           </Button>
-        </Box>
 
-        {/* Table Section */}
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh style={{ width: '25%' }}>Nama Program</TableTh>
-                <TableTh style={{ width: '35%' }}>Judul / Deskripsi</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Ikon</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item, index) => (
-                  <TableTr key={item.id}>
-                    <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.judul }} />
-                    </TableTd>
-                    <TableTd style={{ textAlign: 'center' }}>
+          {filteredData.length > 0 ? (
+            filteredData.map((item, index) => (
+              <Paper key={item.id} withBorder p="md" mb="sm" radius="md">
+                <Stack gap="xs">
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      No
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {index + 1}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Program
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.name}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Judul / Deskripsi
+                    </Text>
+                    <Text
+                      fz="sm"
+                      fw={500}
+                      lh={1.5}
+                      dangerouslySetInnerHTML={{ __html: item.judul }}
+                    />
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Ikon
+                    </Text>
+                    <Box mt="xs" ta="center">
                       {iconMap[item.icon] && (
-                        <Box title={item.icon} mx="auto">
-                          {React.createElement(iconMap[item.icon], { size: 22 })}
-                        </Box>
+                        React.createElement(iconMap[item.icon], { size: 24 })
                       )}
-                    </TableTd>
-                    <TableTd style={{ textAlign: 'center' }}>
-                      <Button
-                        size="xs"
-                        radius="md"
-                        variant="light"
-                        color="blue"
-                        leftSection={<IconDeviceImac size={16} />}
-                        onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${item.id}`)}
-                      >
-                        Detail
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={5}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada data program penghijauan yang cocok</Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
+                    </Box>
+                  </Box>
+                  <Box>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImac size={16} />}
+                      onClick={() =>
+                        router.push(
+                          `/admin/lingkungan/program-penghijauan/${item.id}`
+                        )
+                      }
+                    >
+                      Detail
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data program penghijauan yang cocok
+              </Text>
+            </Center>
+          )}
         </Box>
       </Paper>
 
@@ -187,4 +358,4 @@ function ListProgramPenghijauan({ search }: { search: string }) {
   );
 }
 
-export default ProgramPenghijauan;
+export default ProgramPenghijauan;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/_lib/layoutTabs.tsx
index b4fa8877..7bae982f 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconSchool, IconStar } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -56,35 +56,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+         <Box visibleFrom='md' pb={10}>
+                  <ScrollArea type="auto" offsetScrollbars>
+                    <TabsList
+                      p="sm"
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx
index 3ee48259..56a793b1 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx
@@ -40,7 +40,7 @@ function DetailBeasiswaPendaftar() {
   const data = state.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx
index 011f4489..8a56006f 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx
@@ -2,23 +2,24 @@
 'use client'
 import colors from '@/con/colors';
 import {
-    Box,
-    Button,
-    Center,
-    Group,
-    Pagination,
-    Paper,
-    Skeleton,
-    Stack,
-    Table,
-    TableTbody,
-    TableTd,
-    TableTh,
-    TableThead,
-    TableTr,
-    Text,
-    Title
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title
 } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -45,60 +46,81 @@ function BeasiswaPendaftar() {
 function ListBeasiswaPendaftar({ search }: { search: string }) {
   const state = useProxy(beasiswaDesaState.beasiswaPendaftar);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Beasiswa Pendaftar</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Beasiswa Pendaftar
+          </Title>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop: Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>No</TableTh>
-                <TableTh>Nama Lengkap</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Tanggal Lahir</TableTh>
-                <TableTh>Jenis Kelamin</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh w="5%">No</TableTh>
+                <TableTh w="25%">Nama Lengkap</TableTh>
+                <TableTh w="30%">Alamat</TableTh>
+                <TableTh w="15%">Tanggal Lahir</TableTh>
+                <TableTh w="15%">Jenis Kelamin</TableTh>
+                <TableTh w="10%">Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.namaLengkap}</Text>
+                      <Text fz="md" fw={500} lh={1.45}>
+                        {index + 1}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.alamatKTP}</Text>
+                      <Text truncate fz="md" fw={500} lh={1.45}>
+                        {item.namaLengkap}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">
+                      <Text truncate fz="md" fw={500} lh={1.45}>
+                        {item.alamatKTP}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="md" fw={500} lh={1.45}>
                         {item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.jenisKelamin}</Text>
+                      <Text truncate fz="md" fw={500} lh={1.45}>
+                        {item.jenisKelamin}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
@@ -107,6 +129,9 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
                         onClick={() =>
                           router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)
                         }
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
                       >
                         <IconDeviceImacCog size={20} />
                         <Text ml={5}>Detail</Text>
@@ -117,8 +142,10 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={6}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada data pendaftar yang cocok</Text>
+                    <Center py={{ base: 'sm', md: 'md' }}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data pendaftar yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -126,6 +153,82 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile: Card */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper key={item.id} withBorder p="sm" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        No
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {index + 1}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Lengkap
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.namaLengkap}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Alamat
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.alamatKTP}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Tanggal Lahir
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Jenis Kelamin
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.jenisKelamin}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)
+                        }
+                        fullWidth
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="sm">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data pendaftar yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>
@@ -146,4 +249,4 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
   );
 }
 
-export default BeasiswaPendaftar;
+export default BeasiswaPendaftar;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
index 18728c2c..91c42c6a 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
@@ -93,7 +93,7 @@ function EditProgramKreatifDesa() {
     }
   }
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
index 00b7bc4b..c05524a7 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
@@ -37,7 +37,7 @@ function CreateKeunggulanProgram() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx
index 1aed7859..e31f1f40 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrashFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -48,12 +48,13 @@ function ListKeunggulanProgram({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = stateList.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const handleHapus = () => {
     if (selectedId) {
@@ -67,14 +68,14 @@ function ListKeunggulanProgram({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
           <Title order={4}>Daftar Keunggulan Program</Title>
@@ -92,34 +93,44 @@ function ListKeunggulanProgram({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ minWidth: 200 }}>Nama Keunggulan Program</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Deskripsi</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Edit</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Delete</TableTh>
+                <TableTh style={{ width: '30%' }}>Nama Keunggulan Program</TableTh>
+                <TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ minWidth: 200 }}>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
                         {item.judul}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
                       <Text
+                        fz="md"
                         fw={500}
+                        lh={1.45}
                         truncate="end"
                         lineClamp={1}
                         dangerouslySetInnerHTML={{ __html: item.deskripsi }}
                       />
                     </TableTd>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="green"
@@ -133,7 +144,7 @@ function ListKeunggulanProgram({ search }: { search: string }) {
                         <IconEdit size={18} />
                       </Button>
                     </TableTd>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="red"
@@ -151,8 +162,8 @@ function ListKeunggulanProgram({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text c="dimmed">
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data keunggulan program yang cocok
                       </Text>
                     </Center>
@@ -162,9 +173,70 @@ function ListKeunggulanProgram({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="md" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nama Keunggulan Program</Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                        {item.judul}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
+                      <Text
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
+                        truncate="end"
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`
+                          )
+                        }
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrashFilled size={16} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data keunggulan program yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
-      {totalPages > 1 && (
+     
         <Center>
           <Pagination
             value={page}
@@ -179,9 +251,7 @@ function ListKeunggulanProgram({ search }: { search: string }) {
             radius="md"
           />
         </Center>
-      )}
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
@@ -192,4 +262,4 @@ function ListKeunggulanProgram({ search }: { search: string }) {
   );
 }
 
-export default KeunggulanProgram;
+export default KeunggulanProgram;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/layout.tsx b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/layout.tsx
index 4f25d331..e50ab83a 100644
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/layout.tsx
@@ -1,8 +1,29 @@
 'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx
index 179de0fb..2c4be590 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBuildingCommunity, IconCalendar, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -62,35 +62,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+         <Box visibleFrom='md' pb={10}>
+                  <ScrollArea type="auto" offsetScrollbars>
+                    <TabsList
+                      p="sm"
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
index 15beadd4..ebea0187 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
@@ -116,7 +116,7 @@ function EditFasilitasYangDisediakan() {
   }
 
   return (
-    <Box>
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx
index 05fa285e..cbf4f70c 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,28 +29,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Pratinjau Fasilitas Yang Disediakan
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Pratinjau Fasilitas Yang Disediakan
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -59,6 +55,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -84,6 +81,47 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/layout.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/layout.tsx
index 3a414c77..e50ab83a 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/layout.tsx
@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
index 4b2a8156..51b9185e 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
@@ -113,7 +113,7 @@ function EditLokasiDanJadwal() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx
index c2a83d5d..1829ee2d 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,28 +29,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Pratinjau Lokasi & Jadwal
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Pratinjau Lokasi & Jadwal
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -59,6 +55,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -85,6 +82,48 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
index be02e0d6..9697085a 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
@@ -109,7 +109,7 @@ function EditTujuanProgram() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx
index a7429917..d59db998 100644
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx
@@ -4,8 +4,7 @@ import {
   Box,
   Button,
   Divider,
-  Grid,
-  GridCol,
+  Group,
   Paper,
   Skeleton,
   Stack,
@@ -40,28 +39,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Pratinjau Tujuan Program
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Pratinjau Tujuan Program
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -70,6 +65,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -95,6 +91,47 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+         <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );
diff --git a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
index 731b4f22..15e2fd1f 100644
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
@@ -76,7 +76,7 @@ export default function EditDataPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'xl' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md" gap="sm">
         <Button variant="subtle" onClick={() => router.back()} radius="md">
           <IconArrowBack size={20} stroke={2} />
diff --git a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
index dcfb0a49..982c2d0b 100644
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
@@ -39,7 +39,7 @@ export default function CreateDataPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'xl' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md" gap="sm">
         <Button variant="subtle" onClick={() => router.back()} radius="md">
           <IconArrowBack size={20} stroke={2} />
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx
index e8de7280..d015ba5e 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBuilding, IconChalkboard, IconMicroscope, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -68,35 +68,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+        <Box visibleFrom='md' pb={10}>
+                 <ScrollArea type="auto" offsetScrollbars>
+                   <TabsList
+                     p="sm"
+                     style={{
+                       background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                       borderRadius: "1rem",
+                       boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                       display: "flex",
+                       flexWrap: "nowrap",
+                       gap: "0.5rem",
+                       paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                     }}
+                   >
+                     {tabs.map((tab, i) => (
+                       <TabsTab
+                         key={i}
+                         value={tab.value}
+                         leftSection={tab.icon}
+                         style={{
+                           fontWeight: 600,
+                           fontSize: "0.9rem",
+                           transition: "all 0.2s ease",
+                           flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                         }}
+                       >
+                         {tab.label}
+                       </TabsTab>
+                     ))}
+                   </TabsList>
+                 </ScrollArea>
+               </Box>
+       
+               <Box hiddenFrom='md' pb={10}>
+                 <ScrollArea
+                   type="auto"
+                   offsetScrollbars={false}
+                   w="100%"
+                 >
+       
+                   <TabsList
+                     p="xs" // lebih kecil
+                     style={{
+                       background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                       borderRadius: "1rem",
+                       display: "flex",
+                       flexWrap: "nowrap",
+                       gap: "0.5rem",
+                       width: "max-content", // ⬅️ kunci
+                       maxWidth: "100%",     // ⬅️ penting
+                     }}
+                   >
+                     {tabs.map((tab, i) => (
+                       <TabsTab
+                         key={i}
+                         value={tab.value}
+                         leftSection={tab.icon}
+                         style={{
+                           fontWeight: 600,
+                           fontSize: "0.9rem",
+                           paddingInline: "0.75rem", // ⬅️ lebih ramping
+                           flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                         }}
+                       >
+                         {tab.label}
+                       </TabsTab>
+                     ))}
+                   </TabsList>
+                 </ScrollArea>
+               </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
index 252eed16..5e90fcdb 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
@@ -90,7 +90,7 @@ function EditJenjangPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
index dacee6d5..27f52ec5 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
@@ -51,7 +51,7 @@ function CreateJenjangPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Back button + Title */}
       <Group mb="md">
         <Button
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx
index d48b0a4a..6ac01e51 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx
@@ -1,6 +1,23 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -9,29 +26,25 @@ import { useProxy } from 'valtio/utils';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
-
 function JenjangPendidikan() {
-  // const [search, setSearch] = useState("")
   return (
     <Box>
-      <Title order={4}>Jenjang Pendidikan</Title>
-      {/* <HeaderSearch
-        title='Jenjang Pendidikan'
-        placeholder='Cari jenjang pendidikan...'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      /> */}
+      <Title order={2} visibleFrom="md">
+        Jenjang Pendidikan
+      </Title>
+      <Title order={2} hiddenFrom="md">
+        Jenjang Pendidikan
+      </Title>
       <ListJenjangPendidikan />
     </Box>
   );
 }
 
 function ListJenjangPendidikan() {
-  const stateList = useProxy(infoSekolahPaud.jenjangPendidikan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter()
+  const stateList = useProxy(infoSekolahPaud.jenjangPendidikan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter();
 
   const {
     data,
@@ -39,50 +52,65 @@ function ListJenjangPendidikan() {
     totalPages,
     loading,
     load,
-  } = stateList.findMany
+  } = stateList.findMany;
 
   const handleHapus = () => {
     if (selectedId) {
-      stateList.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
+      stateList.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
     }
-  }
+  };
 
   useShallowEffect(() => {
-    load(page, 10)
-  }, [page])
+    load(page, 10);
+  }, [page]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton h={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper bg={colors['white-1']} p="lg" withBorder shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Jenjang Pendidikan</Title>
+          <Title order={3} visibleFrom="md">
+            Daftar Jenjang Pendidikan
+          </Title>
+          <Title order={3} hiddenFrom="md">
+            Daftar Jenjang Pendidikan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan/create')}
+            onClick={() =>
+              router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Jenjang Pendidikan</TableTh>
+                <TableTh style={{ width: '70%' }}>Nama Jenjang Pendidikan</TableTh>
                 <TableTh style={{ width: '15%' }}>Edit</TableTh>
                 <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
@@ -92,13 +120,19 @@ function ListJenjangPendidikan() {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end">{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         color="green"
                         variant="light"
-                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`
+                          )
+                        }
                       >
                         <IconEdit size={20} />
                       </Button>
@@ -108,8 +142,8 @@ function ListJenjangPendidikan() {
                         color="red"
                         variant="light"
                         onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
+                          setSelectedId(item.id);
+                          setModalHapus(true);
                         }}
                       >
                         <IconX size={20} />
@@ -120,8 +154,10 @@ function ListJenjangPendidikan() {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data jenjang pendidikan</Text>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data jenjang pendidikan
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -129,6 +165,55 @@ function ListJenjangPendidikan() {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Stack hiddenFrom="md" gap="sm">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="sm" radius="md">
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama Jenjang Pendidikan
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {item.nama}
+                  </Text>
+                </Box>
+                <Group mt="sm" justify="flex-end" gap="xs">
+                  <Button
+                    color="green"
+                    variant="light"
+                    size="compact-sm"
+                    onClick={() =>
+                      router.push(
+                        `/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`
+                      )
+                    }
+                  >
+                    <IconEdit size={16} />
+                  </Button>
+                  <Button
+                    color="red"
+                    variant="light"
+                    size="compact-sm"
+                    onClick={() => {
+                      setSelectedId(item.id);
+                      setModalHapus(true);
+                    }}
+                  >
+                    <IconX size={16} />
+                  </Button>
+                </Group>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data jenjang pendidikan
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       <Center>
@@ -151,10 +236,10 @@ function ListJenjangPendidikan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus jenjang pendidikan ini?'
+        text="Apakah anda yakin ingin menghapus jenjang pendidikan ini?"
       />
     </Box>
   );
 }
 
-export default JenjangPendidikan;
+export default JenjangPendidikan;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/layout.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/layout.tsx
index 3a414c77..e50ab83a 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/layout.tsx
@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
index 3b5107f8..bd1d769e 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
@@ -96,7 +96,7 @@ export default function EditLembaga() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx
index 8861f852..8a6000bc 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx
@@ -41,7 +41,7 @@ function DetailLembaga() {
   const data = detailState.findUnique.data;
 
   return (
-    <Box py={10}>
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -53,7 +53,7 @@ function DetailLembaga() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
index 447e6938..7061d96b 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
@@ -52,7 +52,7 @@ function CreateLembaga() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
index eadabed2..93765bb0 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -27,7 +27,7 @@ import HeaderSearch from '../../../_com/header';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
 function Lembaga() {
-  const [search, setSearch] = useState("")
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
@@ -43,8 +43,9 @@ function Lembaga() {
 }
 
 function ListLembaga({ search }: { search: string }) {
-  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
-  const router = useRouter()
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan);
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,40 +56,65 @@ function ListLembaga({ search }: { search: string }) {
   } = stateList.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Lembaga</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Lembaga
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/pendidikan/info-sekolah/lembaga/create')}
+            onClick={() =>
+              router.push('/admin/pendidikan/info-sekolah/lembaga/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '40%' }}>Nama Lembaga</TableTh>
-                <TableTh style={{ width: '30%' }}>Jenjang Pendidikan</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '40%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Nama Lembaga
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '30%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Jenjang Pendidikan
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -96,19 +122,29 @@ function ListLembaga({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">{item.jenjangPendidikan?.nama || '-'}</Text>
+                      <Text fz="sm" fw={500} lh={1.5} c="gray.7">
+                        {item.jenjangPendidikan?.nama || '-'}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/info-sekolah/lembaga/${item.id}`
+                          )
+                        }
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -116,8 +152,10 @@ function ListLembaga({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data lembaga yang cocok</Text>
+                    <Center py={{ base: 20, md: 24 }}>
+                      <Text c="gray.6" fz="sm" lh={1.5}>
+                        Tidak ada data lembaga yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -125,6 +163,59 @@ function ListLembaga({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} p="sm" withBorder bg="white">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4} c="gray.7">
+                        Nama Lembaga
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4} c="gray.7">
+                        Jenjang Pendidikan
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} c="gray.7">
+                        {item.jenjangPendidikan?.nama || '-'}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/info-sekolah/lembaga/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImac size={18} />
+                        <Text ml={6} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="gray.6" fz="sm" lh={1.5}>
+                  Tidak ada data lembaga yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>
@@ -145,4 +236,4 @@ function ListLembaga({ search }: { search: string }) {
   );
 }
 
-export default Lembaga;
+export default Lembaga;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
index 4df0541d..0b0922ab 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
@@ -100,7 +100,7 @@ function EditPengajar() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header Back + Title */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx
index b78a3edc..d10f34d8 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx
@@ -41,7 +41,7 @@ function DetailPengajar() {
   const data = detailState.findUnique.data;
 
   return (
-    <Box py={10}>
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -53,7 +53,7 @@ function DetailPengajar() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
index a0395acc..5edea688 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
@@ -57,7 +57,7 @@ function CreatePengajar() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header Back + Title */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx
index 7ea5a217..02f9cd36 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx
@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function Pengajar() {
   const [search, setSearch] = useState('');
@@ -29,8 +30,9 @@ function Pengajar() {
 }
 
 function ListPengajar({ search }: { search: string }) {
-  const listState = useProxy(infoSekolahPaud.pengajar)
+  const listState = useProxy(infoSekolahPaud.pengajar);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -41,24 +43,26 @@ function ListPengajar({ search }: { search: string }) {
   } = listState.findMany;
 
   useEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton h={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pengajar</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Pengajar
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -69,13 +73,33 @@ function ListPengajar({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '35%' }}>Nama Pengajar</TableTh>
-                <TableTh style={{ width: '35%' }}>Lembaga</TableTh>
-                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Nama Pengajar
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Lembaga
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '30%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -83,10 +107,14 @@ function ListPengajar({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz="sm" c="dimmed">{item.lembaga.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} c="gray.7" truncate="end">
+                        {item.lembaga.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
@@ -95,7 +123,9 @@ function ListPengajar({ search }: { search: string }) {
                         onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -103,8 +133,10 @@ function ListPengajar({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada data pengajar yang cocok</Text>
+                    <Center py={{ base: 'md', md: 'lg' }}>
+                      <Text c="gray.6" fz="sm" lh={1.4}>
+                        Tidak ada data pengajar yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -112,14 +144,63 @@ function ListPengajar({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder radius="md" p="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Pengajar
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Lembaga
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} c="gray.7">
+                        {item.lembaga.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={18} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="md">
+                <Text c="gray.6" fz="sm" lh={1.4}>
+                  Tidak ada data pengajar yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10, search)
-            window.scrollTo({ top: 0, behavior: 'smooth' })
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
@@ -129,7 +210,7 @@ function ListPengajar({ search }: { search: string }) {
         />
       </Center>
     </Box>
-  )
+  );
 }
 
-export default Pengajar;
+export default Pengajar;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
index 6d283d2e..e2b8d002 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
@@ -107,7 +107,7 @@ function EditSiswa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx
index 0f29a36f..d23062c1 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx
@@ -41,7 +41,7 @@ function DetailSiswa() {
   const data = detailState.findUnique.data
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -55,7 +55,7 @@ function DetailSiswa() {
       {/* Card Utama */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
index 0cd59c97..97c93a45 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
@@ -52,7 +52,7 @@ function CreateSiswa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header + Back Button */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx
index 7d1c28da..5301ba06 100644
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import {
   Box,
@@ -17,7 +17,7 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  Title,
 } from '@mantine/core';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,6 +25,7 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function Siswa() {
   const [search, setSearch] = useState('');
@@ -43,30 +44,33 @@ function Siswa() {
 }
 
 function ListSiswa({ search }: { search: string }) {
-  const stateSiswa = useProxy(infoSekolahPaud.siswa)
+  const stateSiswa = useProxy(infoSekolahPaud.siswa);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = stateSiswa.findMany;
 
   useEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Siswa</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Siswa
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -77,13 +81,35 @@ function ListSiswa({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            striped
+            withRowBorders
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '35%' }}>Nama Siswa</TableTh>
-                <TableTh style={{ width: '35%' }}>Lembaga</TableTh>
-                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama Siswa
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Lembaga
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -91,19 +117,27 @@ function ListSiswa({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end">{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" c="dimmed">{item.lembaga.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.lembaga.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)
+                        }
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -111,8 +145,10 @@ function ListSiswa({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data siswa yang cocok</Text>
+                    <Center py={{ base: 'sm', md: 'md' }}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data siswa yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -120,24 +156,76 @@ function ListSiswa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Siswa
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Lembaga
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.lembaga.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="sm">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data siswa yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
+     
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt={{ base: 'sm', md: 'md' }}
+            mb={{ base: 'sm', md: 'md' }}
+            color="blue"
+            radius="md"
+          />
+        </Center>
     </Box>
-  )
+  );
 }
 
-export default Siswa;
+export default Siswa;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx
index 57da173d..e47ac810 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBook2, IconMapPin, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -63,35 +63,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
+        <Box visibleFrom='md' pb={10}>
+          <ScrollArea type="auto" offsetScrollbars>
+            <TabsList
+              p="sm"
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
+
+        <Box hiddenFrom='md' pb={10}>
+          <ScrollArea
+            type="auto"
+            offsetScrollbars={false}
+            w="100%"
           >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+
+            <TabsList
+              p="xs" // lebih kecil
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                width: "max-content", // ⬅️ kunci
+                maxWidth: "100%",     // ⬅️ penting
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    paddingInline: "0.75rem", // ⬅️ lebih ramping
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
index 30117ce0..d066c347 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
@@ -113,7 +113,7 @@ function EditJenisProgramYangDiselenggarakan() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         {/* Back Button + Title */}
         <Group mb="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx
index 1a7b12bc..88ad47b0 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx
@@ -4,8 +4,7 @@ import {
   Box,
   Button,
   Divider,
-  Grid,
-  GridCol,
+  Group,
   Paper,
   Skeleton,
   Stack,
@@ -40,28 +39,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Preview Jenis Program Yang Diselenggarakan
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Preview Jenis Program Yang Diselenggarakan
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -86,12 +81,20 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
             </Stack>
           </Box>
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/layout.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/layout.tsx
index 4f25d331..34fe9efa 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/layout.tsx
@@ -1,8 +1,30 @@
 'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+const pathname = usePathname();
+
+  // Contoh path:
+  // - /darmasaba/desa/berita/semua → panjang 5 → list
+  // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+  // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+
+  const segments = pathname.split('/').filter(Boolean);
+  const isDetailPage = segments.length >= 5;
+
+  if (isDetailPage) {
+    // Tampilkan tanpa tab menu
+    return (
+      <Box>
+        {children}
+      </Box>
+    );
+  }
+
+
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
index 699e9839..c0670869 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
@@ -120,7 +120,7 @@ function EditTempatKegiatan() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         {/* Back Button + Title */}
         <Group mb="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx
index a377409e..80e037ac 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,28 +29,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Preview Tempat Kegiatan
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Preview Tempat Kegiatan
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -75,12 +71,20 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
             </Stack>
           </Box>
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
index 111cd506..881e88d4 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
@@ -111,7 +111,7 @@ function EditTujuanProgram() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx
index 00b36c7a..680f117c 100644
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx
@@ -4,8 +4,7 @@ import {
   Box,
   Button,
   Divider,
-  Grid,
-  GridCol,
+  Group,
   Paper,
   Skeleton,
   Stack,
@@ -42,28 +41,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Pratinjau Pendidikan Non Formal
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Pratinjau Pendidikan Non Formal
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -88,12 +83,20 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
             </Stack>
           </Box>
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx
index 3c89d5ea..29b2f3f9 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBook2, IconCategory, IconUser } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -62,35 +62,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+         <Box visibleFrom='md' pb={10}>
+                  <ScrollArea type="auto" offsetScrollbars>
+                    <TabsList
+                      p="sm"
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
index 52208e15..9484e58d 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
@@ -116,7 +116,7 @@ function EditPerpustakaanDigital() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx
index 469211c1..af558326 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx
@@ -40,7 +40,7 @@ function DetailDataPerpustakaan() {
   const data = stateDetail.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -52,7 +52,7 @@ function DetailDataPerpustakaan() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
index a85c0caa..54a28cd6 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
@@ -63,7 +63,7 @@ function CreateDataPerpustakaan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Kembali */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx
index c28486ee..5cd77208 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx
@@ -1,13 +1,31 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function DataPerpustakaan() {
   const [search, setSearch] = useState('');
@@ -26,85 +44,138 @@ function DataPerpustakaan() {
 }
 
 function ListDataPerpustakaan({ search }: { search: string }) {
-  const listDataState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
+  const listDataState = useProxy(perpustakaanDigitalState.dataPerpustakaan);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = listDataState.findMany;
 
   useEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="md" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>List Data Perpustakaan</Title>
+          <Title order={4} size="md" lh={1.2}>
+            List Data Perpustakaan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create')}
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create'
+              )
+            }
           >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table striped highlightOnHover withRowBorders style={{ minWidth: '700px' }}>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            striped
+            highlightOnHover
+            withRowBorders
+            miw={0}
+            style={{ tableLayout: 'fixed', width: '100%' }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '5%' }}>No</TableTh>
-                <TableTh style={{ width: '25%' }}>Judul</TableTh>
-                <TableTh style={{ width: '25%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '23%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '22%' }}>Detail</TableTh>
+                <TableTh style={{ width: '5%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} ta="center">
+                    No
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Judul
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '23%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Deskripsi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '22%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Detail
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '5%' }}>
-                      <Text truncate fz="sm">{index + 1}</Text>
+                    <TableTd ta="center">
+                      <Text fz="sm" lh={1.5} truncate>
+                        {index + 1}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Text truncate fz="sm">{item.judul}</Text>
+                    <TableTd>
+                      <Text fz="sm" lh={1.5} truncate>
+                        {item.judul}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Text truncate fz="sm">{item.kategori.name}</Text>
+                    <TableTd>
+                      <Text fz="sm" lh={1.5} truncate>
+                        {item.kategori.name}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Box w={150}>
-                        <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} lineClamp={1} truncate fz="sm" />
-                      </Box>
+                    <TableTd>
+                      <Text
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        lineClamp={1}
+                        fz="sm"
+                        lh={1.5}
+                        truncate
+                      />
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`
+                          )
+                        }
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data perpustakaan yang cocok</Text>
+                  <TableTd colSpan={5}>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.5}>
+                        Tidak ada data perpustakaan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -112,6 +183,80 @@ function ListDataPerpustakaan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        No
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {index + 1}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Judul
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.judul}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Kategori
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.kategori.name}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Deskripsi
+                      </Text>
+                      <Text
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
+                        lineClamp={2}
+                      />
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5} fz="sm" fw={500}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.5}>
+                  Tidak ada data perpustakaan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+
         <Center>
           <Pagination
             value={page}
@@ -128,7 +273,7 @@ function ListDataPerpustakaan({ search }: { search: string }) {
         </Center>
       </Paper>
     </Box>
-  )
+  );
 }
 
-export default DataPerpustakaan;
+export default DataPerpustakaan;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
index 67a51242..fcaeae24 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
@@ -75,7 +75,7 @@ function EditKategoriBuku() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
index ec7ca529..fd38dded 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
@@ -34,7 +34,7 @@ function CreateKategoriBuku() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx
index a5ff8cac..4d6f84bb 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -31,6 +31,7 @@ function ListKategoriBuku({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -41,8 +42,8 @@ function ListKategoriBuku({ search }: { search: string }) {
   } = stateKategori.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search]);
+    load(page, 10, debouncedSearch)
+  }, [page, debouncedSearch]);
 
   const handleDelete = () => {
     if (selectedId) {
@@ -64,10 +65,12 @@ function ListKategoriBuku({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kategori Buku</Title>
+    <Box py={{ base: 'sm', md: 'lg' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Kategori Buku
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -77,40 +80,62 @@ function ListKategoriBuku({ search }: { search: string }) {
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '10%' }}>No</TableTh>
-                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
-                <TableTh style={{ width: '15%' }}>Edit</TableTh>
-                <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+                <TableTh style={{ width: '10%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed" ta="center">No</Text>
+                </TableTh>
+                <TableTh style={{ width: '60%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed">Nama Kategori</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed" ta="center">Edit</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed" ta="center">Hapus</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
-                    <TableTd>
-                      <Text truncate fz="sm">{item.name}</Text>
+                    <TableTd ta="center">
+                      <Text fz="sm" fw={500} lh={1.5}>{index + 1}</Text>
                     </TableTd>
                     <TableTd>
-                      <Button variant="light" color="green" onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
-                        <IconEdit size={20} />
+                      <Text truncate fz="sm" fw={500} lh={1.5}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Button variant="light" color="green" size="xs" onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
+                        <IconEdit size={16} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd ta="center">
                       <Button
                         variant="light"
                         color="red"
+                        size="xs"
                         disabled={perpustakaanDigitalState.kategoriBuku.delete.loading}
                         onClick={() => {
                           setSelectedId(item.id)
                           setModalHapus(true)
                         }}
                       >
-                        <IconTrash size={20} />
+                        <IconTrash size={16} />
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -119,7 +144,9 @@ function ListKategoriBuku({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">Tidak ada data kategori buku yang cocok</Text>
+                      <Text c="dimmed" fz="sm" fw={500} lh={1.5}>
+                        Tidak ada data kategori buku yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -127,21 +154,74 @@ function ListKategoriBuku({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="md">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper key={item.id} withBorder radius="md" p="md" bg={colors['white-1']}>
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>No</Text>
+                      <Text fz="sm" fw={500} lh={1.5}>{index + 1}</Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nama Kategori</Text>
+                      <Text fz="sm" fw={500} lh={1.5}>{item.name}</Text>
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        disabled={perpustakaanDigitalState.kategoriBuku.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" fw={500} lh={1.5}>
+                  Tidak ada data kategori buku yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
+
+      
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt={{ base: 'sm', md: 'md' }}
+            mb={{ base: 'sm', md: 'md' }}
+            color="blue"
+            radius="md"
+          />
+        </Center>
+
 
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
@@ -154,4 +234,4 @@ function ListKategoriBuku({ search }: { search: string }) {
   )
 }
 
-export default KategoriBuku;
+export default KategoriBuku;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/layout.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/layout.tsx
index 4f25d331..e50ab83a 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/layout.tsx
@@ -1,8 +1,29 @@
 'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx
index 16ebda74..f62201ec 100644
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -47,10 +47,11 @@ function ListPeminjamBuku({ search }: { search: string }) {
   const router = useRouter();
 
   const { data, page, totalPages, loading, load } = statePeminjam.findMany;
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
@@ -81,41 +82,61 @@ function ListPeminjamBuku({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Title order={4} mb="md">Daftar Peminjam Buku</Title>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+    <Box py={{ base: 'sm', md: 'lg' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Title order={4} lh={1.2} mb={{ base: 'md', md: 'lg' }}>
+          Daftar Peminjam Buku
+        </Title>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '10%' }}>No</TableTh>
-                <TableTh style={{ width: '25%' }}>Nama Peminjam</TableTh>
-                <TableTh style={{ width: '25%' }}>Status</TableTh>
-                <TableTh style={{ width: '25%' }}>Alamat</TableTh>
-                <TableTh style={{ width: '25%' }}>Detail</TableTh>
+                <TableTh style={{ width: '8%' }}>No</TableTh>
+                <TableTh style={{ width: '28%' }}>Nama Peminjam</TableTh>
+                <TableTh style={{ width: '20%' }}>Status</TableTh>
+                <TableTh style={{ width: '28%' }}>Alamat</TableTh>
+                <TableTh style={{ width: '16%' }}>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.nama}</Text>
+                      <Text fz="sm" lh={1.5}>
+                        {index + 1}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      {renderStatusBadge(item.status)}
+                      <Text fz="sm" lh={1.5} truncate>
+                        {item.nama}
+                      </Text>
                     </TableTd>
+                    <TableTd>{renderStatusBadge(item.status)}</TableTd>
                     <TableTd>
-                      {item.alamat}
+                      <Text fz="sm" lh={1.5} truncate>
+                        {item.alamat}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
                         color="green"
                         onClick={() =>
-                          router.push(`/admin/pendidikan/perpustakaan-digital/peminjam/${item.id}`)
+                          router.push(
+                            `/admin/pendidikan/perpustakaan-digital/peminjam/${item.id}`
+                          )
                         }
+                        radius="md"
                       >
                         <IconDeviceImacCog size={20} />
                       </Button>
@@ -124,9 +145,9 @@ function ListPeminjamBuku({ search }: { search: string }) {
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text c="dimmed">
+                  <TableTd colSpan={5}>
+                    <Center py={32}>
+                      <Text c="dimmed" fz="sm" lh={1.5}>
                         Tidak ada data Peminjam buku yang cocok
                       </Text>
                     </Center>
@@ -136,10 +157,84 @@ function ListPeminjamBuku({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="md">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper
+                  key={item.id}
+                  withBorder
+                  p="md"
+                  radius="md"
+                  bg={colors['white-1']}
+                >
+                  <Stack gap="xs">
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        No
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {index + 1}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Nama Peminjam
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Status
+                      </Text>
+                      {renderStatusBadge(item.status)}
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Alamat
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.alamat}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Detail
+                      </Text>
+                      <Button
+                        variant="light"
+                        color="green"
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/perpustakaan-digital/peminjam/${item.id}`
+                          )
+                        }
+                        mt="xs"
+                        radius="md"
+                        fullWidth
+                      >
+                        <IconDeviceImacCog size={20} />
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={32}>
+                <Text c="dimmed" fz="sm" lh={1.5}>
+                  Tidak ada data Peminjam buku yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
-      {totalPages > 1 && (
-        <Center>
+        <Center mt={{ base: 'sm', md: 'lg' }}>
           <Pagination
             value={page}
             onChange={(newPage) => {
@@ -153,9 +248,8 @@ function ListPeminjamBuku({ search }: { search: string }) {
             radius="md"
           />
         </Center>
-      )}
     </Box>
   );
 }
 
-export default PeminjamBuku;
+export default PeminjamBuku;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx
index 9b5b10b7..ab63c34a 100644
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconSchool, IconTarget } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -57,35 +57,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
-          >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+        <Box visibleFrom='md' pb={10}>
+                 <ScrollArea type="auto" offsetScrollbars>
+                   <TabsList
+                     p="sm"
+                     style={{
+                       background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                       borderRadius: "1rem",
+                       boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                       display: "flex",
+                       flexWrap: "nowrap",
+                       gap: "0.5rem",
+                       paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                     }}
+                   >
+                     {tabs.map((tab, i) => (
+                       <TabsTab
+                         key={i}
+                         value={tab.value}
+                         leftSection={tab.icon}
+                         style={{
+                           fontWeight: 600,
+                           fontSize: "0.9rem",
+                           transition: "all 0.2s ease",
+                           flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                         }}
+                       >
+                         {tab.label}
+                       </TabsTab>
+                     ))}
+                   </TabsList>
+                 </ScrollArea>
+               </Box>
+       
+               <Box hiddenFrom='md' pb={10}>
+                 <ScrollArea
+                   type="auto"
+                   offsetScrollbars={false}
+                   w="100%"
+                 >
+       
+                   <TabsList
+                     p="xs" // lebih kecil
+                     style={{
+                       background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                       borderRadius: "1rem",
+                       display: "flex",
+                       flexWrap: "nowrap",
+                       gap: "0.5rem",
+                       width: "max-content", // ⬅️ kunci
+                       maxWidth: "100%",     // ⬅️ penting
+                     }}
+                   >
+                     {tabs.map((tab, i) => (
+                       <TabsTab
+                         key={i}
+                         value={tab.value}
+                         leftSection={tab.icon}
+                         style={{
+                           fontWeight: 600,
+                           fontSize: "0.9rem",
+                           paddingInline: "0.75rem", // ⬅️ lebih ramping
+                           flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                         }}
+                       >
+                         {tab.label}
+                       </TabsTab>
+                     ))}
+                   </TabsList>
+                 </ScrollArea>
+               </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/layout.tsx b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/layout.tsx
index 1fa8572a..1cd7f2db 100644
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/layout.tsx
@@ -1,8 +1,29 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs"
+import { Box } from "@mantine/core";
 
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}
diff --git a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
index 383a7f9f..90d73802 100644
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
@@ -125,7 +125,7 @@ function EditTujuanProgram() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx
index e264957e..31da5b7c 100644
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,28 +29,24 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Pratinjau Program Unggulan
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  '/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit'
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Pratinjau Program Unggulan
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit'
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -75,13 +71,22 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
+
             </Stack>
           </Box>
         </Paper>
diff --git a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
index e9bef0b8..6bd64c4b 100644
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
@@ -111,7 +111,7 @@ function EditTujuanProgram() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         {/* Back Button + Title */}
         <Group mb="md">
diff --git a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx
index c8ab9b53..fd4f9a82 100644
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,14 +29,11 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Pratinjau Tujuan Program
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']}>
+            Pratinjau Tujuan Program
+          </Title>
+          <Button
               c="green"
               variant="light"
               leftSection={<IconEdit size={18} stroke={2} />}
@@ -49,8 +46,7 @@ function Page() {
             >
               Edit
             </Button>
-          </GridCol>
-        </Grid>
+        </Group>
 
         {/* Konten Preview */}
         <Paper
@@ -59,6 +55,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -85,6 +82,48 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }} maw={900} mx="auto">
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );
diff --git a/src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx b/src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx
index ef969288..5631fe9d 100644
--- a/src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx
@@ -16,7 +16,6 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -49,10 +48,6 @@ function ListResponden({ search }: ListRespondenProps) {
   const router = useRouter();
   const { data, page, totalPages, loading, load } = state.findMany;
 
-  useShallowEffect(() => {
-    load(page, 10);
-  }, [page]);
-
   const filteredData = (data || []).filter((item) => {
     const keyword = search.toLowerCase();
     return item.name.toLowerCase().includes(keyword);
diff --git a/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx b/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
index c08cca7d..7c16dfb0 100644
--- a/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
@@ -57,7 +57,7 @@ function Page() {
   if (!data || data.length === 0) {
     return (
       <Box py={{ base: 'md', md: 'lg' }}>
-        <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
+        <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="md" shadow="sm" withBorder>
           <Stack gap={'sm'}>
             <Grid mb={10}>
               <GridCol span={{ base: 12, md: 9 }}>
@@ -96,7 +96,7 @@ function Page() {
 
   return (
     <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
+      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="md" shadow="sm" withBorder>
         <Stack gap={'sm'}>
           <Grid mb={10}>
             <GridCol span={{ base: 12, md: 9 }}>
diff --git a/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx b/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
index 1fa70082..09b65e77 100644
--- a/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
@@ -57,7 +57,7 @@ function Page() {
   if (!data || data.length === 0) {
     return (
       <Box py={{ base: 'md', md: 'lg' }}>
-        <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
+        <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="md" shadow="sm" withBorder>
           <Stack gap={'sm'}>
             <Grid mb={10}>
               <GridCol span={{ base: 12, md: 9 }}>
@@ -95,7 +95,7 @@ function Page() {
 
   return (
     <Box py={{ base: 'md', md: 'lg' }}>
-      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
+      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="md" shadow="sm" withBorder>
         <Stack gap={'sm'}>
           <Grid mb={10}>
             <GridCol span={{ base: 12, md: 9 }}>
diff --git a/src/app/admin/(dashboard)/user&role/layout.tsx b/src/app/admin/(dashboard)/user&role/layout.tsx
index 929c905b..05048967 100644
--- a/src/app/admin/(dashboard)/user&role/layout.tsx
+++ b/src/app/admin/(dashboard)/user&role/layout.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBrush, IconForms, IconUser } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -62,29 +62,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <TabsList
-          p="sm"
-          style={{
-            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-            borderRadius: "1rem",
-            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-          }}
-        >
-          {tabs.map((tab, i) => (
-            <TabsTab
-              key={i}
-              value={tab.value}
-              leftSection={tab.icon}
-              style={{
-                fontWeight: 600,
-                fontSize: "0.9rem",
-                transition: "all 0.2s ease",
-              }}
-            >
-              {tab.label}
-            </TabsTab>
-          ))}
-        </TabsList>
+         <Box visibleFrom='md' pb={10}>
+                  <ScrollArea type="auto" offsetScrollbars>
+                    <TabsList
+                      p="sm"
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel
diff --git a/src/app/admin/(dashboard)/user&role/role/[id]/page.tsx b/src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
index 9aacd720..9d973491 100644
--- a/src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
@@ -79,7 +79,7 @@ function EditRole() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/user&role/role/create/page.tsx b/src/app/admin/(dashboard)/user&role/role/create/page.tsx
index 70033316..cbfbe801 100644
--- a/src/app/admin/(dashboard)/user&role/role/create/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/role/create/page.tsx
@@ -50,7 +50,7 @@ export default function CreateRole() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
diff --git a/src/app/admin/(dashboard)/user&role/role/page.tsx b/src/app/admin/(dashboard)/user&role/role/page.tsx
index d57ab4e7..cc8a174d 100644
--- a/src/app/admin/(dashboard)/user&role/role/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/role/page.tsx
@@ -1,7 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title
+} from '@mantine/core';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -10,9 +25,6 @@ import HeaderSearch from '../../_com/header';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import user from '../../_state/user/user-state';
 
-
-
-
 function Role() {
   const [search, setSearch] = useState('');
   return (
@@ -30,75 +42,107 @@ function Role() {
 }
 
 function ListRole({ search }: { search: string }) {
-  const listDataState = useProxy(user.roleState)
+  const listDataState = useProxy(user.roleState);
   const router = useRouter();
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   useEffect(() => {
-    listDataState.findMany.load()
-  }, [])
+    listDataState.findMany.load();
+  }, []);
 
   const handleDelete = () => {
     if (selectedId) {
-      listDataState.delete.delete(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      listDataState.findMany.load()
+      listDataState.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      listDataState.findMany.load();
     }
-  }
+  };
 
-  const filteredData = (listDataState.findMany.data || []).filter(item => {
+  const filteredData = (listDataState.findMany.data || []).filter((item) => {
     const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-    );
+    return item.name.toLowerCase().includes(keyword);
   });
 
   if (!listDataState.findMany.data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton h={500} />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Role</Title>
-          <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/user&role/role/create')}>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Role
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/user&role/role/create')}
+            fz={{ base: 'sm', md: 'md' }}
+            px={{ base: 'xs', md: 'sm' }}
+            py={{ base: 'xs', md: 'sm' }}
+          >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table striped withRowBorders style={{ minWidth: '700px' }}>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            striped
+            highlightOnHover
+            withRowBorders
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Role</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Hapus</TableTh>
+                <TableTh w="70%">Role</TableTh>
+                <TableTh w="15%">Edit</TableTh>
+                <TableTh w="15%">Hapus</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.map((item) => (
                 <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
+                  <TableTd fz="md" fw={500} lh={1.5}>
+                    {item.name}
+                  </TableTd>
                   <TableTd>
-                    <Button variant="light" color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
+                    <Button
+                      variant="light"
+                      color="green"
+                      onClick={() => router.push(`/admin/user&role/role/${item.id}`)}
+                      fz="sm"
+                      px="xs"
+                      py="xs"
+                    >
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
                   <TableTd>
                     <Button
                       variant="light"
-                      color='red'
+                      color="red"
                       disabled={listDataState.delete.loading}
                       onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}>
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }}
+                      fz="sm"
+                      px="xs"
+                      py="xs"
+                    >
                       <IconTrash size={20} />
                     </Button>
                   </TableTd>
@@ -107,6 +151,52 @@ function ListRole({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="md">
+            {filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="md" radius="sm">
+                <Stack gap="xs">
+                  <Box>
+                    <Text fz="xs" fw={600} lh={1.4}>
+                      Role
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.name}
+                    </Text>
+                  </Box>
+                  <Group justify="flex-end" gap="xs">
+                    <Button
+                      variant="light"
+                      color="green"
+                      onClick={() => router.push(`/admin/user&role/role/${item.id}`)}
+                      fz="xs"
+                      px="xs"
+                      py="xs"
+                    >
+                      <IconEdit size={18} />
+                    </Button>
+                    <Button
+                      variant="light"
+                      color="red"
+                      disabled={listDataState.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }}
+                      fz="xs"
+                      px="xs"
+                      py="xs"
+                    >
+                      <IconTrash size={18} />
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ))}
+          </Stack>
+        </Box>
       </Paper>
 
       {/* Modal Konfirmasi Hapus */}
@@ -117,7 +207,7 @@ function ListRole({ search }: { search: string }) {
         text='Apakah anda yakin ingin menghapus kategori Berita ini?'
       />
     </Box>
-  )
+  );
 }
 
-export default Role;
+export default Role;
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/user&role/user/page.tsx b/src/app/admin/(dashboard)/user&role/user/page.tsx
index 6147337d..0fa1ec94 100644
--- a/src/app/admin/(dashboard)/user&role/user/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/user/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Select, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconCheck, IconSearch, IconTrash, IconX } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -31,6 +31,7 @@ function ListUser({ search }: { search: string }) {
   const stateRole = useProxy(user.roleState);
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -51,29 +52,24 @@ function ListUser({ search }: { search: string }) {
 
   useShallowEffect(() => {
     stateRole.findMany.load();
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  // ✅ Helper function untuk nama role
   const getRoleName = (roleId: string) => {
-    // Cari dari data role yang sudah diload
     const role = stateRole.findMany.data.find((r) => r.id === roleId);
     return role?.name || "Unknown Role";
   };
 
-  // ✅ Handler untuk perubahan role dengan konfirmasi
   const handleRoleChange = async (
     userId: string,
     username: string,
     oldRoleId: string,
     newRoleId: string
   ) => {
-    // Skip jika sama
     if (oldRoleId === newRoleId) {
       return true;
     }
 
-    // ✅ Konfirmasi perubahan role
     const confirmed = window.confirm(
       `⚠️ PERINGATAN\n\n` +
       `Mengubah role untuk "${username}" akan:\n` +
@@ -84,20 +80,16 @@ function ListUser({ search }: { search: string }) {
     );
 
     if (!confirmed) {
-      // Reload data untuk reset dropdown ke nilai lama
       stateUser.findMany.load(page, 10, search);
       return false;
     }
 
-    // ✅ Submit update
     const success = await stateUser.update.submit({
       id: userId,
       roleId: newRoleId,
-
     });
 
     if (success) {
-      // ✅ Logout user jika sedang mengedit diri sendiri
       const currentUserId = authStore.user?.id;
       if (currentUserId === userId) {
         authStore.setUser(null);
@@ -107,14 +99,12 @@ function ListUser({ search }: { search: string }) {
         return;
       }
 
-      // Reload data
       stateUser.findMany.load(page, 10, search);
     }
 
     return success;
   };
 
-  // ✅ Handler untuk toggle isActive
   const handleToggleActive = async (userId: string, currentStatus: boolean) => {
     const success = await stateUser.update.submit({
       id: userId,
@@ -122,7 +112,6 @@ function ListUser({ search }: { search: string }) {
     });
 
     if (success) {
-      // ✅ Logout user jika sedang mengedit diri sendiri
       const currentUserId = authStore.user?.id;
       if (currentUserId === userId) {
         authStore.setUser(null);
@@ -132,7 +121,6 @@ function ListUser({ search }: { search: string }) {
         return;
       }
 
-      // Reload data
       stateUser.findMany.load(page, 10, search);
     }
   };
@@ -141,51 +129,71 @@ function ListUser({ search }: { search: string }) {
     return item.roleId !== "0" && item.roleId !== "1";
   });
 
-
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar User</Title>
+          <Title order={4} lh={1.2}>
+            Daftar User
+          </Title>
         </Group>
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Nama User</TableTh>
-                <TableTh style={{ width: '20%' }}>Nomor</TableTh>
-                <TableTh style={{ width: '20%' }}>Role</TableTh>
-                <TableTh style={{ width: '15%' }}>Aktif / Nonaktif</TableTh>
-                <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} ta="left">Nama User</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} ta="left">Nomor</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} ta="left">Role</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} ta="left">Aktif / Nonaktif</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} ta="left">Hapus</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
                         {item.username}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Text truncate fz="sm" c="dimmed">
+                    <TableTd>
+                      <Text fz="sm" fw={500} lh={1.5} c="gray.7">
                         {item.nomor}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
                       <Select
                         placeholder="Pilih role"
                         data={stateRole.findMany.data
-                          .filter(r => r.id !== "0" && r.id !== "1") // ❌ Sembunyikan SUPERADMIN dan DEVELOPER
+                          .filter(r => r.id !== "0" && r.id !== "1")
                           .map(r => ({
                             label: r.name,
                             value: r.id,
@@ -193,8 +201,6 @@ function ListUser({ search }: { search: string }) {
                         value={item.roleId}
                         onChange={(val) => {
                           if (!val) return;
-
-                          // ✅ Panggil handleRoleChange dengan konfirmasi
                           handleRoleChange(
                             item.id,
                             item.username,
@@ -206,10 +212,16 @@ function ListUser({ search }: { search: string }) {
                         clearable={false}
                         nothingFoundMessage="Role tidak ditemukan"
                         disabled={stateUser.update.loading}
+                        styles={{
+                          input: {
+                            fontSize: '1rem',
+                            fontWeight: 500,
+                            lineHeight: 1.5,
+                          }
+                        }}
                       />
                     </TableTd>
-
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd>
                       <Tooltip
                         label={item.isActive ? "Nonaktifkan user" : "Aktifkan user"}
                         withArrow
@@ -219,13 +231,13 @@ function ListUser({ search }: { search: string }) {
                           color={item.isActive ? "green" : "red"}
                           onClick={() => handleToggleActive(item.id, item.isActive)}
                           disabled={stateUser.update.loading}
+                          size="compact-sm"
                         >
-                          {item.isActive ? <IconCheck size={20} /> : <IconX size={20} />}
+                          {item.isActive ? <IconCheck size={18} /> : <IconX size={18} />}
                         </Button>
                       </Tooltip>
                     </TableTd>
-
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color='red'
@@ -234,8 +246,9 @@ function ListUser({ search }: { search: string }) {
                           setSelectedId(item.id);
                           setModalHapus(true);
                         }}
+                        size="compact-sm"
                       >
-                        <IconTrash size={20} />
+                        <IconTrash size={18} />
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -243,8 +256,10 @@ function ListUser({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={5}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada data user yang cocok</Text>
+                    <Center py={{ base: 'sm', md: 'md' }}>
+                      <Text c="gray.6" fz="sm" lh={1.5}>
+                        Tidak ada data user yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -252,6 +267,104 @@ function ListUser({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="md">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="md" radius="md">
+                  <Stack gap="xs">
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Nama User</Text>
+                      <Text fz="sm" fw={500} lh={1.5}>
+                        {item.username}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Nomor</Text>
+                      <Text fz="sm" fw={500} lh={1.5} c="gray.7">
+                        {item.nomor}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Role</Text>
+                      <Select
+                        placeholder="Pilih role"
+                        data={stateRole.findMany.data
+                          .filter(r => r.id !== "0" && r.id !== "1")
+                          .map(r => ({
+                            label: r.name,
+                            value: r.id,
+                          }))}
+                        value={item.roleId}
+                        onChange={(val) => {
+                          if (!val) return;
+                          handleRoleChange(
+                            item.id,
+                            item.username,
+                            item.roleId,
+                            val
+                          );
+                        }}
+                        searchable
+                        clearable={false}
+                        nothingFoundMessage="Role tidak ditemukan"
+                        disabled={stateUser.update.loading}
+                        size="xs"
+                        styles={{
+                          input: {
+                            fontSize: '0.875rem',
+                            fontWeight: 500,
+                            lineHeight: 1.5,
+                          }
+                        }}
+                      />
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Aktif / Nonaktif</Text>
+                      <Tooltip
+                        label={item.isActive ? "Nonaktifkan user" : "Aktifkan user"}
+                        withArrow
+                      >
+                        <Button
+                          variant="light"
+                          color={item.isActive ? "green" : "red"}
+                          onClick={() => handleToggleActive(item.id, item.isActive)}
+                          disabled={stateUser.update.loading}
+                          size="compact-xs"
+                        >
+                          {item.isActive ? <IconCheck size={16} /> : <IconX size={16} />}
+                        </Button>
+                      </Tooltip>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Hapus</Text>
+                      <Button
+                        variant="light"
+                        color='red'
+                        disabled={stateUser.deleteUser.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                        size="compact-xs"
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="sm">
+                <Text c="gray.6" fz="sm" lh={1.5}>
+                  Tidak ada data user yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>
@@ -263,13 +376,12 @@ function ListUser({ search }: { search: string }) {
           }}
           total={totalPages}
           mt="md"
-          mb="md"
+          mb={{ base: 'sm', md: 'md' }}
           color="blue"
           radius="md"
         />
       </Center>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
diff --git a/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts b/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts
index ea695268..455d1430 100644
--- a/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts
+++ b/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts
@@ -4,7 +4,11 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 export default async function apbdesFindMany(context: Context) {
-  const { page = "1", limit = "10", tahun } = context.query as {
+  const {
+    page = "1",
+    limit = "10",
+    tahun,
+  } = context.query as {
     page?: string;
     limit?: string;
     tahun?: string;
@@ -12,11 +16,24 @@ export default async function apbdesFindMany(context: Context) {
 
   const pageNumber = Math.max(1, parseInt(page, 10) || 1);
   const limitNumber = Math.min(100, Math.max(1, parseInt(limit, 10) || 10));
-
+  const search = (context.query.search as string) || "";
   const skip = (pageNumber - 1) * limitNumber;
 
   try {
     const where: any = { isActive: true };
+    
+    if (search) {
+      where.OR = [
+        { name: { contains: search, mode: "insensitive" } },
+        { deskripsi: { contains: search, mode: "insensitive" } },
+      ];
+
+      // Kalau search berupa angka, anggap itu tahun
+      if (!isNaN(Number(search))) {
+        where.OR.push({ tahun: Number(search) });
+      }
+    }
+
     if (tahun) {
       where.tahun = parseInt(tahun, 10);
     }
@@ -54,4 +71,4 @@ export default async function apbdesFindMany(context: Context) {
       message: "Gagal mengambil daftar APBDes",
     };
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts b/src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts
index 982e173c..891fccb7 100644
--- a/src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts
+++ b/src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts
@@ -72,9 +72,6 @@ async function pengajarFindMany(context: Context) {
       })
     ]);
 
-    console.log('Fetched pengajar data count:', data.length);
-    console.log('Total pengajar count:', total);
-
     return {
       success: true,
       message: "Success fetch pengajar with pagination",