diff --git a/src/module/project/components/create_date_end_task.tsx b/src/module/project/components/create_date_end_task.tsx
new file mode 100644
index 0000000..6175181
--- /dev/null
+++ b/src/module/project/components/create_date_end_task.tsx
@@ -0,0 +1,83 @@
+"use client";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { Box, Group, Input, SimpleGrid, Stack, Text } from "@mantine/core";
+import React, { useState } from "react";
+import { DatePicker } from "@mantine/dates";
+import moment from "moment";
+import { IoIosArrowDropright } from "react-icons/io";
+
+export default function ViewDateEndTask() {
+  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="/project/create" title={"Tanggal Tugas"} menu />
+      <Box p={20}>
+        <Group
+          justify="center"
+          bg={"white"}
+          py={20}
+          style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+        >
+          <DatePicker
+            styles={{}}
+            type="range"
+            value={value}
+            onChange={setValue}
+            size="md"
+            c={WARNA.biruTua}
+          />
+        </Group>
+        <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+          <Box>
+            <Text>Tanggal Mulai</Text>
+            <Group
+              justify="center"
+              bg={"white"}
+              h={45}
+              style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+            >
+              <Text>{value[0] ? `${value[0].toLocaleDateString()}` : ""}</Text>
+            </Group>
+          </Box>
+          <Box>
+            <Text>Tanggal Berakhir</Text>
+            <Group
+              justify="center"
+              bg={"white"}
+              h={45}
+              style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+            >
+              <Text>{value[1] ? `${value[1].toLocaleDateString()}` : ""}</Text>
+            </Group>
+          </Box>
+        </SimpleGrid>
+        <Stack pt={15}>
+          <Input
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            placeholder="Input Nama Tahapan"
+            size="md"
+          />
+          <Box >
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/module/project/components/create_project.tsx b/src/module/project/components/create_project.tsx
new file mode 100644
index 0000000..d2dfe18
--- /dev/null
+++ b/src/module/project/components/create_project.tsx
@@ -0,0 +1,53 @@
+'use client'
+import { LayoutNavbarNew } from "@/module/_global";
+import { Box, Group, Input, Stack, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { IoIosArrowDropright } from "react-icons/io";
+
+export default function CreateProject() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarNew back="/project" title="tambah proyek" menu />
+      <Box p={20}>
+        <Stack>
+          <Input
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            placeholder="Nama Proyek"
+            size="md"
+          />
+          <Box onClick={() => router.push('/project/create?page=task')}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Tanggal & Tugas</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+          <Group
+            justify="space-between"
+            p={10}
+            style={{
+              border: `1px solid ${"#D6D8F6"}`,
+              borderRadius: 10,
+            }}
+          >
+            <Text>Upload File</Text>
+            <IoIosArrowDropright size={25} />
+          </Group>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/module/project/components/create_users_project.tsx b/src/module/project/components/create_users_project.tsx
new file mode 100644
index 0000000..fceff9b
--- /dev/null
+++ b/src/module/project/components/create_users_project.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function CreateUsersProject() {
+  return (
+    <div>
+      CreateUsersProject
+    </div>
+  );
+}
+
diff --git a/src/module/project/components/ui/navbar_project.tsx b/src/module/project/components/ui/navbar_project.tsx
index 33224be..04e0235 100644
--- a/src/module/project/components/ui/navbar_project.tsx
+++ b/src/module/project/components/ui/navbar_project.tsx
@@ -156,7 +156,7 @@ export default function NavbarProject() {
             <Box pt={20}>
               {dataProject.map((v, i) => {
                 return (
-                  <Box key={i}>
+                  <Box key={i} mb={20}>
                     <Card shadow="sm" padding="md" component="a" radius={10}>
                       <Card.Section>
                         <Box h={120} bg={WARNA.biruTua}>
diff --git a/src/module/project/index.ts b/src/module/project/index.ts
index 5c2cf10..c1f16c6 100644
--- a/src/module/project/index.ts
+++ b/src/module/project/index.ts
@@ -1,7 +1,9 @@
 import ViewCreateProject from "./view/view_create_project";
+import ViewDateEndTask from "./components/create_date_end_task";
 import ViewFilterProject from "./view/view_filter_project";
 import ViewProject from "./view/view_project";
 
 export { ViewProject }
 export { ViewCreateProject }
 export { ViewFilterProject }
+export {ViewDateEndTask}
\ No newline at end of file
diff --git a/src/module/project/view/view_create_project.tsx b/src/module/project/view/view_create_project.tsx
index 5b3c9d7..cf7116d 100644
--- a/src/module/project/view/view_create_project.tsx
+++ b/src/module/project/view/view_create_project.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
+import CreateProject from '../components/create_project';
 
 export default function ViewCreateProject() {
   return (
-    <div>
-      ViewCreateProject
-    </div>
+    <CreateProject />
   );
 }