diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 0f3dc39..85dcd39 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -32,7 +32,7 @@ export default function UserLayout() {
           }}
         />
 
-        {/* Profile */}
+        {/* ========== Profile Section ========= */}
         <Stack.Screen
           name="profile"
           options={{
@@ -40,15 +40,15 @@ export default function UserLayout() {
           }}
         />
 
-        {/* Portofolio */}
+        {/* ========== Portofolio Section ========= */}
         <Stack.Screen
           name="portofolio"
           options={{
             headerShown: false,
           }}
         />
-        
-        {/* User Search */}
+
+        {/* ========== User Search Section ========= */}
         <Stack.Screen
           name="user-search/index"
           options={{
@@ -57,7 +57,7 @@ export default function UserLayout() {
           }}
         />
 
-        {/* Notification */}
+        {/* ========== Notification Section ========= */}
         <Stack.Screen
           name="notifications/index"
           options={{
@@ -66,7 +66,7 @@ export default function UserLayout() {
           }}
         />
 
-        {/* Event */}
+        {/* ========== Event Section ========= */}
         <Stack.Screen
           name="event/(tabs)"
           options={{
@@ -85,7 +85,7 @@ export default function UserLayout() {
           }}
         />
 
-        {/* Forum */}
+        {/* ========== Forum Section ========= */}
         <Stack.Screen
           name="forum/index"
           options={{
@@ -94,7 +94,7 @@ export default function UserLayout() {
           }}
         />
 
-        {/* Maps */}
+        {/* ========== Maps Section ========= */}
         <Stack.Screen
           name="maps/index"
           options={{
@@ -109,8 +109,22 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="maps/[id]/edit"
+          options={{
+            title: "Edit Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/[id]/custom-pin"
+          options={{
+            title: "Custom Pin Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
-        {/* Marketplace */}
+        {/* ========== Marketplace Section ========= */}
         <Stack.Screen
           name="marketplace/index"
           options={{
diff --git a/app/(application)/(user)/maps/[id]/custom-pin.tsx b/app/(application)/(user)/maps/[id]/custom-pin.tsx
new file mode 100644
index 0000000..03e4a98
--- /dev/null
+++ b/app/(application)/(user)/maps/[id]/custom-pin.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function MapsCustomPin() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Maps Custom Pin</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/maps/[id]/edit.tsx b/app/(application)/(user)/maps/[id]/edit.tsx
new file mode 100644
index 0000000..1c2f69d
--- /dev/null
+++ b/app/(application)/(user)/maps/[id]/edit.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function MapsEdit() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Maps Edit</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/portofolio/[id]/edit-logo.tsx b/app/(application)/(user)/portofolio/[id]/edit-logo.tsx
new file mode 100644
index 0000000..7153217
--- /dev/null
+++ b/app/(application)/(user)/portofolio/[id]/edit-logo.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function PortofolioEditLogo() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Portofolio Edit Logo</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx b/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
new file mode 100644
index 0000000..46bafcf
--- /dev/null
+++ b/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function PortofolioEditSocialMedia() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Portofolio Edit Social Media</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/portofolio/[id]/edit.tsx b/app/(application)/(user)/portofolio/[id]/edit.tsx
new file mode 100644
index 0000000..99b5fb4
--- /dev/null
+++ b/app/(application)/(user)/portofolio/[id]/edit.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function PortofolioEdit() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Portofolio Edit</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/portofolio/[id]/index.tsx b/app/(application)/(user)/portofolio/[id]/index.tsx
index 731d8cb..ced90a9 100644
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,47 +1,26 @@
-import { DrawerCustom, TextCustom } from "@/components";
+import { DrawerCustom } 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 { drawerItemsPortofolio } from "@/screens/Portofolio/ListPage";
+import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Stack, useLocalSearchParams } from "expo-router";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import {
-  Animated,
-  InteractionManager,
   Text,
-  TouchableOpacity,
+  TouchableOpacity
 } from "react-native";
 
 export default function Portofolio() {
   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 (
@@ -72,12 +51,10 @@ export default function Portofolio() {
       <DrawerCustom
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
-        drawerAnim={drawerAnim}
         height={350}
       >
-        <Profile_MenuDrawerSection
-          drawerItems={drawerItems({ id: id as string })}
-          setShowLogoutAlert={setShowLogoutAlert}
+        <Portofolio_MenuDrawerSection
+          drawerItems={drawerItemsPortofolio({ id: id as string })}
           setIsDrawerOpen={setIsDrawerOpen}
         />
       </DrawerCustom>
diff --git a/app/(application)/(user)/portofolio/_layout.tsx b/app/(application)/(user)/portofolio/_layout.tsx
index 2d81b1b..9e4797e 100644
--- a/app/(application)/(user)/portofolio/_layout.tsx
+++ b/app/(application)/(user)/portofolio/_layout.tsx
@@ -20,6 +20,12 @@ export default function PortofolioLayout() {
           name="[id]/list"
           options={{ title: "Daftar Portofolio" }}
         />
+        <Stack.Screen name="[id]/edit" options={{ title: "Edit Portofolio" }} />
+        <Stack.Screen name="[id]/edit-logo" options={{ title: "Edit Logo " }} />
+        <Stack.Screen
+          name="[id]/edit-social-media"
+          options={{ title: "Edit Social Media" }}
+        />
       </Stack>
     </>
   );
diff --git a/app/(application)/(user)/profile/[id]/index.tsx b/app/(application)/(user)/profile/[id]/index.tsx
index 7e03309..b8aad97 100644
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -3,43 +3,26 @@ 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 { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
 import ProfilSection from "@/screens/Profile/ProfilSection";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import React, { useRef, useState } from "react";
-import { Animated, InteractionManager, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+import { TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [showLogoutAlert, setShowLogoutAlert] = useState(false);
 
-  // Animasi menggunakan translateY (lebih kompatibel)
-  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
-
   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);
   };
 
   const handleLogout = () => {
@@ -76,11 +59,10 @@ export default function Profile() {
       <DrawerCustom
         height={350}
         isVisible={isDrawerOpen}
-        drawerAnim={drawerAnim}
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItems({ id: id as string })}
+          drawerItems={drawerItemsProfile({ id: id as string })}
           setShowLogoutAlert={setShowLogoutAlert}
           setIsDrawerOpen={setIsDrawerOpen}
         />
diff --git a/components/Drawer/DrawerCustom.tsx b/components/Drawer/DrawerCustom.tsx
index da387f0..c871f84 100644
--- a/components/Drawer/DrawerCustom.tsx
+++ b/components/Drawer/DrawerCustom.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import {
   Animated,
   PanResponder,
@@ -14,7 +14,7 @@ interface DrawerCustomProps {
   children?: React.ReactNode;
   height?: number;
   isVisible: boolean;
-  drawerAnim: Animated.Value;
+  drawerAnim?: Animated.Value;
   closeDrawer: () => void;
   //   openLogoutAlert: () => void;
 }
@@ -33,6 +33,26 @@ export default function DrawerCustom({
   closeDrawer,
 }: //   openLogoutAlert,
 DrawerCustomProps) {
+  const drawerAnima = useRef(
+    new Animated.Value(height || DRAWER_HEIGHT)
+  ).current;
+  // Efek untuk handle open/close drawer
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(drawerAnima, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(drawerAnima, {
+        toValue: height || DRAWER_HEIGHT,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible, drawerAnim, height, closeDrawer, drawerAnima]);
+
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (_, gestureState) => {
@@ -41,7 +61,7 @@ DrawerCustomProps) {
       onPanResponderMove: (_, gestureState) => {
         const offset = gestureState.dy;
         if (offset >= 0 && offset <= DRAWER_HEIGHT) {
-          drawerAnim.setValue(offset);
+          drawerAnima.setValue(offset);
         }
       },
       onPanResponderRelease: (_, gestureState) => {
@@ -50,7 +70,7 @@ DrawerCustomProps) {
             closeDrawer();
           });
         } else {
-          Animated.spring(drawerAnim, {
+          Animated.spring(drawerAnima, {
             toValue: 0,
             useNativeDriver: true,
           }).start();
@@ -80,7 +100,7 @@ DrawerCustomProps) {
           styles.drawer,
           {
             height: height || DRAWER_HEIGHT,
-            transform: [{ translateY: drawerAnim }],
+            transform: [{ translateY: drawerAnima }],
           },
         ]}
         {...panResponder.panHandlers}
diff --git a/screens/Portofolio/ListPage.tsx b/screens/Portofolio/ListPage.tsx
new file mode 100644
index 0000000..2e3693d
--- /dev/null
+++ b/screens/Portofolio/ListPage.tsx
@@ -0,0 +1,33 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+
+export const drawerItemsPortofolio = ({
+  id,
+}: {
+  id: string;
+}): IMenuDrawerItem[] => [
+  {
+    icon: "create",
+    label: "Edit portofolio",
+    path: `/(application)/portofolio/${id}/edit`,
+  },
+  {
+    icon: "camera",
+    label: "Edit logo ",
+    path: `/(application)/portofolio/${id}/edit-logo`,
+  },
+  {
+    icon: "image",
+    label: "Edit social media ",
+    path: `/(application)/portofolio/${id}/edit-social-media`,
+  },
+  {
+    icon: "add-circle",
+    label: "Edit Map",
+    path: `/(application)/maps/${id}/edit`,
+  },
+  {
+    icon: "create-outline",
+    label: "Custom Pin Map",
+    path: `/(application)/maps/${id}/custom-pin`,
+  },
+];
diff --git a/screens/Portofolio/MenuDrawer.tsx b/screens/Portofolio/MenuDrawer.tsx
new file mode 100644
index 0000000..9037388
--- /dev/null
+++ b/screens/Portofolio/MenuDrawer.tsx
@@ -0,0 +1,28 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
+import { router } from "expo-router";
+
+export default function Portofolio_MenuDrawerSection({
+  drawerItems,
+  setIsDrawerOpen,
+}: {
+  drawerItems: IMenuDrawerItem[];
+  setIsDrawerOpen: (value: boolean) => void;
+}) {
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.push(item.path as any);
+    setIsDrawerOpen(false);
+  };
+
+  return (
+    <>
+      {/* Menu Items */}
+      <MenuDrawerDynamicGrid
+        data={drawerItems}
+        columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
+        onPressItem={handlePress}
+      />
+    </>
+  );
+}
diff --git a/screens/Profile/ListPage.tsx b/screens/Profile/ListPage.tsx
index df30d75..ad62eac 100644
--- a/screens/Profile/ListPage.tsx
+++ b/screens/Profile/ListPage.tsx
@@ -1,6 +1,6 @@
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 
-export const drawerItems = ({ id }: { id: string }): IMenuDrawerItem[] => [
+export const drawerItemsProfile = ({ id }: { id: string }): IMenuDrawerItem[] => [
   {
     icon: "create",
     label: "Edit profile",