diff --git a/package.json b/package.json
index b5a4213..5ea8861 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@mantine/charts": "^7.11.0",
     "@mantine/code-highlight": "^7.11.0",
     "@mantine/core": "^7.11.0",
-    "@mantine/dates": "^7.11.0",
+    "@mantine/dates": "^7.11.1",
     "@mantine/dropzone": "^7.11.0",
     "@mantine/form": "^7.11.0",
     "@mantine/hooks": "^7.11.0",
@@ -37,6 +37,7 @@
     "embla-carousel-autoplay": "^7.1.0",
     "embla-carousel-react": "^7.1.0",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "next": "14.2.4",
     "prettier": "^3.3.2",
     "react": "^18",
diff --git a/src/app/(application)/project/create/page.tsx b/src/app/(application)/project/create/page.tsx
index bdcea94..83e4559 100644
--- a/src/app/(application)/project/create/page.tsx
+++ b/src/app/(application)/project/create/page.tsx
@@ -1,10 +1,11 @@
-import { ViewCreateProject } from '@/module/project';
-import React from 'react';
+import { ViewCreateProject, ViewDateEndTask } from "@/module/project";
+import React from "react";
 
-function Page() {
-  return (
-    <ViewCreateProject />
-  );
+function Page({ searchParams }: { searchParams: any }) {
+  if (searchParams.page == "task")
+    return <ViewDateEndTask />;
+
+  return <ViewCreateProject />;
 }
 
 export default Page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 65c0815..5f1665c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -10,6 +10,7 @@ import { WARNA } from "@/module/_global";
 import { Lato } from "next/font/google";
 import '@mantine/carousel/styles.css';
 import { Toaster } from 'react-hot-toast';
+import '@mantine/dates/styles.css';
 
 export const metadata = {
   title: "SISTEM DESA MANDIRI",
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..4d7cd44
--- /dev/null
+++ b/src/module/project/components/create_date_end_task.tsx
@@ -0,0 +1,98 @@
+"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 pt={30}>
+          <Group justify="space-between">
+            <Text>Anggota Terpilih</Text>
+            <Text>Total 10 Anggota</Text>
+          </Group>
+          <Box pt={20}>
+            <Box mb={20}>
+              <Box style={{
+                border: `1px solid ${'#C7D6E8'}`
+              }} p={20}>
+                <Text>Divisi Kerohanian</Text>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </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 8f329c3..6982394 100644
--- a/src/module/project/components/ui/navbar_project.tsx
+++ b/src/module/project/components/ui/navbar_project.tsx
@@ -155,7 +155,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 />
   );
 }
 
diff --git a/yarn.lock b/yarn.lock
index a937531..50f7466 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -200,7 +200,7 @@
     react-textarea-autosize "8.5.3"
     type-fest "^4.12.0"
 
-"@mantine/dates@^7.11.0":
+"@mantine/dates@^7.11.1":
   version "7.11.1"
   resolved "https://registry.yarnpkg.com/@mantine/dates/-/dates-7.11.1.tgz#87a8969bc99ac30a81869f5447aaa8d4198b8ec5"
   integrity sha512-Km0WGaftHPK+oqCjvg2gdzxWsDS7seZdUx6VFQE0m35zouiSaRRFCrfo/NOKGS8ctKC/VsYdFQr+EkDxG+EEjg==
@@ -2473,6 +2473,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
+moment@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -3167,16 +3172,7 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3248,14 +3244,7 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -3648,16 +3637,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==