diff --git a/src/app/(application)/(detail-division)/document/page.tsx b/src/app/(application)/(detail-division)/document/page.tsx
index ad59b92..e0730cc 100644
--- a/src/app/(application)/(detail-division)/document/page.tsx
+++ b/src/app/(application)/(detail-division)/document/page.tsx
@@ -1,7 +1,11 @@
 import { ViewDocumentDivision } from '@/module/division_new';
+import ListDocumentsDivision from '@/module/division_new/_division_fitur/document/components/list_documents_division';
 import React from 'react';
 
-function Page() {
+function Page({ searchParams }: { searchParams: any }) {
+  if (searchParams.page == "list-document")
+    return <ListDocumentsDivision />;
+  
   return (
     <ViewDocumentDivision/>
   );
diff --git a/src/app/(application)/(detail-division)/task/create/page.tsx b/src/app/(application)/(detail-division)/task/create/page.tsx
index 973c6f4..e5660a0 100644
--- a/src/app/(application)/(detail-division)/task/create/page.tsx
+++ b/src/app/(application)/(detail-division)/task/create/page.tsx
@@ -12,4 +12,5 @@ function Page({ searchParams }: { searchParams: any }) {
    return <ViewCreateTaskDivision searchParams={searchParams} />
 }
 
-export default Page
\ No newline at end of file
+export default Page
+// onClick={() => router.push('/document?page=list-document')}
\ No newline at end of file
diff --git a/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx b/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
index 0f719f5..a91f975 100644
--- a/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
+++ b/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
@@ -1,89 +1,80 @@
-import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
-import React from 'react';
+"use client";
+import { LayoutNavbarNew } from "@/module/_global";
+import {
+  ActionIcon,
+  Box,
+  Checkbox,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Text,
+} from "@mantine/core";
+import React from "react";
 import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
 
 const dataDocuments = [
   {
-    id: 1,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
-  },
-  {
-    id: 2,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
+    id: 3,
+    name: "Berkas Kerja",
+    date: "18/06/2024 14.00 PM",
+    icon: <FcDocument size={60} />,
   },
   {
     id: 3,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
+    name: "Berkas Kerja",
+    date: "18/06/2024 14.00 PM",
+    icon: <FcDocument size={60} />,
   },
   {
     id: 3,
-    name: 'Berkas Kerja',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcDocument size={60} />
+    name: "Image Kegiatan",
+    date: "18/06/2024 14.00 PM",
+    icon: <FcImageFile size={60} />,
   },
   {
     id: 3,
-    name: 'Berkas Kerja',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcDocument size={60} />
+    name: "Image Pelaksanaan",
+    date: "18/06/2024 14.00 PM",
+    icon: <FcImageFile size={60} />,
   },
-  {
-    id: 3,
-    name: 'Image Kegiatan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-  {
-    id: 3,
-    name: 'Image Pelaksanaan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-]
+];
 
 export default function ListDocumentsDivision() {
   return (
     <Box>
+      <LayoutNavbarNew
+        back=""
+        title="Divisi kerohanian"
+        menu
+      />
       <Box p={20}>
         {dataDocuments.map((v, i) => {
           return (
             <Box key={i}>
               <Box mt={10} mb={10}>
-                <Grid align='center'>
+                <Grid align="center">
                   <Grid.Col span={10}>
                     <Group gap={20}>
-                      <Box>
-                        {v.icon}
-                      </Box>
-                      <Flex direction={'column'}>
+                      <Box>{v.icon}</Box>
+                      <Flex direction={"column"}>
                         <Text>{v.name}</Text>
                         <Text fz={10}>{v.date}</Text>
                       </Flex>
                     </Group>
                   </Grid.Col>
                   <Grid.Col span={2}>
-                    <Group justify='flex-end'>
-                      <Checkbox
-                        color="teal"
-                        radius="lg"
-                        size="md"
-                      />
+                    <Group justify="flex-end">
+                      <Checkbox color="teal" radius="lg" size="md" />
                     </Group>
                   </Grid.Col>
                 </Grid>
               </Box>
               <Divider size="xs" />
             </Box>
-          )
+          );
         })}
       </Box>
     </Box>
   );
 }
-
diff --git a/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx b/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
index a6a42cd..52100a6 100644
--- a/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
+++ b/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
@@ -14,6 +14,7 @@ import { MdOutlineMoreHoriz } from 'react-icons/md';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import toast from 'react-hot-toast';
 import DrawerMore from './drawer_more';
+import { useRouter } from 'next/navigation';
 
 const dataDocuments = [
   {
@@ -68,6 +69,7 @@ const dataDocuments = [
 
 export default function NavbarDocumentDivision() {
   const [isChecked, setIsChecked] = useState(false);
+  const router = useRouter()
 
   const handleCheckboxChange = () => {
     setIsChecked(!isChecked);
@@ -147,8 +149,8 @@ export default function NavbarDocumentDivision() {
             return (
               <Box key={i}>
                 <Box mt={10} mb={10}>
-                  <Grid align='center'>
-                    <Grid.Col span={10}>
+                  <Grid align='center' >
+                    <Grid.Col span={10} onClick={() => router.push('/document?page=list-document')}>
                       <Group gap={20}>
                         <Box>
                           {v.icon}
diff --git a/src/module/division_new/components/detail_division/list_discussion.tsx b/src/module/division_new/components/detail_division/list_discussion.tsx
index f4485dd..2f8926b 100644
--- a/src/module/division_new/components/detail_division/list_discussion.tsx
+++ b/src/module/division_new/components/detail_division/list_discussion.tsx
@@ -1,76 +1,88 @@
-import { WARNA } from "@/module/_global"
-import { Box, Group, Text } from "@mantine/core"
-import { CiUser, CiClock2 } from "react-icons/ci"
-import { GoDiscussionClosed } from "react-icons/go"
-
+"use client"
+import { WARNA } from "@/module/_global";
+import { Box, Group, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { CiUser, CiClock2 } from "react-icons/ci";
+import { GoDiscussionClosed } from "react-icons/go";
 
 const dataDiskusi = [
-   {
-       id: 1,
-       judul: 'Mengatasi Limbah Makanan ',
-       user: 'Fibra Marcell',
-       date: '21 Juni 2024'
-   },
-   {
-       id: 2,
-       judul: 'Pentingnya Menjaga Kelestarian Hutan ',
-       user: 'Bayu Tegar',
-       date: '15 Juni 2024'
-   },
-   {
-       id: 3,
-       judul: 'Mengatasi Limbah Industri ',
-       user: 'Nian Putri',
-       date: '11 Mei 2024'
-   },
-   {
-       id: 4,
-       judul: 'Manfaat Sampah Plastik',
-       user: 'Budi Prasetyo',
-       date: '10 Mei 2024'
-   },
-]
+  {
+    id: 1,
+    judul: "Mengatasi Limbah Makanan ",
+    user: "Fibra Marcell",
+    date: "21 Juni 2024",
+  },
+  {
+    id: 2,
+    judul: "Pentingnya Menjaga Kelestarian Hutan ",
+    user: "Bayu Tegar",
+    date: "15 Juni 2024",
+  },
+  {
+    id: 3,
+    judul: "Mengatasi Limbah Industri ",
+    user: "Nian Putri",
+    date: "11 Mei 2024",
+  },
+  {
+    id: 4,
+    judul: "Manfaat Sampah Plastik",
+    user: "Budi Prasetyo",
+    date: "10 Mei 2024",
+  },
+];
 
 export default function ListDiscussionOnDetailDivision() {
-   return (
-      <>
-         <Box pt={10}>
-            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi Terbaru</Text>
-            <Box bg={"white"} style={{
-               borderRadius: 10,
-               border: `1px solid ${"#D6D8F6"}`,
-               padding: 20
-            }}>
-               {
-                  dataDiskusi.map((v, i) => {
-                     return (
-                        <Box key={i} style={{
-                           borderRadius: 10,
-                           border: `1px solid ${"#D6D8F6"}`,
-                           padding: 10
-                        }} mb={10}>
-                           <Group>
-                              <GoDiscussionClosed size={25} />
-                              <Box w={{ base: 230, md: 400 }}>
-                                 <Text fw={'bold'} truncate="end">{v.judul}</Text>
-                              </Box>
-                           </Group>
-                           <Group justify="space-between" mt={20} c={'#8C8C8C'}>
-                              <Group gap={5} align="center">
-                                 <CiUser size={18} />
-                                 <Text fz={13}>{v.user}</Text>
-                              </Group >
-                              <Group gap={5} align="center">
-                                 <CiClock2 size={18} />
-                                 <Text fz={13}>{v.date}</Text>
-                              </Group>
-                           </Group>
-                        </Box>
-                     )
-                  })
-               }
-            </Box>
-         </Box>
-      </>
-   )
-}
\ No newline at end of file
+  const router = useRouter();
+  return (
+    <>
+      <Box pt={10}>
+        <Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
+          Diskusi Terbaru
+        </Text>
+        <Box
+          bg={"white"}
+          style={{
+            borderRadius: 10,
+            border: `1px solid ${"#D6D8F6"}`,
+            padding: 20,
+          }}
+        >
+          {dataDiskusi.map((v, i) => {
+            return (
+              <Box
+                key={i}
+                style={{
+                  borderRadius: 10,
+                  border: `1px solid ${"#D6D8F6"}`,
+                  padding: 10,
+                }}
+                mb={10}
+                onClick={() => router.push(`/discussion/${v.id}`)}
+              >
+                <Group>
+                  <GoDiscussionClosed size={25} />
+                  <Box w={{ base: 230, md: 400 }}>
+                    <Text fw={"bold"} truncate="end">
+                      {v.judul}
+                    </Text>
+                  </Box>
+                </Group>
+                <Group justify="space-between" mt={20} c={"#8C8C8C"}>
+                  <Group gap={5} align="center">
+                    <CiUser size={18} />
+                    <Text fz={13}>{v.user}</Text>
+                  </Group>
+                  <Group gap={5} align="center">
+                    <CiClock2 size={18} />
+                    <Text fz={13}>{v.date}</Text>
+                  </Group>
+                </Group>
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+    </>
+  );
+}
diff --git a/src/module/division_new/components/detail_division/list_document.tsx b/src/module/division_new/components/detail_division/list_document.tsx
index c1456cc..4498727 100644
--- a/src/module/division_new/components/detail_division/list_document.tsx
+++ b/src/module/division_new/components/detail_division/list_document.tsx
@@ -3,6 +3,7 @@ import { WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Box, Image, Text, Center, Paper, Stack, UnstyledButton } from "@mantine/core";
 import * as ICON from '../../../division/lib/file_icon'
+import { useRouter } from "next/navigation";
 
 const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
 
@@ -41,13 +42,14 @@ const listDocument = [
 ]
 
 export default function ListDocumentOnDetailDivision() {
+   const router = useRouter()
    return (
       <Box pt={10}>
          <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {
                listDocument.map((v) => <Carousel.Slide key={v.id}>
-                  <UnstyledButton>
+                  <UnstyledButton onClick={() => router.push(`/document`)}>
                      <Stack gap={0}>
                         <Paper withBorder shadow="sm" radius={12} >
                            <Center p={"md"}>
diff --git a/src/module/division_new/components/detail_division/list_task.tsx b/src/module/division_new/components/detail_division/list_task.tsx
index ddcf318..c8e8cfd 100644
--- a/src/module/division_new/components/detail_division/list_task.tsx
+++ b/src/module/division_new/components/detail_division/list_task.tsx
@@ -2,6 +2,7 @@
 import { WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Avatar, Box, Group, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
 import { CiClock2 } from "react-icons/ci";
 import { MdAccountCircle } from "react-icons/md";
 
@@ -33,13 +34,14 @@ const dataTask = [
 ]
 
 export default function ListTaskOnDetailDivision() {
+   const router = useRouter()
    return (
       <Box pt={10}>
          <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {dataTask.map((v, i) =>
                <Carousel.Slide key={v.id}>
-                  <Box p={20} w={{ base: 300, md: 400 }} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
+                  <Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
                      <Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
                      <Group justify="space-between" mt={20} c={'#aeaeae'}>
                         <Group gap={5} align="center">