diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index f7ae99d..c7aee22 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -1,4 +1,5 @@
 import { BackButton } from "@/components";
+import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
@@ -48,6 +49,25 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+
+        {/* Event */}
+        <Stack.Screen
+          name="event/(tabs)"
+          options={{
+            title: "Event",
+            headerLeft: () => (
+              <LeftButtonCustom path="/(application)/(user)/home" />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="event/detail/[id]"
+          options={{
+            title: "Event Detail",
+            headerLeft: () => <LeftButtonCustom />,
+          }}
+        />
       </Stack>
     </>
   );
diff --git a/app/(application)/event/(tabs)/_layout.tsx b/app/(application)/(user)/event/(tabs)/_layout.tsx
similarity index 100%
rename from app/(application)/event/(tabs)/_layout.tsx
rename to app/(application)/(user)/event/(tabs)/_layout.tsx
diff --git a/app/(application)/event/(tabs)/index.tsx b/app/(application)/(user)/event/(tabs)/index.tsx
similarity index 100%
rename from app/(application)/event/(tabs)/index.tsx
rename to app/(application)/(user)/event/(tabs)/index.tsx
diff --git a/app/(application)/event/(tabs)/kontribusi.tsx b/app/(application)/(user)/event/(tabs)/kontribusi.tsx
similarity index 100%
rename from app/(application)/event/(tabs)/kontribusi.tsx
rename to app/(application)/(user)/event/(tabs)/kontribusi.tsx
diff --git a/app/(application)/event/(tabs)/riwayat.tsx b/app/(application)/(user)/event/(tabs)/riwayat.tsx
similarity index 100%
rename from app/(application)/event/(tabs)/riwayat.tsx
rename to app/(application)/(user)/event/(tabs)/riwayat.tsx
diff --git a/app/(application)/event/(tabs)/status.tsx b/app/(application)/(user)/event/(tabs)/status.tsx
similarity index 100%
rename from app/(application)/event/(tabs)/status.tsx
rename to app/(application)/(user)/event/(tabs)/status.tsx
diff --git a/app/(application)/event/detail/[id].tsx b/app/(application)/(user)/event/detail/[id].tsx
similarity index 100%
rename from app/(application)/event/detail/[id].tsx
rename to app/(application)/(user)/event/detail/[id].tsx
diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx
index 3107323..26609c3 100644
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -1,3 +1,4 @@
+import { BackButton } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
@@ -13,14 +14,7 @@ export default function ApplicationLayout() {
           name="forum/index"
           options={{
             title: "Forum",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -28,14 +22,7 @@ export default function ApplicationLayout() {
           name="maps/index"
           options={{
             title: "Maps",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -70,37 +57,6 @@ export default function ApplicationLayout() {
           }}
         />
 
-        {/* Event */}
-        {/* <Stack.Screen
-          name="event/(tabs)"
-          options={{
-            title: "Event",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/(application)/home")}
-              />
-            ),
-          }}
-        /> */}
-
-        <Stack.Screen
-          name="event/detail/[id]"
-          options={{
-            title: "Detail",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
-
         {/* Take Picture */}
         <Stack.Screen
           name="take-picture/[id]/index"
diff --git a/app/(application)/portofolio/[id]/index.tsx b/app/(application)/portofolio/[id]/index.tsx
index dfdbd81..f8a0cbf 100644
--- a/app/(application)/portofolio/[id]/index.tsx
+++ b/app/(application)/portofolio/[id]/index.tsx
@@ -1,4 +1,4 @@
-import BackButton from "@/components/Button/BackButton";
+import LeftButtonCustom from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { GStyles } from "@/styles/global-styles";
 import { Stack, useLocalSearchParams } from "expo-router";
@@ -12,7 +12,7 @@ export default function Portofolio() {
       <Stack.Screen
         options={{
           title: "Portofolio",
-          headerLeft: () => <BackButton />,
+          headerLeft: () => <LeftButtonCustom />,
         //   headerRight: () => (
         //     <TouchableOpacity onPress={openDrawer}>
         //       <Ionicons
diff --git a/app/(application)/portofolio/_layout.tsx b/app/(application)/portofolio/_layout.tsx
index 669a22f..459b292 100644
--- a/app/(application)/portofolio/_layout.tsx
+++ b/app/(application)/portofolio/_layout.tsx
@@ -1,5 +1,5 @@
 
-import BackButton from "@/components/Button/BackButton";
+import LeftButtonCustom from "@/components/Button/BackButton";
 import { GStyles } from "@/styles/global-styles";
 import { Stack } from "expo-router";
 
@@ -12,7 +12,7 @@ export default function PortofolioLayout() {
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           headerBackButtonDisplayMode: "minimal",
-          headerLeft: () => <BackButton />,
+          headerLeft: () => <LeftButtonCustom />,
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}
diff --git a/app/(application)/profile/[id]/index.tsx b/app/(application)/profile/[id]/index.tsx
index 1a0295f..3c288d2 100644
--- a/app/(application)/profile/[id]/index.tsx
+++ b/app/(application)/profile/[id]/index.tsx
@@ -1,7 +1,7 @@
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import AlertCustom from "@/components/Alert/AlertCustom";
-import BackButton from "@/components/Button/BackButton";
+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";
@@ -89,7 +89,7 @@ export default function Profile() {
         <Stack.Screen
           options={{
             title: "Profile",
-            headerLeft: () => <BackButton />,
+            headerLeft: () => <LeftButtonCustom />,
             headerRight: () => (
               <TouchableOpacity onPress={openDrawer}>
                 <Ionicons
diff --git a/components/Button/BackButton.tsx b/components/Button/BackButton.tsx
index 7d6b0d5..2f711d6 100644
--- a/components/Button/BackButton.tsx
+++ b/components/Button/BackButton.tsx
@@ -1,16 +1,22 @@
-import { Ionicons } from "@expo/vector-icons";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { Href, router } from "expo-router";
 
-const BackButton = () => {
+/**
+ * 
+ * @param path - path to navigate to ?
+ * @default router.back()
+ * @returns if path : router.replace(path) else router.back()
+ */
+const LeftButtonCustom = ({path}: {path?: Href}) => {
   return (
     <Ionicons
       name="arrow-back"
       size={20}
       color={MainColor.yellow}
-      onPress={() => router.back()}
+      onPress={() => path ? router.replace(path) : router.back()}
     />
   );
 };
 
-export default BackButton;
+export default LeftButtonCustom;
diff --git a/components/index.ts b/components/index.ts
index c4d1325..b3e332e 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,14 +1,14 @@
 // Alert
 import AlertCustom from "./Alert/AlertCustom";
 // Button
-import BackButton from "./Button/BackButton";
+import LeftButtonCustom from "./Button/BackButton";
 import ButtonCustom from "./Button/ButtonCustom";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
 // ShareComponent
-import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import Spacing from "./_ShareComponent/Spacing";
+import ViewWrapper from "./_ShareComponent/ViewWrapper";
 // Text
 import TextCustom from "./Text/TextCustom";
 // TextInput
@@ -18,7 +18,7 @@ import Grid from "./Grid/GridCustom";
 // Box
 import BaseBox from "./Box/BaseBox";
 // Avatar
-import AvatarCustom from "./Image/AvatarCustom"
+import AvatarCustom from "./Image/AvatarCustom";
 // Stack
 import StackCustom from "./Stack/StackCustom";
 // Select
@@ -26,27 +26,25 @@ import SelectCustom from "./Select/SelectCustom";
 
 export {
   AlertCustom,
+  // Avatar
+  AvatarCustom,
   // Button
-  BackButton,
-  ButtonCustom,
+  LeftButtonCustom as BackButton,
+  // Box
+  BaseBox, ButtonCustom,
   // Drawer
   DrawerCustom,
-  MenuDrawerDynamicGrid,
+  // Grid
+  Grid, MenuDrawerDynamicGrid,
+  // Select
+  SelectCustom,
   // ShareComponent
   Spacing,
-  ViewWrapper,
+  // Stack
+  StackCustom,
   // Text
   TextCustom,
   // TextInput
-  TextInputCustom,
-  // Grid
-  Grid,
-  // Box
-  BaseBox,
-  // Avatar
-  AvatarCustom,
-  // Stack
-  StackCustom,
-  // Select
-  SelectCustom,
+  TextInputCustom, ViewWrapper
 };
+
diff --git a/screens/Home/topFeatureSection.tsx b/screens/Home/topFeatureSection.tsx
index 01ac859..c842f45 100644
--- a/screens/Home/topFeatureSection.tsx
+++ b/screens/Home/topFeatureSection.tsx
@@ -9,7 +9,7 @@ export default function Home_FeatureSection() {
       <View style={stylesHome.gridContainer}>
         <TouchableOpacity
           style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/event/(tabs)")}
+          onPress={() => router.push("/(application)/(user)/event/(tabs)")}
         >
           <Ionicons name="analytics" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Event</Text>