diff --git a/api.http b/api.http
new file mode 100644
index 0000000..a3ab361
--- /dev/null
+++ b/api.http
@@ -0,0 +1,8 @@
+###
+POST http://localhost:3000/api/auth/login/ HTTP/1.1
+Content-Type: application/json
+{
+    "id": "devLukman",
+    "phone": "6287701790942",
+    "email": "lukman@bip.com"
+}
\ No newline at end of file
diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
new file mode 100644
index 0000000..2432ae7
--- /dev/null
+++ b/src/app/api/auth/login/route.ts
@@ -0,0 +1,25 @@
+import prisma from "@/module/_global/bin/prisma";
+import { Login } from "@/types/auth/login";
+import { NextRequest } from "next/server";
+
+export async function POST(req: NextRequest) {
+  const { email }: Login = await req.json();
+  const user = await prisma.user.findUnique({
+    where: { email, isActive: true },
+    select: { id: true, phone: true },
+  });
+
+  if (!user) {
+    return Response.json({
+      success: false,
+      message: "Email atau Password salah",
+    });
+  }
+
+  return Response.json({
+    success: true,
+    message: "Login Berhasil",
+    phone: user.phone,
+    id: user.id,
+  });
+}
diff --git a/src/module/_global/bin/prisma.ts b/src/module/_global/bin/prisma.ts
new file mode 100644
index 0000000..b9e55ff
--- /dev/null
+++ b/src/module/_global/bin/prisma.ts
@@ -0,0 +1,17 @@
+import { PrismaClient } from '@prisma/client'
+
+const prismaClientSingleton = () => {
+    return new PrismaClient()
+}
+
+type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
+
+const globalForPrisma = globalThis as unknown as {
+    prisma: PrismaClientSingleton | undefined
+}
+
+const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
+
+export default prisma
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
\ No newline at end of file
diff --git a/src/module/division_new/_division_fitur/discussion/component/drawer_list_discussion.tsx b/src/module/division_new/_division_fitur/discussion/component/drawer_list_discussion.tsx
index 87c6d5f..767fae0 100644
--- a/src/module/division_new/_division_fitur/discussion/component/drawer_list_discussion.tsx
+++ b/src/module/division_new/_division_fitur/discussion/component/drawer_list_discussion.tsx
@@ -7,7 +7,7 @@ export default function DrawerListDiscussion() {
       <Box>
          <Stack pt={10}>
             <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
+               cols={{ base: 2, sm: 2, lg: 3 }}
             >
                <Flex onClick={() => window.location.href = "/discussion/create"} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
diff --git a/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx b/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
index 8451623..d1354f2 100644
--- a/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
+++ b/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
@@ -18,27 +18,21 @@ export default function FormCreateDiscussion() {
    return (
       <Box>
          <Box p={20}>
-            <Grid gutter={2}>
-               <Grid.Col span={"auto"}>
-                  <Center>
-                     <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
-                  </Center>
-               </Grid.Col>
-               <Grid.Col span={10}>
-                  <Box>
-                     <Textarea
-                        placeholder="Tuliskan apa yang ingin anda diskusikan"
-                        w={"100%"}
-                        styles={{
-                           input: {
-                              border: 'none',
-                              backgroundColor: 'transparent',
-                           }
-                        }}
-                     />
-                  </Box>
-               </Grid.Col>
-            </Grid>
+            <Group>
+               <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               <Box>
+                  <Textarea
+                     placeholder="Tuliskan apa yang ingin anda diskusikan"
+                     w={"100%"}
+                     styles={{
+                        input: {
+                           border: 'none',
+                           backgroundColor: 'transparent',
+                        }
+                     }}
+                  />
+               </Box>
+            </Group>
             <Box mt="xl">
                <Button
                   color="white"
diff --git a/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx b/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
index e3c7687..30d18cb 100644
--- a/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
+++ b/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
@@ -12,7 +12,7 @@ export default function TabsDivisionTask() {
    return (
       <Box p={20}>
          <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="segera">
-            <Tabs.List bg={"white"} style={{
+            <Tabs.List grow bg={"white"} style={{
                border: `1px solid ${"#EDEDED"}`,
                padding: 5,
                borderRadius: 100
diff --git a/src/module/project/components/project_cencel.tsx b/src/module/project/components/project_cencel.tsx
new file mode 100644
index 0000000..1eb92ed
--- /dev/null
+++ b/src/module/project/components/project_cencel.tsx
@@ -0,0 +1,157 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
+import { MdAccountCircle } from 'react-icons/md';
+import { RiCircleFill } from 'react-icons/ri';
+
+const dataProject = [
+  {
+    id: 1,
+    title: 'Project 1',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT BATAL',
+  },
+  {
+    id: 2,
+    title: 'Project 2',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT BATAL',
+  },
+  {
+    id: 3,
+    title: 'Project 3',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT BATAL',
+  },
+  {
+    id: 4,
+    title: 'Project 4',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT BATAL',
+  },
+  {
+    id: 5,
+    title: 'Project 5',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT BATAL',
+  },
+  {
+    id: 6,
+    title: 'Project 6',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT BATAL',
+  },
+]
+export default function ProjectCencel() {
+  const [isList, setIsList] = useState(false)
+  const router = useRouter()
+
+  const handleList = () => {
+    setIsList(!isList)
+  }
+  return (
+    <Box mt={20}>
+        <Grid justify='center' align='center'>
+          <Grid.Col span={10}>
+            <TextInput
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: '#A3A3A3',
+                  borderColor: '#A3A3A3',
+                },
+              }}
+              size="md"
+              radius={30}
+              leftSection={<HiMagnifyingGlass size={20} />}
+              placeholder="Pencarian"
+            />
+          </Grid.Col>
+          <Grid.Col span={'auto'}>
+            <Flex justify={'center'}>
+              {isList ? (
+                <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+              ) : (
+                <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+              )}
+            </Flex>
+          </Grid.Col>
+        </Grid>
+        <Box pt={20}>
+          <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+            <Flex justify={'center'} align={'center'} h={'100%'}>
+              <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
+            </Flex>
+          </Box>
+          {isList ? (
+            <Box pt={20}>
+              {dataProject.map((v, i) => {
+                return (
+                  <Box key={i}>
+                    <Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}>
+                      <Group>
+                        <Center>
+                          <ActionIcon
+                            variant="gradient"
+                            size={50}
+                            aria-label="Gradient action icon"
+                            radius={100}
+                            gradient={{
+                              from: '#DFDA7C',
+                              to: '#F2AF46',
+                              deg: 174
+                            }}
+                          >
+                            <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
+                          </ActionIcon>
+                        </Center>
+                        <Text>{v.title}</Text>
+                      </Group>
+                      <Box>
+                        <RiCircleFill size={12} color={'#B80C29'} />
+                      </Box>
+                    </Group>
+                    <Divider my="sm" />
+                  </Box>
+                );
+              })}
+            </Box>
+          ) : (
+            <Box pt={20}>
+              {dataProject.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.Section>
+                        <Box h={120} bg={WARNA.biruTua}>
+                          <Flex justify={'center'} align={'center'} h={"100%"}>
+                            <Title order={3} c={"white"}>{v.title}</Title>
+                          </Flex>
+                        </Box>
+                      </Card.Section>
+                      <Box pt={10}>
+                        <Text>{v.description}</Text>
+                        <Group align='center' pt={10} justify='space-between'>
+                          <Badge color={'#B80C29'}>{v.status}</Badge>
+                          <Avatar.Group>
+                            <Avatar>
+                              <MdAccountCircle size={32} color={WARNA.biruTua} />
+                            </Avatar>
+                            <Avatar>+5</Avatar>
+                          </Avatar.Group>
+                        </Group>
+                      </Box>
+                    </Card>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+        </Box>
+      </Box >
+  );
+}
diff --git a/src/module/project/components/project_done.tsx b/src/module/project/components/project_done.tsx
new file mode 100644
index 0000000..70075be
--- /dev/null
+++ b/src/module/project/components/project_done.tsx
@@ -0,0 +1,157 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
+import { MdAccountCircle } from 'react-icons/md';
+import { RiCircleFill } from 'react-icons/ri';
+
+const dataProject = [
+  {
+    id: 1,
+    title: 'Project 1',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT SELESAI',
+  },
+  {
+    id: 2,
+    title: 'Project 2',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT SELESAI',
+  },
+  {
+    id: 3,
+    title: 'Project 3',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT SELESAI',
+  },
+  {
+    id: 4,
+    title: 'Project 4',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT SELESAI',
+  },
+  {
+    id: 5,
+    title: 'Project 5',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT SELESAI',
+  },
+  {
+    id: 6,
+    title: 'Project 6',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT SELESAI',
+  },
+]
+export default function ProjectDone() {
+  const [isList, setIsList] = useState(false)
+  const router = useRouter()
+
+  const handleList = () => {
+    setIsList(!isList)
+  }
+  return (
+    <Box mt={20}>
+        <Grid justify='center' align='center'>
+          <Grid.Col span={10}>
+            <TextInput
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: '#A3A3A3',
+                  borderColor: '#A3A3A3',
+                },
+              }}
+              size="md"
+              radius={30}
+              leftSection={<HiMagnifyingGlass size={20} />}
+              placeholder="Pencarian"
+            />
+          </Grid.Col>
+          <Grid.Col span={'auto'}>
+            <Flex justify={'center'}>
+              {isList ? (
+                <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+              ) : (
+                <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+              )}
+            </Flex>
+          </Grid.Col>
+        </Grid>
+        <Box pt={20}>
+          <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+            <Flex justify={'center'} align={'center'} h={'100%'}>
+              <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
+            </Flex>
+          </Box>
+          {isList ? (
+            <Box pt={20}>
+              {dataProject.map((v, i) => {
+                return (
+                  <Box key={i}>
+                    <Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}>
+                      <Group>
+                        <Center>
+                          <ActionIcon
+                            variant="gradient"
+                            size={50}
+                            aria-label="Gradient action icon"
+                            radius={100}
+                            gradient={{
+                              from: '#DFDA7C',
+                              to: '#F2AF46',
+                              deg: 174
+                            }}
+                          >
+                            <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
+                          </ActionIcon>
+                        </Center>
+                        <Text>{v.title}</Text>
+                      </Group>
+                      <Box>
+                        <RiCircleFill size={12} color={'#387529'} />
+                      </Box>
+                    </Group>
+                    <Divider my="sm" />
+                  </Box>
+                );
+              })}
+            </Box>
+          ) : (
+            <Box pt={20}>
+              {dataProject.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.Section>
+                        <Box h={120} bg={WARNA.biruTua}>
+                          <Flex justify={'center'} align={'center'} h={"100%"}>
+                            <Title order={3} c={"white"}>{v.title}</Title>
+                          </Flex>
+                        </Box>
+                      </Card.Section>
+                      <Box pt={10}>
+                        <Text>{v.description}</Text>
+                        <Group align='center' pt={10} justify='space-between'>
+                          <Badge color={'#387529'}>{v.status}</Badge>
+                          <Avatar.Group>
+                            <Avatar>
+                              <MdAccountCircle size={32} color={WARNA.biruTua} />
+                            </Avatar>
+                            <Avatar>+5</Avatar>
+                          </Avatar.Group>
+                        </Group>
+                      </Box>
+                    </Card>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+        </Box>
+      </Box >
+  );
+}
diff --git a/src/module/project/components/project_process.tsx b/src/module/project/components/project_process.tsx
new file mode 100644
index 0000000..4a80c63
--- /dev/null
+++ b/src/module/project/components/project_process.tsx
@@ -0,0 +1,158 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
+import { MdAccountCircle } from 'react-icons/md';
+import { RiCircleFill } from 'react-icons/ri';
+
+const dataProject = [
+  {
+    id: 1,
+    title: 'Project 1',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT PROSES',
+  },
+  {
+    id: 2,
+    title: 'Project 2',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT PROSES',
+  },
+  {
+    id: 3,
+    title: 'Project 3',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT PROSES',
+  },
+  {
+    id: 4,
+    title: 'Project 4',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT PROSES',
+  },
+  {
+    id: 5,
+    title: 'Project 5',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT PROSES',
+  },
+  {
+    id: 6,
+    title: 'Project 6',
+    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
+    status: 'PROJECT PROSES',
+  },
+]
+export default function ProjectProcess() {
+  const [isList, setIsList] = useState(false)
+  const router = useRouter()
+
+  const handleList = () => {
+    setIsList(!isList)
+  }
+  return (
+    <Box mt={20}>
+        <Grid justify='center' align='center'>
+          <Grid.Col span={10}>
+            <TextInput
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: '#A3A3A3',
+                  borderColor: '#A3A3A3',
+                },
+              }}
+              size="md"
+              radius={30}
+              leftSection={<HiMagnifyingGlass size={20} />}
+              placeholder="Pencarian"
+            />
+          </Grid.Col>
+          <Grid.Col span={'auto'}>
+            <Flex justify={'center'}>
+              {isList ? (
+                <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+              ) : (
+                <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+              )}
+            </Flex>
+          </Grid.Col>
+        </Grid>
+        <Box pt={20}>
+          <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+            <Flex justify={'center'} align={'center'} h={'100%'}>
+              <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
+            </Flex>
+          </Box>
+          {isList ? (
+            <Box pt={20}>
+              {dataProject.map((v, i) => {
+                return (
+                  <Box key={i}>
+                    <Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}>
+                      <Group>
+                        <Center>
+                          <ActionIcon
+                            variant="gradient"
+                            size={50}
+                            aria-label="Gradient action icon"
+                            radius={100}
+                            gradient={{
+                              from: '#DFDA7C',
+                              to: '#F2AF46',
+                              deg: 174
+                            }}
+                          >
+                            <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
+                          </ActionIcon>
+                        </Center>
+                        <Text>{v.title}</Text>
+                      </Group>
+                      <Box>
+                        <RiCircleFill size={12} color={'#C5771A'} />
+                      </Box>
+                    </Group>
+                    <Divider my="sm" />
+                  </Box>
+                );
+              })}
+            </Box>
+          ) : (
+            <Box pt={20}>
+              {dataProject.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.Section>
+                        <Box h={120} bg={WARNA.biruTua}>
+                          <Flex justify={'center'} align={'center'} h={"100%"}>
+                            <Title order={3} c={"white"}>{v.title}</Title>
+                          </Flex>
+                        </Box>
+                      </Card.Section>
+                      <Box pt={10}>
+                        <Text>{v.description}</Text>
+                        <Group align='center' pt={10} justify='space-between'>
+                          <Badge color={'#C5771A'}>{v.status}</Badge>
+                          <Avatar.Group>
+                            <Avatar>
+                              <MdAccountCircle size={32} color={WARNA.biruTua} />
+                            </Avatar>
+                            <Avatar>+5</Avatar>
+                          </Avatar.Group>
+                        </Group>
+                      </Box>
+                    </Card>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+        </Box>
+      </Box >
+  );
+}
+
diff --git a/src/module/project/components/ui/drawer_project.tsx b/src/module/project/components/ui/drawer_project.tsx
index 13b21ad..8cffca6 100644
--- a/src/module/project/components/ui/drawer_project.tsx
+++ b/src/module/project/components/ui/drawer_project.tsx
@@ -9,7 +9,7 @@ export default function DrawerProject() {
     <Box>
       <Stack pt={10}>
         <SimpleGrid
-          cols={{ base: 3, sm: 3, lg: 3 }}
+          cols={{ base: 2, sm: 2, lg: 3 }}
         >
           <Flex onClick={() => window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} >
             <Box>
diff --git a/src/module/project/components/ui/navbar_project.tsx b/src/module/project/components/ui/navbar_project.tsx
index 23c167a..32b0e53 100644
--- a/src/module/project/components/ui/navbar_project.tsx
+++ b/src/module/project/components/ui/navbar_project.tsx
@@ -1,191 +1,98 @@
 "use client"
 import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
-import React, { useState } from 'react';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, rem, Tabs, Text, TextInput, Title } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
 import { RiCircleFill } from "react-icons/ri";
 import DrawerProject from './drawer_project';
 import { useRouter } from 'next/navigation';
-
-const dataProject = [
-  {
-    id: 1,
-    title: 'Project 1',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-    status: 'PROJECT SELESAI',
-    color: '#387529'
-  },
-  {
-    id: 2,
-    title: 'Project 2',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-    status: 'PROJECT SELESAI',
-    color: '#387529'
-  },
-  {
-    id: 3,
-    title: 'Project 3',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-    status: 'PROJECT SELESAI',
-    color: '#387529'
-  },
-  {
-    id: 4,
-    title: 'Project 4',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-    status: 'PROSES',
-    color: '#C5771A'
-  },
-  {
-    id: 5,
-    title: 'Project5',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-    status: 'PROSES',
-    color: '#C5771A'
-  },
-  {
-    id: 6,
-    title: 'Project 6',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-    status: 'PROSES',
-    color: '#C5771A'
-  },
-]
+import { TbClockPause } from 'react-icons/tb';
+import { IoIosCheckmarkCircleOutline } from 'react-icons/io';
+import { IoCloseCircleOutline } from 'react-icons/io5';
+import ProjectProcess from '../project_process';
+import ProjectDone from '../project_done';
+import ProjectCencel from '../project_cencel';
 
 export default function NavbarProject() {
-  const [isList, setIsList] = useState(false)
   const [openDrawer, setOpenDrawer] = useState(false)
-  const router = useRouter()
 
-  const handleList = () => {
-    setIsList(!isList)
-  }
+  const iconStyle = { width: rem(20), height: rem(20) };
+
+  const tabsData = [
+    {
+      value: 'segera',
+      label: 'Proyek Proses',
+      mobileLabel: 'Proses',
+      icon: <TbClockPause style={iconStyle} />,
+    },
+    {
+      value: 'selesai',
+      label: 'Proyek Selesai',
+      mobileLabel: 'Selesai',
+      icon: <IoIosCheckmarkCircleOutline style={iconStyle} />,
+    },
+    {
+      value: 'batal',
+      label: 'Proyek Batal',
+      mobileLabel: ' Batal',
+      icon: <IoCloseCircleOutline style={iconStyle} />,
+    },
+  ];
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 495) {
+        setIsMobile(true);
+      } else {
+        setIsMobile(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <Box>
       <LayoutNavbarNew back='/home' title='proyek'
         menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>} />
+
       <Box p={20}>
-        <Grid justify='center' align='center'>
-          <Grid.Col span={10}>
-            <TextInput
-              styles={{
-                input: {
-                  color: WARNA.biruTua,
-                  borderRadius: '#A3A3A3',
-                  borderColor: '#A3A3A3',
-                },
-              }}
-              size="md"
-              radius={30}
-              leftSection={<HiMagnifyingGlass size={20} />}
-              placeholder="Pencarian"
-            />
-          </Grid.Col>
-          <Grid.Col span={'auto'}>
-            <Flex justify={'center'}>
-              {isList ? (
-                <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
-              ) : (
-                <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
-              )}
-            </Flex>
-          </Grid.Col>
-        </Grid>
-        <Box pt={20}>
-          <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
-            <Flex justify={'center'} align={'center'} h={'100%'}>
-              <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
-            </Flex>
-          </Box>
-          <Grid pt={15}>
-            <Grid.Col span={6}>
-              <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-                <Text ta={'center'} fw={'bold'} c={'#387529'}>Proyek Selesai</Text>
-                <Flex justify={'center'} align={'center'} h={'100%'}>
-                  <Text fz={40} fw={'bold'} c={'#387529'}>35</Text>
-                </Flex>
-              </Box>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-                <Text ta={'center'} fw={'bold'} c={'#C5771A'}>Proyek Proses</Text>
-                <Flex justify={'center'} align={'center'} h={'100%'}>
-                  <Text fz={40} fw={'bold'} c={'#C5771A'}>35</Text>
-                </Flex>
-              </Box>
-            </Grid.Col>
-          </Grid>
-          {isList ? (
-            <Box pt={20}>
-              {dataProject.map((v, i) => {
-                return (
-                  <Box key={i}>
-                    <Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}>
-                      <Group>
-                        <Center>
-                          <ActionIcon
-                            variant="gradient"
-                            size={50}
-                            aria-label="Gradient action icon"
-                            radius={100}
-                            gradient={{
-                              from: '#DFDA7C',
-                              to: '#F2AF46',
-                              deg: 174
-                            }}
-                          >
-                            <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
-                          </ActionIcon>
-                        </Center>
-                        <Text>{v.title}</Text>
-                      </Group>
-                      <Box>
-                        <RiCircleFill size={12} color={v.color} />
-                      </Box>
-                    </Group>
-                    <Divider my="sm" />
-                  </Box>
-                );
-              })}
-            </Box>
-          ) : (
-            <Box pt={20}>
-              {dataProject.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.Section>
-                        <Box h={120} bg={WARNA.biruTua}>
-                          <Flex justify={'center'} align={'center'} h={"100%"}>
-                            <Title order={3} c={"white"}>{v.title}</Title>
-                          </Flex>
-                        </Box>
-                      </Card.Section>
-                      <Box pt={10}>
-                        <Text>{v.description}</Text>
-                        <Group align='center' pt={10} justify='space-between'>
-                          <Badge color={v.color}>{v.status}</Badge>
-                          <Avatar.Group>
-                            <Avatar>
-                              <MdAccountCircle size={32} color={WARNA.biruTua} />
-                            </Avatar>
-                            <Avatar>+5</Avatar>
-                          </Avatar.Group>
-                        </Group>
-                      </Box>
-                    </Card>
-                  </Box>
-                );
-              })}
-            </Box>
-          )}
-        </Box>
-      </Box >
+        <Tabs variant="pills" radius="xl" defaultValue="segera">
+          <Tabs.List grow justify='center'>
+            {tabsData.map((tab) => (
+              <Tabs.Tab
+                key={tab.value}
+                value={tab.value}
+                color={WARNA.biruTua}
+                leftSection={tab.icon}
+              >
+                {isMobile ? tab.mobileLabel : tab.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          <Tabs.Panel value="segera">
+            <ProjectProcess />
+          </Tabs.Panel>
+
+          <Tabs.Panel value="selesai">
+            <ProjectDone />
+          </Tabs.Panel>
+
+          <Tabs.Panel value="batal">
+            <ProjectCencel />
+          </Tabs.Panel>
+        </Tabs>
+      </Box>
+
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
         <DrawerProject />
       </LayoutDrawer>
diff --git a/src/types/.gitkeep b/src/types/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/auth/login.ts b/src/types/auth/login.ts
new file mode 100644
index 0000000..17ca1cb
--- /dev/null
+++ b/src/types/auth/login.ts
@@ -0,0 +1,5 @@
+export interface Login {
+    id: string
+    email: string
+    phone: string
+}
\ No newline at end of file