diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 5c87b0a..bcf7e7d 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -150,6 +150,24 @@ export default function UserLayout() {
 
         {/* ========== End Collaboration Section ========= */}
 
+        {/* ========== Job Section ========= */}
+        <Stack.Screen
+          name="job/create"
+          options={{
+            title: "Tambah Lowongan Pekerjaan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="job/(tabs)"
+          options={{
+            title: "Job Vacancy",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Job Section ========= */}
+
         {/* ========== Forum Section ========= */}
         <Stack.Screen
           name="forum/create"
diff --git a/app/(application)/(user)/collaboration/(tabs)/_layout.tsx b/app/(application)/(user)/collaboration/(tabs)/_layout.tsx
index b6dbc4c..cc4925a 100644
--- a/app/(application)/(user)/collaboration/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/collaboration/(tabs)/_layout.tsx
@@ -1,3 +1,4 @@
+import { IconHome } from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
@@ -9,9 +10,7 @@ export default function CollaborationTabsLayout() {
         name="index"
         options={{
           title: "Beranda",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="home" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
         }}
       />
       <Tabs.Screen
diff --git a/app/(application)/(user)/event/(tabs)/_layout.tsx b/app/(application)/(user)/event/(tabs)/_layout.tsx
index 9f04143..0de8e88 100644
--- a/app/(application)/(user)/event/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/event/(tabs)/_layout.tsx
@@ -1,3 +1,4 @@
+import { IconHome, IconStatus } from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
@@ -12,7 +13,7 @@ export default function EventTabsLayout() {
         options={{
           title: "Beranda",
           tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="home" color={color} />
+            <IconHome color={color}/>
           ),
         }}
       />
@@ -21,7 +22,7 @@ export default function EventTabsLayout() {
         options={{
           title: "Status",
           tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="list" color={color} />
+            <IconStatus color={color}/>
           ),
         }}
       />
diff --git a/app/(application)/(user)/job/(tabs)/_layout.tsx b/app/(application)/(user)/job/(tabs)/_layout.tsx
new file mode 100644
index 0000000..f8c8f8e
--- /dev/null
+++ b/app/(application)/(user)/job/(tabs)/_layout.tsx
@@ -0,0 +1,34 @@
+import { IconHome, IconStatus } from "@/components/_Icon";
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function JobTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Status",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="archive"
+        options={{
+          title: "Arsip",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="archive" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/app/(application)/(user)/job/(tabs)/archive.tsx b/app/(application)/(user)/job/(tabs)/archive.tsx
new file mode 100644
index 0000000..24e9819
--- /dev/null
+++ b/app/(application)/(user)/job/(tabs)/archive.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function JobArchive() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Job Archive</TextCustom>
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/job/(tabs)/index.tsx b/app/(application)/(user)/job/(tabs)/index.tsx
new file mode 100644
index 0000000..49f724a
--- /dev/null
+++ b/app/(application)/(user)/job/(tabs)/index.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function JobBeranda() {
+    return (
+        <ViewWrapper>
+            <TextCustom>Job Beranda</TextCustom>
+        </ViewWrapper>
+    );
+}
\ No newline at end of file
diff --git a/app/(application)/(user)/job/(tabs)/status.tsx b/app/(application)/(user)/job/(tabs)/status.tsx
new file mode 100644
index 0000000..4090c58
--- /dev/null
+++ b/app/(application)/(user)/job/(tabs)/status.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function JobStatus() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Job Status</TextCustom>
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/job/create.tsx b/app/(application)/(user)/job/create.tsx
new file mode 100644
index 0000000..e103883
--- /dev/null
+++ b/app/(application)/(user)/job/create.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function JobCreate() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Job Create</TextCustom>
+    </ViewWrapper>
+  );
+}
diff --git a/components/_Icon/IconHome.tsx b/components/_Icon/IconHome.tsx
new file mode 100644
index 0000000..f418811
--- /dev/null
+++ b/components/_Icon/IconHome.tsx
@@ -0,0 +1,10 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function IconHome({ color }: { color?: string }) {
+  return (
+    <>
+      <Ionicons name="home" size={ICON_SIZE_SMALL} color={color || "white"} />
+    </>
+  );
+}
diff --git a/components/_Icon/IconStatus.tsx b/components/_Icon/IconStatus.tsx
new file mode 100644
index 0000000..9c26b0b
--- /dev/null
+++ b/components/_Icon/IconStatus.tsx
@@ -0,0 +1,12 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export default function IconStatus({ color }: { color?: string }) {
+  return (
+    <MaterialIcons
+      size={ICON_SIZE_SMALL}
+      name="checklist-rtl"
+      color={color || "white"}
+    />
+  );
+}
diff --git a/components/_Icon/index.ts b/components/_Icon/index.ts
index 728531e..31da1c7 100644
--- a/components/_Icon/index.ts
+++ b/components/_Icon/index.ts
@@ -1,3 +1,5 @@
 import IconEdit from "./IconEdit";
+import IconHome from "./IconHome";
+import IconStatus from "./IconStatus";
 
-export { IconEdit };
+export { IconEdit, IconHome, IconStatus };
diff --git a/screens/Home/bottomFeatureSection.tsx b/screens/Home/bottomFeatureSection.tsx
index d7731ec..a924795 100644
--- a/screens/Home/bottomFeatureSection.tsx
+++ b/screens/Home/bottomFeatureSection.tsx
@@ -1,52 +1,55 @@
-import { TextCustom } from "@/components";
+import { ClickableCustom, TextCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { stylesHome } from "./homeViewStyle";
+import { router } from "expo-router";
 
 export default function Home_BottomFeatureSection() {
   return (
     <>
-      <View style={stylesHome.jobVacancyContainer}>
-        <View style={stylesHome.jobVacancyHeader}>
-          <Icon name="briefcase" size={24} color="white" />
-          <Spacing width={10}/>
-          <TextCustom bold size="large">
-            Job Vacancy
-          </TextCustom>
-        </View>
-
-        <View style={stylesHome.vacancyList}>
-          {/* Vacancy Item 1 */}
-          <View style={stylesHome.vacancyItem}>
-            {/* <Icon name="user" size={20} color="#FFD700" /> */}
-            <View style={stylesHome.vacancyDetails}>
-              <TextCustom bold color="yellow" truncate size="large">
-                Bagas_banuna
-              </TextCustom>
-              <Spacing height={5} />
-              <TextCustom truncate={2}>
-                Dicari perawat kucing dan perawat anjing
-              </TextCustom>
-            </View>
+      <ClickableCustom onPress={() => router.push("/job")}>
+        <View style={stylesHome.jobVacancyContainer}>
+          <View style={stylesHome.jobVacancyHeader}>
+            <Icon name="briefcase" size={24} color="white" />
+            <Spacing width={10} />
+            <TextCustom bold size="large">
+              Job Vacancy
+            </TextCustom>
           </View>
 
-          {/* Vacancy Item 2 */}
-          <View style={stylesHome.vacancyItem}>
-            {/* <Icon name="user" size={20} color="#FFD700" /> */}
-            <View style={stylesHome.vacancyDetails}>
-              <TextCustom bold color="yellow" truncate size="large">
-                fibramarcell
-              </TextCustom>
-              <Spacing height={5} />
-              <TextCustom truncate={2}>
-                Di Butuhkan Seorang Programer dan Designer
-              </TextCustom>
+          <View style={stylesHome.vacancyList}>
+            {/* Vacancy Item 1 */}
+            <View style={stylesHome.vacancyItem}>
+              {/* <Icon name="user" size={20} color="#FFD700" /> */}
+              <View style={stylesHome.vacancyDetails}>
+                <TextCustom bold color="yellow" truncate size="large">
+                  Bagas_banuna
+                </TextCustom>
+                <Spacing height={5} />
+                <TextCustom truncate={2}>
+                  Dicari perawat kucing dan perawat anjing
+                </TextCustom>
+              </View>
+            </View>
+
+            {/* Vacancy Item 2 */}
+            <View style={stylesHome.vacancyItem}>
+              {/* <Icon name="user" size={20} color="#FFD700" /> */}
+              <View style={stylesHome.vacancyDetails}>
+                <TextCustom bold color="yellow" truncate size="large">
+                  fibramarcell
+                </TextCustom>
+                <Spacing height={5} />
+                <TextCustom truncate={2}>
+                  Di Butuhkan Seorang Programer dan Designer
+                </TextCustom>
+              </View>
             </View>
           </View>
         </View>
-      </View>
+      </ClickableCustom>
     </>
   );
 }