diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 64e9a5b..0f3dc39 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -102,6 +102,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="maps/create"
+          options={{
+            title: "Tambah Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* Marketplace */}
         <Stack.Screen
diff --git a/app/(application)/(user)/maps/create.tsx b/app/(application)/(user)/maps/create.tsx
new file mode 100644
index 0000000..310758d
--- /dev/null
+++ b/app/(application)/(user)/maps/create.tsx
@@ -0,0 +1,59 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function MapsCreate() {
+  const { id } = useLocalSearchParams();
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Simpan");
+          router.replace(`/portofolio/${id}`);
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      <BaseBox style={{ height: 400 }}>
+        <TextCustom>Maps Her</TextCustom>
+      </BaseBox>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+      />
+
+      <Spacing height={50} />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+      <LandscapeFrameUploaded />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => {
+          console.log("Upload foto ");
+          router.navigate(`/take-picture/${id}`);
+        }}
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing height={50} />
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/portofolio/[id]/create.tsx b/app/(application)/(user)/portofolio/[id]/create.tsx
index 38fc5b4..f616d90 100644
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -44,7 +44,8 @@ export default function PortofolioCreate() {
   }
 
   function handleSave() {
-    console.log("save");
+    console.log("Selanjutnya");
+    router.replace(`/maps/create`);
   }
 
   const buttonSave = (
@@ -56,16 +57,15 @@ export default function PortofolioCreate() {
   return (
     <ViewWrapper footerComponent={buttonSave}>
       {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
-      <StackCustom>
+      <StackCustom gap={"xs"}>
         <InformationBox text="Lengkapi data bisnis anda." />
         <TextInputCustom
-          // disabled
           required
           label="Nama Bisnis"
           placeholder="Masukkan nama bisnis"
+
         />
         <SelectCustom
-          // disabled
           label="Bidang Usaha"
           required
           data={dummyMasterBidangBisnis.map((item) => ({
diff --git a/app/(application)/(user)/portofolio/[id]/index.tsx b/app/(application)/(user)/portofolio/[id]/index.tsx
index f8a0cbf..731d8cb 100644
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,32 +1,86 @@
+import { DrawerCustom, TextCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import { drawerItems } from "@/screens/Profile/ListPage";
+import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
 import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
 import { Stack, useLocalSearchParams } from "expo-router";
-import { Text } from "react-native";
+import { useRef, useState } from "react";
+import {
+  Animated,
+  InteractionManager,
+  Text,
+  TouchableOpacity,
+} from "react-native";
 
 export default function Portofolio() {
-    const { id } = useLocalSearchParams();
+  const { id } = useLocalSearchParams();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+
+  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current;
+
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+    Animated.timing(drawerAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+  const closeDrawer = () => {
+    Animated.timing(drawerAnim, {
+      toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      InteractionManager.runAfterInteractions(() => {
+        setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
+      });
+    });
+    setIsDrawerOpen(false);
+  };
   return (
-    <ViewWrapper>
-      {/* Header */}
-      <Stack.Screen
-        options={{
-          title: "Portofolio",
-          headerLeft: () => <LeftButtonCustom />,
-        //   headerRight: () => (
-        //     <TouchableOpacity onPress={openDrawer}>
-        //       <Ionicons
-        //         name="ellipsis-vertical"
-        //         size={20}
-        //         color={MainColor.yellow}
-        //       />
-        //     </TouchableOpacity>
-        //   ),
-          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: GStyles.headerTitleStyle,
-        }}
-      />
-      <Text style={GStyles.textLabel}>Portofolio {id}</Text>
-    </ViewWrapper>
+    <>
+      <ViewWrapper>
+        {/* Header */}
+        <Stack.Screen
+          options={{
+            title: "Portofolio",
+            headerLeft: () => <LeftButtonCustom />,
+            headerRight: () => (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
+            headerStyle: GStyles.headerStyle,
+            headerTitleStyle: GStyles.headerTitleStyle,
+          }}
+        />
+        <Text style={GStyles.textLabel}>Portofolio {id}</Text>
+      </ViewWrapper>
+
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        isVisible={isDrawerOpen}
+        closeDrawer={closeDrawer}
+        drawerAnim={drawerAnim}
+        height={350}
+      >
+        <Profile_MenuDrawerSection
+          drawerItems={drawerItems({ id: id as string })}
+          setShowLogoutAlert={setShowLogoutAlert}
+          setIsDrawerOpen={setIsDrawerOpen}
+        />
+      </DrawerCustom>
+    </>
   );
 }
diff --git a/app/(application)/(user)/profile/[id]/index.tsx b/app/(application)/(user)/profile/[id]/index.tsx
index 3c288d2..7e03309 100644
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -1,10 +1,10 @@
-import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import AlertCustom from "@/components/Alert/AlertCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
 import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import { drawerItems } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
 import ProfilSection from "@/screens/Profile/ProfilSection";
 import { GStyles } from "@/styles/global-styles";
@@ -18,40 +18,6 @@ export default function Profile() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [showLogoutAlert, setShowLogoutAlert] = useState(false);
 
-  const drawerItems: IMenuDrawerItem[] = [
-    {
-      icon: "create",
-      label: "Edit profile",
-      path: `/(application)/profile/${id}/edit`,
-    },
-    {
-      icon: "camera",
-      label: "Ubah foto profile",
-      path: `/(application)/profile/${id}/update-photo`,
-    },
-    {
-      icon: "image",
-      label: "Ubah latar belakang",
-      path: `/(application)/profile/${id}/update-background`,
-    },
-    {
-      icon: "add-circle",
-      label: "Tambah portofolio",
-      path: `/(application)/portofolio/${id}/create`,
-    },
-    // {
-    //   icon: "settings",
-    //   label: "Dashboard Admin",
-    //   path: `/(application)/profile/dashboard-admin`,
-    // },
-    { icon: "log-out", label: "Keluar", color: "red", path: "" },
-    {
-      icon: "create-outline",
-      label: "Create profile",
-      path: `/(application)/profile/${id}/create`,
-    },
-  ];
-
   // Animasi menggunakan translateY (lebih kompatibel)
   const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
 
@@ -104,7 +70,6 @@ export default function Profile() {
           }}
         />
         <ProfilSection />
-       
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
@@ -115,7 +80,7 @@ export default function Profile() {
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItems}
+          drawerItems={drawerItems({ id: id as string })}
           setShowLogoutAlert={setShowLogoutAlert}
           setIsDrawerOpen={setIsDrawerOpen}
         />
diff --git a/app/(application)/take-picture/[id]/index.tsx b/app/(application)/take-picture/[id]/index.tsx
index 860343b..fd56052 100644
--- a/app/(application)/take-picture/[id]/index.tsx
+++ b/app/(application)/take-picture/[id]/index.tsx
@@ -67,7 +67,7 @@ export default function TakePicture() {
         />
         <Spacing />
 
-        <StackCustom>
+        <StackCustom >
           <ButtonCustom onPress={() => setUri(null)} title="Foto ulang" />
           <ButtonCustom
             onPress={() => {
diff --git a/components/Drawer/DrawerCustom.tsx b/components/Drawer/DrawerCustom.tsx
index 6976f4f..da387f0 100644
--- a/components/Drawer/DrawerCustom.tsx
+++ b/components/Drawer/DrawerCustom.tsx
@@ -1,10 +1,10 @@
 import React, { useRef } from "react";
 import {
-    Animated,
-    InteractionManager,
-    PanResponder,
-    StyleSheet,
-    View,
+  Animated,
+  PanResponder,
+  StyleSheet,
+  View,
+  InteractionManager,
 } from "react-native";
 
 import { AccentColor, MainColor } from "@/constants/color-palet";
@@ -86,7 +86,7 @@ DrawerCustomProps) {
         {...panResponder.panHandlers}
       >
         <View
-          style={[styles.headerBar, { backgroundColor: MainColor.white_gray }]}
+          style={[styles.headerBar, { backgroundColor: MainColor.white }]}
         />
 
         {children}
@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
   headerBar: {
     width: 40,
     height: 5,
-    backgroundColor: MainColor.white_gray,
+    backgroundColor: MainColor.white,
     borderRadius: 5,
     alignSelf: "center",
     marginVertical: 10,
diff --git a/components/Stack/StackCustom.tsx b/components/Stack/StackCustom.tsx
index 6b0ab21..8572cc2 100644
--- a/components/Stack/StackCustom.tsx
+++ b/components/Stack/StackCustom.tsx
@@ -19,7 +19,7 @@ const StackCustom: React.FC<StackProps> = ({
   children,
   align = "stretch",
   justify = "flex-start",
-  gap = "xs",
+  gap = "md",
   direction = "column",
   style,
 }) => {
diff --git a/components/TextInput/TextInputCustom.tsx b/components/TextInput/TextInputCustom.tsx
index b598fab..fe7a7fb 100644
--- a/components/TextInput/TextInputCustom.tsx
+++ b/components/TextInput/TextInputCustom.tsx
@@ -89,19 +89,14 @@ const TextInputCustom = ({
           disabled && GStyles.disabledBox,
         ]}
       >
-        {iconLeft && (
+        {/* {iconLeft && (
           <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
-        )}
+        )} */}
         <RNTextInput
           style={[
             GStyles.inputText,
             { color: fontColor },
-            disabled
-              ? GStyles.inputTextDisabled // <-- custom style untuk text saat disabled
-              : GStyles.inputText,
-            disabled
-              ? GStyles.inputPlaceholderDisabled // <-- placeholder saat disabled
-              : GStyles.inputPlaceholder,
+            disabled && GStyles.inputPlaceholderDisabled, // <-- placeholder saat disabled
           ]}
           editable={!disabled}
           secureTextEntry={secureTextEntry && !isPasswordVisible}
diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx
index 83fd284..aa41ea0 100644
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -31,8 +31,8 @@ export default function LoginView() {
     console.log("login user id :", id);
 
     // router.navigate("/verification");
-    router.navigate(`/(application)/(user)/profile/${id}`);
-    // router.navigate("/(application)/home");
+    // router.navigate(`/(application)/(user)/profile/${id}`);
+    router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
   }
 
diff --git a/screens/Profile/ListPage.tsx b/screens/Profile/ListPage.tsx
new file mode 100644
index 0000000..df30d75
--- /dev/null
+++ b/screens/Profile/ListPage.tsx
@@ -0,0 +1,35 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+
+export const drawerItems = ({ id }: { id: string }): IMenuDrawerItem[] => [
+  {
+    icon: "create",
+    label: "Edit profile",
+    path: `/(application)/profile/${id}/edit`,
+  },
+  {
+    icon: "camera",
+    label: "Ubah foto profile",
+    path: `/(application)/profile/${id}/update-photo`,
+  },
+  {
+    icon: "image",
+    label: "Ubah latar belakang",
+    path: `/(application)/profile/${id}/update-background`,
+  },
+  {
+    icon: "add-circle",
+    label: "Tambah portofolio",
+    path: `/(application)/portofolio/${id}/create`,
+  },
+  // {
+  //   icon: "settings",
+  //   label: "Dashboard Admin",
+  //   path: `/(application)/profile/dashboard-admin`,
+  // },
+  { icon: "log-out", label: "Keluar", color: "red", path: "" },
+  {
+    icon: "create-outline",
+    label: "Create profile",
+    path: `/(application)/profile/${id}/create`,
+  },
+];
\ No newline at end of file
diff --git a/styles/global-styles.ts b/styles/global-styles.ts
index 4fb5663..13a0648 100644
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -79,6 +79,7 @@ export const GStyles = StyleSheet.create({
   headerTitleStyle: {
     color: MainColor.yellow,
     fontWeight: "bold",
+    fontSize: TEXT_SIZE_LARGE,
   },
   // =============== STACK HEADER =============== //