diff --git a/src/app/(application)/(detail-division)/calender/page.tsx b/src/app/(application)/(detail-division)/calender/page.tsx
new file mode 100644
index 0000000..69da2f2
--- /dev/null
+++ b/src/app/(application)/(detail-division)/calender/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/(detail-division)/discussion/page.tsx b/src/app/(application)/(detail-division)/discussion/page.tsx
new file mode 100644
index 0000000..69da2f2
--- /dev/null
+++ b/src/app/(application)/(detail-division)/discussion/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/(detail-division)/documents/page.tsx b/src/app/(application)/(detail-division)/documents/page.tsx
new file mode 100644
index 0000000..69da2f2
--- /dev/null
+++ b/src/app/(application)/(detail-division)/documents/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/(detail-division)/task/page.tsx b/src/app/(application)/(detail-division)/task/page.tsx
new file mode 100644
index 0000000..69da2f2
--- /dev/null
+++ b/src/app/(application)/(detail-division)/task/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/division/[id]/page.tsx b/src/app/(application)/division/[id]/page.tsx
new file mode 100644
index 0000000..7493c94
--- /dev/null
+++ b/src/app/(application)/division/[id]/page.tsx
@@ -0,0 +1,10 @@
+import { ViewDetailDivision } from '@/module/division_new';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewDetailDivision />
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/division/create/page.tsx b/src/app/(application)/division/create/page.tsx
new file mode 100644
index 0000000..4ccb230
--- /dev/null
+++ b/src/app/(application)/division/create/page.tsx
@@ -0,0 +1,14 @@
+import { CreateAdminDivision, CreateUsers, ViewCreateDivision } from '@/module/division_new';
+import React from 'react';
+
+function Page({ searchParams }: { searchParams: { page: string } }) {
+  if (searchParams.page == "anggota")
+    return <CreateUsers />
+  if (searchParams.page == "pilih-admin")
+    return <CreateAdminDivision />
+  return (
+    <ViewCreateDivision/>
+  );
+}
+
+export default Page;
diff --git a/src/app/(application)/division/page.tsx b/src/app/(application)/division/page.tsx
index 6217ab5..21890dc 100644
--- a/src/app/(application)/division/page.tsx
+++ b/src/app/(application)/division/page.tsx
@@ -1,8 +1,13 @@
 
-import { ViewDivision } from '@/module/division_new';
+import { ViewFilter } from '@/module/_global';
+import { ViewCreateReport, ViewDivision } from '@/module/division_new';
 import React from 'react';
 
-function Page() {
+function Page({ searchParams }: { searchParams: { page: string } }) {
+  if (searchParams.page == "filter")
+    return <ViewFilter />
+  if (searchParams.page == "report")
+    return <ViewCreateReport />
   return (
     <ViewDivision/>
   );
diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts
index 38580ae..31b634f 100644
--- a/src/module/_global/fun/WARNA.ts
+++ b/src/module/_global/fun/WARNA.ts
@@ -2,5 +2,6 @@ export const WARNA = {
     bgWhite: "#F4F9FD",
     biruTua: "#19345E",
     bgIcon: "#384288",
-    borderOrange: "#FCAA4B"
+    borderOrange: "#FCAA4B",
+    bgHijauMuda: "#DCEED8"
 }
\ No newline at end of file
diff --git a/src/module/division_new/components/create_admin_division.tsx b/src/module/division_new/components/create_admin_division.tsx
new file mode 100644
index 0000000..2811208
--- /dev/null
+++ b/src/module/division_new/components/create_admin_division.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import NavbarAdminDivision from './ui/navbar_admin_division';
+
+export default function CreateAdminDivision() {
+  return (
+    <NavbarAdminDivision />
+  );
+}
+
diff --git a/src/module/division_new/components/create_division.tsx b/src/module/division_new/components/create_division.tsx
new file mode 100644
index 0000000..0409d7a
--- /dev/null
+++ b/src/module/division_new/components/create_division.tsx
@@ -0,0 +1,143 @@
+"use client";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import {
+    Avatar,
+    Box,
+    Button,
+    Flex,
+    Group,
+    Select,
+    Stack,
+    Text,
+    Textarea,
+    TextInput,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { IoIosArrowDropright } from "react-icons/io";
+const dataUser = [
+    {
+        id: 1,
+        img: "https://i.pravatar.cc/1000?img=3",
+        name: "Doni Setiawan",
+    },
+    {
+        id: 2,
+        img: "https://i.pravatar.cc/1000?img=10",
+        name: "Ilham Udin",
+    },
+    {
+        id: 3,
+        img: "https://i.pravatar.cc/1000?img=11",
+        name: "Didin Anang",
+    },
+    {
+        id: 4,
+        img: "https://i.pravatar.cc/1000?img=21",
+        name: "Angga Saputra",
+    },
+    {
+        id: 5,
+        img: "https://i.pravatar.cc/1000?img=32",
+        name: "Marcel Widianto",
+    },
+    {
+        id: 6,
+        img: "https://i.pravatar.cc/1000?img=37",
+        name: "Bagas Nusantara",
+    },
+];
+
+export default function CreateDivision() {
+    const router = useRouter();
+    return (
+        <Box>
+            <LayoutNavbarNew back="/division" title="Tambah Divisi" menu />
+            <Box p={20}>
+                <Stack>
+                    <Select
+                        placeholder="Grup"
+                        label="Grup"
+                        size="md"
+                        required
+                        radius={40}
+                    />
+                    <TextInput
+                        placeholder="Judul"
+                        label="Judul"
+                        size="md"
+                        required
+                        radius={40}
+                    />
+                    <Textarea placeholder="Deskripsi" label="Deskripsi" radius={10} />
+                    <Box onClick={() => router.push("/division/create?page=anggota")}>
+                        <Group
+                            justify="space-between"
+                            p={10}
+                            style={{
+                                border: `1px solid ${"#D6D8F6"}`,
+                                borderRadius: 10,
+                            }}
+                        >
+                            <Text>Tambah Anggota</Text>
+                            <IoIosArrowDropright size={25} />
+                        </Group>
+                    </Box>
+                    <Box pt={20}>
+                        <Group justify="space-between">
+                            <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
+                            <Text c={WARNA.biruTua}>Total 10 Anggota</Text>
+                        </Group>
+                        <Box pt={10}>
+                            <Box mb={20}>
+                                <Box
+                                    style={{
+                                        border: `1px solid ${"#C7D6E8"}`,
+                                        borderRadius: 10,
+                                    }}
+                                    px={20}
+                                    py={10}
+                                >
+                                    {dataUser.map((v, i) => {
+                                        return (
+                                            <Flex
+                                                justify={"space-between"}
+                                                align={"center"}
+                                                mt={20}
+                                                key={i}
+                                            >
+                                                <Group>
+                                                    <Avatar src={v.img} alt="it's me" size="lg" />
+                                                    <Box>
+                                                        <Text c={WARNA.biruTua} fw={"bold"}>
+                                                            {v.name}
+                                                        </Text>
+                                                    </Box>
+                                                </Group>
+                                                <Text c={WARNA.biruTua} fw={"bold"}>
+                                                    Anggota
+                                                </Text>
+                                            </Flex>
+                                        );
+                                    })}
+                                </Box>
+                            </Box>
+                        </Box>
+                    </Box>
+                    <Box mt="xl">
+                        <Button
+                            color="white"
+                            bg={WARNA.biruTua}
+                            size="lg"
+                            radius={30}
+                            fullWidth
+                            onClick={() => router.push("/division/create?page=pilih-admin")}
+                        >
+                            Simpan
+                        </Button>
+                    </Box>
+                </Stack>
+            </Box>
+        </Box>
+    );
+}
diff --git a/src/module/division_new/components/create_report.tsx b/src/module/division_new/components/create_report.tsx
new file mode 100644
index 0000000..432d043
--- /dev/null
+++ b/src/module/division_new/components/create_report.tsx
@@ -0,0 +1,35 @@
+"use client"
+import { LayoutNavbarNew } from '@/module/_global';
+import { Box, Select, Stack } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import React, { useState } from 'react';
+
+export default function CreateReport() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division" title="Report Divisi" menu />
+      <Box p={20}>
+        <Stack>
+          <Select
+            placeholder="Grup"
+            label="Grup"
+            size="md"
+            required
+            radius={10}
+          />
+          <DateInput
+            value={value}
+            onChange={setValue}
+            radius={10}
+            size="md"
+            required
+            label="Date input"
+            placeholder="Date input"
+          />
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
+
diff --git a/src/module/division_new/components/create_users.tsx b/src/module/division_new/components/create_users.tsx
new file mode 100644
index 0000000..55f4ecf
--- /dev/null
+++ b/src/module/division_new/components/create_users.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import NavbarCreateUsers from './ui/navbar_create_users';
+
+export default function CreateUsers() {
+  return (
+    <NavbarCreateUsers/>
+  );
+}
+
diff --git a/src/module/division_new/components/detail_division/carousel_division.tsx b/src/module/division_new/components/detail_division/carousel_division.tsx
new file mode 100644
index 0000000..315fb6b
--- /dev/null
+++ b/src/module/division_new/components/detail_division/carousel_division.tsx
@@ -0,0 +1,37 @@
+'use client'
+import React, { useRef } from 'react';
+import { Carousel } from '@mantine/carousel';
+import { WARNA } from '@/module/_global';
+import Autoplay from 'embla-carousel-autoplay';
+import { Flex, Text } from '@mantine/core';
+export default function CarouselDivision() {
+  const autoplay = useRef(Autoplay({ delay: 5000 }));
+  return (
+    <>
+      <Carousel
+        withIndicators
+        height={150}
+        plugins={[autoplay.current]}
+        onMouseEnter={autoplay.current.stop}
+        onMouseLeave={autoplay.current.reset}
+      >
+        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+          <Flex justify={'center'} h={"100%"} align={'center'}>
+            <Text c={"white"}>INFORMASI DARMASABA</Text>
+          </Flex>
+        </Carousel.Slide>
+        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+          <Flex justify={'center'} h={"100%"} align={'center'}>
+            <Text c={"white"}>INFORMASI DARMASABA</Text>
+          </Flex>
+        </Carousel.Slide>
+        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+          <Flex justify={'center'} h={"100%"} align={'center'}>
+            <Text c={"white"}>INFORMASI DARMASABA</Text>
+          </Flex>
+        </Carousel.Slide>
+      </Carousel>
+    </>
+  );
+}
+
diff --git a/src/module/division_new/components/detail_division/detail_division.tsx b/src/module/division_new/components/detail_division/detail_division.tsx
new file mode 100644
index 0000000..e6b29d1
--- /dev/null
+++ b/src/module/division_new/components/detail_division/detail_division.tsx
@@ -0,0 +1,20 @@
+import { Box, Stack } from '@mantine/core';
+import React from 'react';
+import CarouselDivision from './carousel_division';
+import { LayoutNavbarNew } from '@/module/_global';
+import FeatureDetailDivision from './feature_detail_division';
+
+export default function DetailDivision() {
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division" title={"Divisi kerohanian"} menu />
+      <Box p={20}>
+        <Stack>
+          <CarouselDivision />
+          <FeatureDetailDivision />
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
+
diff --git a/src/module/division_new/components/detail_division/feature_detail_division.tsx b/src/module/division_new/components/detail_division/feature_detail_division.tsx
new file mode 100644
index 0000000..34e5153
--- /dev/null
+++ b/src/module/division_new/components/detail_division/feature_detail_division.tsx
@@ -0,0 +1,131 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
+import React from 'react';
+import { HiMiniUserGroup } from 'react-icons/hi2';
+import { IoIosArrowRoundForward } from 'react-icons/io';
+import { LuClipboardEdit } from "react-icons/lu";
+import { GoCommentDiscussion } from "react-icons/go";
+import { BsFileEarmarkText } from "react-icons/bs";
+import { IoCalendarOutline } from "react-icons/io5";
+import { LuFileSignature } from "react-icons/lu";
+import { useRouter } from 'next/navigation';
+
+export default function FeatureDetailDivision() {
+  const router = useRouter()
+  return (
+    <Box pt={10}>
+      <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
+      <SimpleGrid
+        cols={{ base: 2, sm: 2, lg: 2 }}
+        style={{
+          alignItems: "center",
+          alignContent: "center"
+      }}
+      >
+        <Box bg={'white'} style={{
+          border: `1px solid ${WARNA.bgHijauMuda}`,
+          borderRadius: 10,
+          padding: 10
+        }} onClick={() => router.push('/task')}>
+          <Grid justify='center' align='center'>
+            <Grid.Col span={"auto"}>
+                <ActionIcon variant="filled"
+                  size={"xl"}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  color={WARNA.bgHijauMuda}
+                >
+                  <LuClipboardEdit size={25} color={WARNA.biruTua} />
+                </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={{base: 7, md: 9}}>
+              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
+              <Group justify='space-between' align='center'>
+                <Text fz={10} c={"gray"}>23 Tugas</Text>
+                  <IoIosArrowRoundForward size={20} color='gray' />
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Box>
+        <Box bg={'white'} style={{
+          border: `1px solid ${WARNA.bgHijauMuda}`,
+          borderRadius: 10,
+          padding: 10
+        }} onClick={() => router.push('/documents')}>
+          <Grid justify='center' align='center'>
+            <Grid.Col span={"auto"}>
+                <ActionIcon variant="filled"
+                  size={"xl"}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  color={WARNA.bgHijauMuda}
+                >
+                  <BsFileEarmarkText size={25} color={WARNA.biruTua} />
+                </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={{base: 7, md: 9}}>
+              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
+              <Group justify='space-between' align='center'>
+                <Text fz={10} c={"gray"}>23 Tugas</Text>
+                  <IoIosArrowRoundForward size={20} color='gray' />
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Box>
+        <Box bg={'white'} style={{
+          border: `1px solid ${WARNA.bgHijauMuda}`,
+          borderRadius: 10,
+          padding: 10
+        }} onClick={() => router.push('/discussion')}>
+          <Grid justify='center' align='center'>
+            <Grid.Col span={"auto"}>
+                <ActionIcon variant="filled"
+                  size={"xl"}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  color={WARNA.bgHijauMuda}
+                >
+                  <GoCommentDiscussion size={25} color={WARNA.biruTua} />
+                </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={{base: 7, md: 9}}>
+              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
+              <Group justify='space-between' align='center'>
+                <Text fz={10} c={"gray"}>23 Tugas</Text>
+                  <IoIosArrowRoundForward size={20} color='gray' />
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Box>
+        <Box bg={'white'} style={{
+          border: `1px solid ${WARNA.bgHijauMuda}`,
+          borderRadius: 10,
+          padding: 10
+        }} onClick={() => router.push('/calender')}>
+          <Grid justify='center' align='center'>
+            <Grid.Col span={"auto"}>
+                <ActionIcon variant="filled"
+                  size={"xl"}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  color={WARNA.bgHijauMuda}
+                >
+                  <IoCalendarOutline size={25} color={WARNA.biruTua} />
+                </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={{base: 7, md: 9}}>
+              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
+              <Group justify='space-between' align='center'>
+                <Text fz={10} c={"gray"}>23 Tugas</Text>
+                  <IoIosArrowRoundForward size={20} color='gray' />
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+
diff --git a/src/module/division_new/components/ui/drawer_division.tsx b/src/module/division_new/components/ui/drawer_division.tsx
index 4a194dd..dc2bf74 100644
--- a/src/module/division_new/components/ui/drawer_division.tsx
+++ b/src/module/division_new/components/ui/drawer_division.tsx
@@ -8,14 +8,14 @@ import { IoAddCircle } from 'react-icons/io5';
 import { TbReportAnalytics } from "react-icons/tb";
 
 export default function DrawerDivision() {
-    const router = useRouter()
+  const router = useRouter()
   return (
     <Box>
       <Stack pt={10}>
         <SimpleGrid
           cols={{ base: 3, sm: 3, lg: 3 }}
         >
-          <Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => router.push('/division/create')} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
@@ -23,7 +23,9 @@ export default function DrawerDivision() {
               <Text c={WARNA.biruTua}>Tambah Proyek</Text>
             </Box>
           </Flex>
-          <Flex onClick={() =>  ""} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => {
+            router.push('/division?page=filter')
+          }} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <HiOutlineFilter size={30} color={WARNA.biruTua} />
             </Box>
@@ -31,7 +33,9 @@ export default function DrawerDivision() {
               <Text c={WARNA.biruTua}>Filter</Text>
             </Box>
           </Flex>
-          <Flex onClick={() =>  ""} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => {
+            router.push('/division?page=report')
+          }} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <TbReportAnalytics size={30} color={WARNA.biruTua} />
             </Box>
diff --git a/src/module/division_new/components/ui/navbar_admin_division.tsx b/src/module/division_new/components/ui/navbar_admin_division.tsx
new file mode 100644
index 0000000..162b6bd
--- /dev/null
+++ b/src/module/division_new/components/ui/navbar_admin_division.tsx
@@ -0,0 +1,98 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Avatar, Box, Button, Checkbox, Divider, Flex, Group, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataUser = [
+  {
+    id: 1,
+    img: "https://i.pravatar.cc/1000?img=3",
+    name: "Doni Setiawan",
+  },
+  {
+    id: 2,
+    img: "https://i.pravatar.cc/1000?img=10",
+    name: "Ilham Udin",
+  },
+  {
+    id: 3,
+    img: "https://i.pravatar.cc/1000?img=11",
+    name: "Didin Anang",
+  },
+  {
+    id: 4,
+    img: "https://i.pravatar.cc/1000?img=21",
+    name: "Angga Saputra",
+  },
+  {
+    id: 5,
+    img: "https://i.pravatar.cc/1000?img=32",
+    name: "Marcel Widianto",
+  },
+  {
+    id: 6,
+    img: "https://i.pravatar.cc/1000?img=37",
+    name: "Bagas Nusantara",
+  },
+];
+
+export default function NavbarAdminDivision() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division/create" title="Pilih Anggota" menu />
+      <Box p={20}>
+        <TextInput
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: '#A3A3A3',
+              borderColor: '#A3A3A3',
+            },
+          }}
+          size="md"
+          radius={30}
+          leftSection={<HiMagnifyingGlass size={20} />}
+          placeholder="Pencarian"
+        />
+        <Box pt={20}>
+          {dataUser.map((v, i) => {
+            return (
+              <Box key={i}>
+                <Flex
+                  justify={"space-between"}
+                  align={"center"}
+                >
+                  <Group>
+                    <Avatar src={v.img} alt="it's me" size="lg" />
+                    <Box>
+                      <Text c={WARNA.biruTua} fw={"bold"}>
+                        {v.name}
+                      </Text>
+                    </Box>
+                  </Group>
+                  <Checkbox />
+                </Flex>
+                <Divider my={20} />
+              </Box>
+            );
+          })}
+        </Box>
+        <Box mt="xl">
+          <Button
+            color="white"
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => router.push("/division")}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/module/division_new/components/ui/navbar_create_users.tsx b/src/module/division_new/components/ui/navbar_create_users.tsx
new file mode 100644
index 0000000..6aeeaad
--- /dev/null
+++ b/src/module/division_new/components/ui/navbar_create_users.tsx
@@ -0,0 +1,120 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Avatar, Box, Button, Center, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { BsFiletypeCsv } from 'react-icons/bs';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataUser = [
+  {
+    id: 1,
+    img: "https://i.pravatar.cc/1000?img=3",
+    name: "Doni Setiawan",
+  },
+  {
+    id: 2,
+    img: "https://i.pravatar.cc/1000?img=10",
+    name: "Ilham Udin",
+  },
+  {
+    id: 3,
+    img: "https://i.pravatar.cc/1000?img=11",
+    name: "Didin Anang",
+  },
+  {
+    id: 4,
+    img: "https://i.pravatar.cc/1000?img=21",
+    name: "Angga Saputra",
+  },
+  {
+    id: 5,
+    img: "https://i.pravatar.cc/1000?img=32",
+    name: "Marcel Widianto",
+  },
+  {
+    id: 6,
+    img: "https://i.pravatar.cc/1000?img=37",
+    name: "Bagas Nusantara",
+  },
+];
+
+
+export default function NavbarCreateUsers() {
+  const router = useRouter()
+  const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division/create" title="Pilih Anggota" menu />
+      <Box p={20}>
+        <Stack>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: '#A3A3A3',
+                borderColor: '#A3A3A3',
+              },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+          />
+          <Box pt={10}>
+            <SimpleGrid
+              cols={{ base: 2, sm: 2, lg: 2 }}
+              spacing={{ base: 20, sm: "xl" }}
+              verticalSpacing={{ base: "md", sm: "xl" }}
+            >
+              {dataUser.map((v, index) => {
+                const isSelected = selectedFiles[index];
+                return (
+                  <Box key={index} mb={20}>
+                    <Box
+
+                      style={{
+                        border: `${isSelected ? "2px solid #FFC107" : `1px solid ${WARNA.biruTua}`}`,
+                        borderRadius: 20,
+                      }}
+                      py={10}
+                      onClick={() => handleFileClick(index)}
+                    >
+                      <Center>
+                        <Avatar src={v.img} alt="it's me" size="xl" />
+                      </Center>
+                      <Text mt={20} ta="center">
+                        {v.name}
+                      </Text>
+                    </Box>
+                  </Box>
+                );
+              })}
+            </SimpleGrid>
+          </Box>
+        </Stack>
+        <Box mt="xl">
+          <Button
+            color="white"
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => router.push("/division/create")}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
diff --git a/src/module/division_new/components/ui/navbar_division.tsx b/src/module/division_new/components/ui/navbar_division.tsx
index b45b26d..5088c5b 100644
--- a/src/module/division_new/components/ui/navbar_division.tsx
+++ b/src/module/division_new/components/ui/navbar_division.tsx
@@ -96,7 +96,7 @@ export default function NavbarDivision() {
             {dataDivisi.map((v, i) => {
               return (
                 <Box key={i}>
-                  <Group justify="space-between" mb={10} onClick={() => router.push(``)}>
+                  <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
                     <Group>
                       <Center>
                         <ActionIcon
@@ -126,7 +126,7 @@ export default function NavbarDivision() {
             {dataDivisi.map((v, i) => {
               return (
                 <Box key={i} mb={20}>
-                  <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
+                  <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
                     <Card.Section>
                       <Box h={120} bg={WARNA.biruTua}>
                         <Flex justify={'center'} align={'center'} h={"100%"}>
diff --git a/src/module/division_new/index.ts b/src/module/division_new/index.ts
index 636d2ff..36178f2 100644
--- a/src/module/division_new/index.ts
+++ b/src/module/division_new/index.ts
@@ -1,3 +1,13 @@
+import CreateAdminDivision from "./components/create_admin_division";
+import CreateUsers from "./components/create_users";
+import ViewCreateDivision from "./view/view_create_division";
+import ViewCreateReport from "./view/view_create_report";
+import ViewDetailDivision from "./view/view_detail_division";
 import ViewDivision from "./view/view_division";
 
-export { ViewDivision }
\ No newline at end of file
+export { ViewDivision }
+export { ViewCreateDivision }
+export { CreateUsers }
+export { CreateAdminDivision }
+export { ViewCreateReport }
+export { ViewDetailDivision }
\ No newline at end of file
diff --git a/src/module/division_new/view/view_create_division.tsx b/src/module/division_new/view/view_create_division.tsx
new file mode 100644
index 0000000..21db4cc
--- /dev/null
+++ b/src/module/division_new/view/view_create_division.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import CreateDivision from '../components/create_division';
+
+export default function ViewCreateDivision() {
+  return (
+    <CreateDivision/>
+  );
+}
diff --git a/src/module/division_new/view/view_create_report.tsx b/src/module/division_new/view/view_create_report.tsx
new file mode 100644
index 0000000..9ae381b
--- /dev/null
+++ b/src/module/division_new/view/view_create_report.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import CreateReport from '../components/create_report';
+
+export default function ViewCreateReport() {
+  return (
+    <CreateReport/>
+  );
+}
+
diff --git a/src/module/division_new/view/view_detail_division.tsx b/src/module/division_new/view/view_detail_division.tsx
new file mode 100644
index 0000000..fe46056
--- /dev/null
+++ b/src/module/division_new/view/view_detail_division.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import DetailDivision from '../components/detail_division/detail_division';
+
+export default function ViewDetailDivision() {
+  return (
+    <DetailDivision />
+  );
+}
+