diff --git a/src/pages/scr/dashboard/pengaduan/list_page.tsx b/src/pages/scr/dashboard/pengaduan/list_page.tsx
index f694682..4f101b2 100644
--- a/src/pages/scr/dashboard/pengaduan/list_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/list_page.tsx
@@ -6,8 +6,10 @@ import {
   Container,
   Divider,
   Flex,
+  Grid,
   Group,
   Input,
+  Pagination,
   Stack,
   Tabs,
   Text,
@@ -124,22 +126,25 @@ function ListPengaduan({ status }: { status: StatusKey }) {
   const navigate = useNavigate();
   const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
-  const { data, mutate, isLoading } = useSwr("/", async () => {
-    const res = await apiFetch.api.pengaduan.list.get({
+  const { data, mutate, isLoading } = useSwr("/", async () =>
+    apiFetch.api.pengaduan.list.get({
       query: {
         status,
         search: value,
         take: "",
-        page: "",
+        page: page.toString(),
       },
-    });
+    })
+  );
 
-    return Array.isArray(res?.data) ? res.data : []; // ⬅ paksa return array
-  });
+  useShallowEffect(() => {
+    setPage(1);
+    mutate();
+  }, [status, value]);
 
   useShallowEffect(() => {
     mutate();
-  }, [status, value]);
+  }, [page]);
 
   useShallowEffect(() => {
     const unsubscribe = subscribe(state, () => mutate());
@@ -163,30 +168,39 @@ function ListPengaduan({ status }: { status: StatusKey }) {
       </Card>
     );
 
-  const list = data || [];
+  const list = data?.data?.data || [];
+  const total = data?.data?.total || 0;
+  const totalPage = data?.data?.totalPages || 1;
+  const pageSize = data?.data?.pageSize || 10;
+  const pageNow = data?.data?.page || 1;
+
 
   return (
     <Stack gap="xl">
-      <Group grow>
-        <Input
-          value={value}
-          placeholder="Cari pengaduan..."
-          onChange={(event) => setValue(event.currentTarget.value)}
-          leftSection={<IconSearch size={16} />}
-          rightSectionPointerEvents="all"
-          rightSection={
-            <CloseButton
-              aria-label="Clear input"
-              onClick={() => setValue("")}
-              style={{ display: value ? undefined : "none" }}
-            />
-          }
-        />
-        {/* <Group justify="flex-end">
-          <Text size="sm">Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)}</Text>
-          <Pagination total={Number(data?.data?.length)} value={page} onChange={setPage} withPages={false} />
-        </Group> */}
-      </Group>
+      <Grid>
+        <Grid.Col span={10}>
+          <Input
+            value={value}
+            placeholder="Cari pengaduan..."
+            onChange={(event) => setValue(event.currentTarget.value)}
+            leftSection={<IconSearch size={16} />}
+            rightSectionPointerEvents="all"
+            rightSection={
+              <CloseButton
+                aria-label="Clear input"
+                onClick={() => setValue("")}
+                style={{ display: value ? undefined : "none" }}
+              />
+            }
+          />
+        </Grid.Col>
+        <Grid.Col span={2}>
+          <Group justify="space-between" grow>
+            <Text size="sm">{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
+            <Pagination total={totalPage} value={page} onChange={setPage} withPages={false} />
+          </Group>
+        </Grid.Col>
+      </Grid>
       {list.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
@@ -217,14 +231,14 @@ function ListPengaduan({ status }: { status: StatusKey }) {
               <Flex align="center" justify="space-between">
                 <Flex direction={"column"}>
                   <Title order={3} c="gray.2">
-                    {v.title}
+                    {v.title.toString()}
                   </Title>
                   <Group>
                     <Title order={6} c="gray.5">
-                      #{v.noPengaduan}
+                      #{v.noPengaduan.toString()}
                     </Title>
                     <Text size="sm" c="dimmed">
-                      {v.updatedAt}
+                      {v.updatedAt.toString()}
                     </Text>
                   </Group>
                 </Flex>
@@ -257,7 +271,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
                       Tanggal Aduan
                     </Text>
                   </Group>
-                  <Text size="md">{v.createdAt}</Text>
+                  <Text size="md">{v.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}</Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
diff --git a/src/server/routes/pengaduan_route.ts b/src/server/routes/pengaduan_route.ts
index 0da9701..dfe7fad 100644
--- a/src/server/routes/pengaduan_route.ts
+++ b/src/server/routes/pengaduan_route.ts
@@ -646,6 +646,10 @@ const PengaduanRoute = new Elysia({
          }
       }
 
+      const totalData = await prisma.pengaduan.count({
+         where
+      });
+
       const data = await prisma.pengaduan.findMany({
          skip,
          take: !take ? 10 : Number(take),
@@ -683,12 +687,20 @@ const PengaduanRoute = new Elysia({
             detail: item.detail,
             status: item.status,
             location: item.location,
-            createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
+            createdAt: item.createdAt,
             updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt),
          }
       })
 
-      return dataFix
+      const dataReturn = {
+         data: dataFix,
+         total: totalData,
+         page: Number(page) || 1,
+         pageSize: !take ? 10 : Number(take),
+         totalPages: Math.ceil(totalData / (!take ? 10 : Number(take)))
+      }
+
+      return dataReturn
    }, {
       query: t.Object({
          take: t.String({ optional: true }),
@@ -790,8 +802,6 @@ const PengaduanRoute = new Elysia({
          description: "Tool untuk delete file Seafile",
       },
    })
-
-
    ;
 
 export default PengaduanRoute