diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index faa3a86d..7fdc01c0 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -184,10 +184,10 @@ model APBDes {
   id        String      @id @default(cuid())
   name      String      @unique
   jumlah    String
-  image     FileStorage @relation("APBDesImage", fields: [imageId], references: [id])
-  imageId   String
-  file      FileStorage @relation("APBDesFile", fields: [fileId], references: [id])
-  fileId    String
+  image     FileStorage? @relation("APBDesImage", fields: [imageId], references: [id])
+  imageId   String?
+  file      FileStorage? @relation("APBDesFile", fields: [fileId], references: [id])
+  fileId    String?
   createdAt DateTime    @default(now())
   updatedAt DateTime    @updatedAt
   deletedAt DateTime    @default(now())
diff --git a/src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx b/src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
index e57469c1..f9023bbb 100644
--- a/src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
@@ -195,7 +195,6 @@ function CreateAPBDes() {
             placeholder='Masukkan judul'
           />
            <TextInput
-           type='number'
             value={stateAPBDes.create.form.jumlah}
             onChange={(val) => {
               stateAPBDes.create.form.jumlah = val.target.value;
diff --git a/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx b/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
index f69f27fe..ab17c080 100644
--- a/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
@@ -77,7 +77,7 @@ function ListAPBDes({ search }: { search: string }) {
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                      <Text truncate="end" fz={"sm"}>Rp. {item.jumlah}</Text>
                     </TableTd>
                     <TableTd>
                       {item.file?.link ? (
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 482a8983..915dea96 100644
--- a/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts
+++ b/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts
@@ -17,7 +17,7 @@ async function apbdesFindMany(context: Context) {
         },
         skip,
         take: limit,
-        orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { name: "asc" }, // opsional, kalau mau urut berdasarkan waktu
       }),
       prisma.aPBDes.count({
         where: { isActive: true },
diff --git a/src/app/darmasaba/(tambahan)/apbdes/page.tsx b/src/app/darmasaba/(tambahan)/apbdes/page.tsx
index ae1993cf..5712a563 100644
--- a/src/app/darmasaba/(tambahan)/apbdes/page.tsx
+++ b/src/app/darmasaba/(tambahan)/apbdes/page.tsx
@@ -1,47 +1,33 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import colors from '@/con/colors';
-import { ActionIcon, BackgroundImage, Box, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, BackgroundImage, Box, Center, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
 import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+import { useProxy } from 'valtio/utils';
+import { useEffect, useState } from 'react';
+import { Link } from 'next-view-transitions';
 
-const data = [
-  {
-    id: 1,
-    title: "Pendapatan",
-    image: "/api/img/pendapatan.jpeg",
-    value: "Rp 495M"
-  },
-  {
-    id: 2,
-    title: "Belanja",
-    image: "/api/img/belanja.jpeg",
-    value: "Rp 395M"
-  },
-  {
-    id: 3,
-    title: "Pembiayaan",
-    image: "/api/img/pembiayaan.jpeg",
-    value: "Rp 295M"
-  },
-  {
-    id: 4,
-    title: "APBDesa 2025",
-    image: "/api/img/apb-des.jpg",
-    value: "Rp 500M"
-  },
-  {
-    id: 5,
-    title: "APBDesa 2024",
-    image: "/api/img/apb-des.jpg",
-    value: "Rp 450M"
-  },
-  {
-    id: 6,
-    title: "APBDesa 2023",
-    image: "/api/img/apb-des.jpg",
-    value: "Rp 400M"
-  },
-]
 function Page() {
+  const state = useProxy(apbdes);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await state.findMany.load();
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [])
+
+  const data = state.findMany.data || [];
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
       <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
@@ -65,53 +51,59 @@ function Page() {
           sm: 3,
         }}
       >
-        {data.map((v, k) => {
-          return (
-            <BackgroundImage
-              key={k}
-              src={v.image}
-              h={350}
-              radius={16}
-              pos={"relative"}
-            >
-              <Box
-                style={{
-                  borderRadius: 16,
-                  zIndex: 0
-                }}
-                pos={"absolute"}
-                w={"100%"}
-                h={"100%"}
-                bg={colors.trans.dark[2]}
-              />
-              <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                <Box p={"lg"}>
+        {loading ? (
+          <Center>
+            <Text fz={"2.4rem"}>Memuat Data...</Text>
+          </Center>
+        ) : (
+          data.map((v, k) => {
+            return (
+              <BackgroundImage
+                key={k}
+                src={v.image?.link || ''}
+                h={350}
+                radius={16}
+                pos={"relative"}
+              >
+                <Box
+                  style={{
+                    borderRadius: 16,
+                    zIndex: 0
+                  }}
+                  pos={"absolute"}
+                  w={"100%"}
+                  h={"100%"}
+                  bg={colors.trans.dark[2]}
+                />
+                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                  <Box p={"lg"}>
+                    <Text
+                      c={"white"}
+                      size={"1.5rem"}
+                      style={{
+                        textAlign: "center",
+                      }}>{v.name}</Text>
+                  </Box>
                   <Text
+                    fw={"bold"}
                     c={"white"}
-                    size={"1.5rem"}
+                    size={"3.5rem"}
                     style={{
                       textAlign: "center",
-                    }}>{v.title}</Text>
-                </Box>
-                <Text
-                  fw={"bold"}
-                  c={"white"}
-                  size={"3.5rem"}
-                  style={{
-                    textAlign: "center",
-                  }}>{v.value}</Text>
-                <Group justify="center">
-                  <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]}>
-                    <Flex gap={"md"}>
-                      <IconDownload size={20} />
-                      <Text fz={"sm"} c={"white"}>Download</Text>
-                    </Flex>
-                  </ActionIcon>
-                </Group>
-              </Stack>
-            </BackgroundImage>
-          )
-        })}
+                    }}>{v.jumlah}</Text>
+                  <Group justify="center">
+                    <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
+                      <Flex gap={"md"}>
+                        <IconDownload size={20} />
+                        <Text fz={"sm"} c={"white"}>Download</Text>
+                      </Flex>
+                    </ActionIcon>
+                  </Group>
+                </Stack>
+              </BackgroundImage>
+            )
+          })
+        )}
       </SimpleGrid>
     </Stack>
   );
diff --git a/src/app/darmasaba/_com/main-page/apbdes/index.tsx b/src/app/darmasaba/_com/main-page/apbdes/index.tsx
index f78572bd..f5087435 100644
--- a/src/app/darmasaba/_com/main-page/apbdes/index.tsx
+++ b/src/app/darmasaba/_com/main-page/apbdes/index.tsx
@@ -1,34 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
 import colors from '@/con/colors';
-import { ActionIcon, BackgroundImage, Box, Button, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
-const data = [
-  {
-    id: 1,
-    title: "Pendapatan",
-    image: "/api/img/pendapatan.jpeg",
-    value: "Rp 495M"
-  },
-  {
-    id: 2,
-    title: "Belanja",
-    image: "/api/img/belanja.jpeg",
-    value: "Rp 395M"
-  },
-  {
-    id: 3,
-    title: "Pembiayaan",
-    image: "/api/img/pembiayaan.jpeg",
-    value: "Rp 295M"
-  },
 
-]
 function Apbdes() {
+  const state = useProxy(apbdes);
+  const [loading, setLoading] = useState(false);
   const textHeading = {
     title: "APBDes",
     des: "Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab"
   }
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await state.findMany.load();
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [])
+
+  const data = (state.findMany.data || []).slice(0, 3);
   return (
     <>
       <Stack p={"sm"} gap={"4rem"} bg={colors.Bg}>
@@ -53,53 +56,59 @@ function Apbdes() {
             sm: 3,
           }}
         >
-          {data.map((v, k) => {
-            return (
-              <BackgroundImage
-                key={k}
-                src={v.image}
-                h={350}
-                radius={16}
-                pos={"relative"}
-              >
-                <Box
-                  style={{
-                    borderRadius: 16,
-                    zIndex: 0
-                  }}
-                  pos={"absolute"}
-                  w={"100%"}
-                  h={"100%"}
-                  bg={colors.trans.dark[2]}
-                />
-                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                  <Box p={"lg"}>
+          {loading ? (
+            <Center>
+              <Text fz={"2.4rem"}>Memuat Data...</Text>
+            </Center>
+          ) : (
+            data.map((v, k) => {
+              return (
+                <BackgroundImage
+                  key={k}
+                  src={v.image?.link || ''}
+                  h={350}
+                  radius={16}
+                  pos={"relative"}
+                >
+                  <Box
+                    style={{
+                      borderRadius: 16,
+                      zIndex: 0
+                    }}
+                    pos={"absolute"}
+                    w={"100%"}
+                    h={"100%"}
+                    bg={colors.trans.dark[2]}
+                  />
+                  <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                    <Box p={"lg"}>
+                      <Text
+                        c={"white"}
+                        size={"1.5rem"}
+                        style={{
+                          textAlign: "center",
+                        }}>{v.name}</Text>
+                    </Box>
                     <Text
+                      fw={"bold"}
                       c={"white"}
-                      size={"1.5rem"}
+                      size={"3.5rem"}
                       style={{
                         textAlign: "center",
-                      }}>{v.title}</Text>
-                  </Box>
-                  <Text
-                    fw={"bold"}
-                    c={"white"}
-                    size={"3.5rem"}
-                    style={{
-                      textAlign: "center",
-                    }}>{v.value}</Text>
-                  <Group justify="center">
-                  <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]}>
-                    <Flex gap={"md"}>
-                      <IconDownload size={20} />
-                      <Text fz={"sm"} c={"white"}>Download</Text>
-                    </Flex>
-                  </ActionIcon>
-                </Group>
-                </Stack>
-              </BackgroundImage>
-            )
-          })}
+                      }}>{v.jumlah}</Text>
+                    <Group justify="center">
+                      <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
+                        <Flex gap={"md"}>
+                          <IconDownload size={20} />
+                          <Text fz={"sm"} c={"white"}>Download</Text>
+                        </Flex>
+                      </ActionIcon>
+                    </Group>
+                  </Stack>
+                </BackgroundImage>
+              )
+            })
+          )}
         </SimpleGrid>
         <Group pb={80} justify='center'>
           <Button component={Link} href="/darmasaba/apbdes" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>