diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts
index a8d2c6c..38580ae 100644
--- a/src/module/_global/fun/WARNA.ts
+++ b/src/module/_global/fun/WARNA.ts
@@ -1,5 +1,6 @@
 export const WARNA = {
     bgWhite: "#F4F9FD",
     biruTua: "#19345E",
-    bgIcon: "#384288"
+    bgIcon: "#384288",
+    borderOrange: "#FCAA4B"
 }
\ No newline at end of file
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 7c77fb9..c7efd33 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -1,7 +1,9 @@
 import { WARNA } from "./fun/WARNA";
+import LayoutIconBack from "./layout/layout_icon_back";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
 
 export { WARNA }
 export { LayoutLogin }
-export {LayoutNavbarHome}
\ No newline at end of file
+export { LayoutNavbarHome }
+export {LayoutIconBack}
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_icon_back.tsx b/src/module/_global/layout/layout_icon_back.tsx
new file mode 100644
index 0000000..356012a
--- /dev/null
+++ b/src/module/_global/layout/layout_icon_back.tsx
@@ -0,0 +1,19 @@
+'use client'
+import { ActionIcon, Box } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { WARNA } from '../fun/WARNA';
+
+function LayoutIconBack({ back }: { back: string }) {
+  const router = useRouter()
+  return (
+    <Box>
+      <ActionIcon variant="light" onClick={() => router.push(back)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <HiChevronLeft size={20} color='white' />
+      </ActionIcon>
+    </Box>
+  );
+}
+
+export default LayoutIconBack;
diff --git a/src/module/notification/components/list_notification.tsx b/src/module/notification/components/list_notification.tsx
new file mode 100644
index 0000000..f62834f
--- /dev/null
+++ b/src/module/notification/components/list_notification.tsx
@@ -0,0 +1,94 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Grid, Group, ScrollArea, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiUser } from 'react-icons/hi2';
+
+const dataNotification = [
+  {
+    id: 1,
+    title: 'Rapat Kamis',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 2,
+    title: 'Rapat Jumat',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 3,
+    title: 'Rapat Senin',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 4,
+    title: 'Rapat Selasa',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+]
+
+export default function ListNotification() {
+  const router = useRouter()
+  return (
+    <Box>
+      {dataNotification.map((v, i) => {
+        return (
+          <Grid style={{
+            border: `1px solid ${WARNA.borderOrange}`,
+            padding: 15,
+            borderRadius: 15
+          }} gutter={1} key={i} mb={"sm"}>
+            <Grid.Col span={3} pl={'xs'}>
+              <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                <HiUser size={30} color='white' />
+              </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={9}>
+              <Box>
+                <Text fw={'bold'} fz={18}>{v.title}</Text>
+                <Text fz={15}>{v.description}</Text>
+              </Box>
+            </Grid.Col>
+          </Grid>
+        )
+      })}
+    </Box>
+  );
+}
+
diff --git a/src/module/notification/components/ui/navbar_notification.tsx b/src/module/notification/components/ui/navbar_notification.tsx
new file mode 100644
index 0000000..55e6a4b
--- /dev/null
+++ b/src/module/notification/components/ui/navbar_notification.tsx
@@ -0,0 +1,25 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+export default function NavbarNotification() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >NOTIFIKASI</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+    </Box>
+  );
+}
+
diff --git a/src/module/notification/index.ts b/src/module/notification/index.ts
new file mode 100644
index 0000000..46ca4d0
--- /dev/null
+++ b/src/module/notification/index.ts
@@ -0,0 +1,3 @@
+import ViewNotification from "./view/view_notification";
+
+export {ViewNotification}
\ No newline at end of file
diff --git a/src/module/notification/view/view_notification.tsx b/src/module/notification/view/view_notification.tsx
new file mode 100644
index 0000000..11b4d27
--- /dev/null
+++ b/src/module/notification/view/view_notification.tsx
@@ -0,0 +1,18 @@
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global'
+import { Box, Grid, ScrollArea, Text } from '@mantine/core'
+import React from 'react'
+import NavbarNotification from '../components/ui/navbar_notification'
+import ListNotification from '../components/list_notification'
+
+export default function ViewNotification() {
+    return (
+        <Box>
+            <NavbarNotification />
+            <ScrollArea h={'87vh'}>
+                <Box p={20}>
+                    <ListNotification />
+                </Box>
+            </ScrollArea>
+        </Box>
+    )
+}
diff --git a/src/module/project/index.ts b/src/module/project/index.ts
index e69de29..8d44769 100644
--- a/src/module/project/index.ts
+++ b/src/module/project/index.ts
@@ -0,0 +1,3 @@
+import ViewProject from "./view/view_project";
+
+export {ViewProject}
\ No newline at end of file
diff --git a/src/module/project/view/view_project.tsx b/src/module/project/view/view_project.tsx
new file mode 100644
index 0000000..aa17b79
--- /dev/null
+++ b/src/module/project/view/view_project.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ViewProject() {
+  return (
+    <div>
+      ViewProject
+    </div>
+  );
+}
+
diff --git a/src/module/search/components/ui/navbar_search.tsx b/src/module/search/components/ui/navbar_search.tsx
new file mode 100644
index 0000000..e8e8640
--- /dev/null
+++ b/src/module/search/components/ui/navbar_search.tsx
@@ -0,0 +1,25 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+export default function NavbarSearch() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >PENCARIAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+    </Box>
+  );
+}
+
diff --git a/src/module/search/view/view_search.tsx b/src/module/search/view/view_search.tsx
index 7ad2edf..bf88855 100644
--- a/src/module/search/view/view_search.tsx
+++ b/src/module/search/view/view_search.tsx
@@ -1,27 +1,15 @@
-'use client'
-import { LayoutNavbarHome, WARNA } from '@/module/_global';
+
+import { LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Grid, Text, TextInput } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
+import NavbarSearch from '../components/ui/navbar_search';
 
 export default function ViewSearch() {
-  const router = useRouter()
   return (
     <>
-      <LayoutNavbarHome>
-        <Grid justify='center' align='center'>
-          <Grid.Col span="auto">
-            <ActionIcon variant="light" onClick={() => router.push('/home')} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-              <HiChevronLeft size={20} color='white' />
-            </ActionIcon>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Text ta={'center'} fw={'bold'} c={'white'} >PENCARIAN</Text>
-          </Grid.Col>
-          <Grid.Col span="auto"></Grid.Col>
-        </Grid>
-      </LayoutNavbarHome>
+      <NavbarSearch />
       <Box p={20}>
         <TextInput
           styles={{
@@ -33,7 +21,7 @@ export default function ViewSearch() {
           }}
           size="md"
           radius={30}
-          leftSection={<HiMagnifyingGlass size={20}/>}
+          leftSection={<HiMagnifyingGlass size={20} />}
           placeholder="Pencarian"
         />
       </Box>