diff --git a/package.json b/package.json
index d3ae8ba..fd45ec7 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/react": "^2.4.0",
     "@tiptap/starter-kit": "^2.4.0",
+    "@types/lodash": "^4.17.6",
     "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^7.1.0",
     "embla-carousel-react": "^7.1.0",
+    "lodash": "^4.17.21",
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
@@ -58,4 +60,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
\ 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
index 356012a..f3a6dc3 100644
--- a/src/module/_global/layout/layout_icon_back.tsx
+++ b/src/module/_global/layout/layout_icon_back.tsx
@@ -4,12 +4,20 @@ import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiChevronLeft } from 'react-icons/hi2';
 import { WARNA } from '../fun/WARNA';
+import _ from 'lodash';
 
-function LayoutIconBack({ back }: { back: string }) {
+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">
+      <ActionIcon variant="light" onClick={() => {
+        if (!_.isUndefined(back) && !_.isNull(back)) {
+          return router.push(back)
+        } else {
+          return router.back()
+        }
+
+      }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
         <HiChevronLeft size={20} color='white' />
       </ActionIcon>
     </Box>
diff --git a/src/module/_global/layout/layout_loading_page.tsx b/src/module/_global/layout/layout_loading_page.tsx
index b392422..2f30c25 100644
--- a/src/module/_global/layout/layout_loading_page.tsx
+++ b/src/module/_global/layout/layout_loading_page.tsx
@@ -1,8 +1,12 @@
-import { Box, Group, Skeleton } from "@mantine/core";
+import { Box, Group, Skeleton, Text } from "@mantine/core";
+import LayoutNavbarHome from "./layout_navbar_home";
 
 export default function LoadingPage() {
    return (
       <>
+         <LayoutNavbarHome>
+            <Text></Text>
+         </LayoutNavbarHome>
          <Box p={20}>
             <Skeleton width={"100%"} height={180} radius={"md"} />
             <Group my={20} justify="space-between" grow>
diff --git a/src/module/user/profile/component/ui/header_edit_profile.tsx b/src/module/user/profile/component/ui/header_edit_profile.tsx
new file mode 100644
index 0000000..5e8f78e
--- /dev/null
+++ b/src/module/user/profile/component/ui/header_edit_profile.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import React from 'react';
+
+export default function HeaderEditProfile() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>EDIT PROFIL</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   );
+}
+
diff --git a/src/module/user/profile/component/ui/ui_profile.tsx b/src/module/user/profile/component/ui/ui_profile.tsx
new file mode 100644
index 0000000..839487a
--- /dev/null
+++ b/src/module/user/profile/component/ui/ui_profile.tsx
@@ -0,0 +1,14 @@
+'use client'
+import { Group, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+
+export function InfoTitleProfile() {
+   const router = useRouter()
+   return (
+      <Group justify="space-between" grow py={5}>
+         <Text fw={'bold'} fz={20}>Informasi</Text>
+         <Text ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
+      </Group>
+   )
+}
\ No newline at end of file
diff --git a/src/module/user/profile/view/view_edit_profile.tsx b/src/module/user/profile/view/view_edit_profile.tsx
index 83fcede..a79e792 100644
--- a/src/module/user/profile/view/view_edit_profile.tsx
+++ b/src/module/user/profile/view/view_edit_profile.tsx
@@ -1,9 +1,77 @@
-import { Box } from "@mantine/core";
+import { WARNA } from "@/module/_global";
+import { Box, Button, Stack, TextInput } from "@mantine/core";
+import HeaderEditProfile from "../component/ui/header_edit_profile";
+import { HiUser } from "react-icons/hi2";
 
 export default function ViewEditProfile() {
    return (
       <Box>
-         Edit profile
+         <HeaderEditProfile />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <Box bg={WARNA.biruTua} py={30} px={50}
+               style={{
+                  borderRadius: 10,
+               }}>
+               <HiUser size={100} color={WARNA.bgWhite} />
+            </Box>
+            <TextInput
+               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
       </Box>
    )
 }
\ No newline at end of file
diff --git a/src/module/user/profile/view/view_profile.tsx b/src/module/user/profile/view/view_profile.tsx
index 902e2a1..437959b 100644
--- a/src/module/user/profile/view/view_profile.tsx
+++ b/src/module/user/profile/view/view_profile.tsx
@@ -1,17 +1,18 @@
-import { LayoutNavbarHome, WARNA } from "@/module/_global";
-import { ActionIcon, Anchor, Box, Flex, Group, Stack, Text } from "@mantine/core";
+import { LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { ActionIcon, Anchor, Box, Button, Flex, Group, Stack, Text } from "@mantine/core";
 import { BsInfo } from "react-icons/bs";
 import { HiUser } from "react-icons/hi2";
 import { RiIdCardFill } from "react-icons/ri";
 import { FaSquarePhone } from "react-icons/fa6";
 import { MdEmail } from "react-icons/md";
+import { InfoTitleProfile } from "../component/ui/ui_profile";
 
 export default function ViewProfile() {
    return (
       <>
          <LayoutNavbarHome>
             <Group justify="space-between">
-               <Text fw={'bold'} c={'white'}>Profile</Text>
+               <LayoutIconBack />
                <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
                   <BsInfo size={20} color='white' />
                </ActionIcon>
@@ -27,29 +28,24 @@ export default function ViewProfile() {
             </Stack>
          </LayoutNavbarHome>
          <Box p={20}>
-            <Group justify="space-between" grow py={5}>
-               <Text fw={'bold'} fz={20}>Informasi</Text>
-               <Anchor href="profile/edit" ta={"right"}>
-                  Edit
-               </Anchor>
-            </Group>
+            <InfoTitleProfile />
             <Group justify="space-between" grow py={5}>
                <Group>
-                  <RiIdCardFill size={28}/>
+                  <RiIdCardFill size={28} />
                   <Text fz={18}>NIK</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
             </Group>
             <Group justify="space-between" grow py={5}>
                <Group>
-                  <FaSquarePhone size={28}/>
+                  <FaSquarePhone size={28} />
                   <Text fz={18}>NoTelepon</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
             </Group>
             <Group justify="space-between" grow py={5}>
                <Group>
-                  <MdEmail size={28}/>
+                  <MdEmail size={28} />
                   <Text fz={18}>Email</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
diff --git a/yarn.lock b/yarn.lock
index b407bb7..3040952 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -638,6 +638,11 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.6.tgz#193ced6a40c8006cfc1ca3f4553444fb38f0e543"
+  integrity sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==
+
 "@types/node@^20.14.9":
   version "20.14.9"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz"
@@ -2370,7 +2375,7 @@ lodash.merge@^4.6.2:
 
 lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: