diff --git a/app/(application)/(user)/job/(tabs)/index.tsx b/app/(application)/(user)/job/(tabs)/index.tsx
index 1846b91..7d40873 100644
--- a/app/(application)/(user)/job/(tabs)/index.tsx
+++ b/app/(application)/(user)/job/(tabs)/index.tsx
@@ -1,34 +1,83 @@
 import {
-    AvatarUsernameAndOtherComponent,
-    BoxWithHeaderSection,
-    FloatingButton,
-    SearchInput,
-    Spacing,
-    TextCustom,
-    ViewWrapper
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  FloatingButton,
+  LoaderCustom,
+  SearchInput,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
-import { router } from "expo-router";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function JobBeranda() {
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(search);
+    }, [search])
+  );
+
+  const onLoadData = async (search: string) => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetAll({ search });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const handleSearch = (search: string) => {
+    setSearch(search);
+    onLoadData(search);
+  };
+
   return (
     <ViewWrapper
       hideFooter
       floatingButton={
         <FloatingButton onPress={() => router.push("/job/create")} />
       }
-      headerComponent={<SearchInput placeholder="Cari pekerjaan" />}
+      headerComponent={
+        <SearchInput placeholder="Cari pekerjaan" onChangeText={handleSearch} />
+      }
     >
-      {jobDataDummy.map((item, index) => (
-        <BoxWithHeaderSection key={index} onPress={() => router.push(`/job/${item.id}`)}>
-          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${item.id}`} />
-          <Spacing />
-          <TextCustom truncate={2} align="center" bold size="large">
-            {item.posisi}
-          </TextCustom>
-          <Spacing />
-        </BoxWithHeaderSection>
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada lowongan</TextCustom>
+      ) : (
+        listData.map((item, index) => (
+          <BoxWithHeaderSection
+            key={index}
+            onPress={() => router.push(`/job/${item.id}`)}
+          >
+            <StackCustom>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Author?.Profile?.imageId}
+                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+                name={item?.Author?.username}
+              />
+
+              <TextCustom truncate={2} align="center" bold size="large">
+                {item?.title || "-"}
+              </TextCustom>
+            </StackCustom>
+            <Spacing />
+          </BoxWithHeaderSection>
+        ))
+      )}
+      <Spacing />
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/job/(tabs)/status.tsx b/app/(application)/(user)/job/(tabs)/status.tsx
index e54f6cc..4c1f004 100644
--- a/app/(application)/(user)/job/(tabs)/status.tsx
+++ b/app/(application)/(user)/job/(tabs)/status.tsx
@@ -1,17 +1,46 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BaseBox,
-    ScrollableCustom,
-    TextCustom,
-    ViewWrapper,
+  BaseBox,
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
-import { useState } from "react";
+import { apiJobGetByStatus } from "@/service/api-client/api-job";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function JobStatus() {
+  const { user } = useAuth();
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadList(true);
+      const response = await apiJobGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  };
 
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
@@ -32,19 +61,24 @@ export default function JobStatus() {
 
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      {jobDataDummy.map((e, i) => (
-        <BaseBox
-          key={i}
-          paddingTop={20}
-          paddingBottom={20}
-          href={`/job/${e.id}/${activeCategory}/detail`}
-          // onPress={() => console.log("pressed")}
-        >
-          <TextCustom align="center" bold truncate size="large">
-            {e.posisi} {activeCategory?.toUpperCase()}
-          </TextCustom>
-        </BaseBox>
-      ))}
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((e, i) => (
+          <BaseBox
+            key={i}
+            paddingTop={20}
+            paddingBottom={20}
+            href={`/job/${e?.id}/${activeCategory}/detail`}
+          >
+            <TextCustom align="center" bold truncate size="large">
+              {e?.title}
+            </TextCustom>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/job/[id]/[status]/detail.tsx b/app/(application)/(user)/job/[id]/[status]/detail.tsx
index 8af9a97..dcad520 100644
--- a/app/(application)/(user)/job/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/job/[id]/[status]/detail.tsx
@@ -1,23 +1,51 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   Spacing,
+  StackCustom,
   ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import Job_ButtonStatusSection from "@/screens/Job/ButtonStatusSection";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiJobGetOne } from "@/service/api-client/api-job";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function JobDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetOne({ id: id as string });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -38,9 +66,22 @@ export default function JobDetailStatus() {
         }}
       />
       <ViewWrapper>
-        <Job_BoxDetailSection data={jobDetail} />
-        <Job_ButtonStatusSection status={status as string} />
-        <Spacing />
+        {isLoadData ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            <StackCustom>
+              <Job_BoxDetailSection data={data} />
+              <Job_ButtonStatusSection
+                id={id as string}
+                status={status as string}
+                isLoading={isLoading}
+                onSetLoading={setIsLoading}
+              />
+            </StackCustom>
+            <Spacing />
+          </>
+        )}
       </ViewWrapper>
 
       <DrawerCustom
diff --git a/app/(application)/(user)/job/[id]/edit.tsx b/app/(application)/(user)/job/[id]/edit.tsx
index c456029..5a58006 100644
--- a/app/(application)/(user)/job/[id]/edit.tsx
+++ b/app/(application)/(user)/job/[id]/edit.tsx
@@ -1,21 +1,132 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BaseBox,
   ButtonCenteredOnly,
   ButtonCustom,
+  DummyLandscapeImage,
   InformationBox,
   LandscapeFrameUploaded,
+  LoaderCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
+import {
+  deleteImageService,
+  uploadImageService,
+} from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function JobEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>({
+    title: "",
+    content: "",
+    deskripsi: "",
+  });
+  const [isLoadData, setIsLoadData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [imageUri, setImageUri] = useState<string | null>(null);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const handlerOnUpdate = async () => {
+    if (!data.title || !data.content || !data.deskripsi) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      let newImageId = "";
+
+      if (imageUri) {
+        const responseUploadImage = await uploadImageService({
+          imageUri: imageUri,
+          dirId: DIRECTORY_ID.job_image,
+        });
+
+        if (responseUploadImage.success) {
+          newImageId = responseUploadImage.data.id;
+        }
+      }
+
+      if (data?.imageId) {
+        const responseDeleteImage = await deleteImageService({
+          id: data.imageId,
+        });
+
+        if (!responseDeleteImage.success) {
+          console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
+        }
+      }
+
+      const newData = {
+        title: data.title,
+        content: data.content,
+        deskripsi: data.deskripsi,
+        imageId: newImageId,
+      };
+
+      const response = await apiJobUpdateData({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = () => {
     return (
       <>
-        <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
+          Update
+        </ButtonCustom>
         <Spacing />
       </>
     );
@@ -23,45 +134,64 @@ export default function JobEdit() {
 
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
-        <LandscapeFrameUploaded />
-        <ButtonCenteredOnly
-          onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
-          }}
-          icon="upload"
-        >
-          Upload
-        </ButtonCenteredOnly>
+          {imageUri ? (
+            <LandscapeFrameUploaded image={imageUri as any} />
+          ) : (
+            <BaseBox>
+              <DummyLandscapeImage imageId={data?.imageId} />
+            </BaseBox>
+          )}
 
-        <Spacing />
+          <ButtonCenteredOnly
+            onPress={() => {
+              pickImage({
+                setImageUri,
+              });
+            }}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
 
-        <TextInputCustom
-          label="Judul Lowongan"
-          placeholder="Masukan Judul Lowongan Kerja"
-          required
-        />
+          <Spacing />
 
-        <TextAreaCustom
-          label="Syarat & Kualifikasi"
-          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
-          required
-          showCount
-          maxLength={1000}
-        />
+          <TextInputCustom
+            label="Judul Lowongan"
+            placeholder="Masukan Judul Lowongan Kerja"
+            required
+            value={data.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
 
-        <TextAreaCustom
-          label="Deskripsi Lowongan"
-          placeholder="Masukan Deskripsi Lowongan Kerja"
-          required
-          showCount
-          maxLength={1000}
-        />
+          <TextAreaCustom
+            label="Syarat & Kualifikasi"
+            placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+            required
+            showCount
+            maxLength={1000}
+            value={data.content}
+            onChangeText={(value) => setData({ ...data, content: value })}
+          />
 
-        {buttonSubmit()}
-      </StackCustom>
+          <TextAreaCustom
+            label="Deskripsi Lowongan"
+            placeholder="Masukan Deskripsi Lowongan Kerja"
+            required
+            showCount
+            maxLength={1000}
+            value={data.deskripsi}
+            onChangeText={(value) => setData({ ...data, deskripsi: value })}
+          />
+
+          {buttonSubmit()}
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/job/[id]/index.tsx b/app/(application)/(user)/job/[id]/index.tsx
index f889ac1..d3dd6ff 100644
--- a/app/(application)/(user)/job/[id]/index.tsx
+++ b/app/(application)/(user)/job/[id]/index.tsx
@@ -1,25 +1,41 @@
-import {
-  ButtonCustom,
-  Spacing,
-  ViewWrapper
-} from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
-import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { apiJobGetOne } from "@/service/api-client/api-job";
 import { Ionicons } from "@expo/vector-icons";
 import * as Clipboard from "expo-clipboard";
 import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
 import { Alert, Linking } from "react-native";
 
 export default function JobDetail() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
 
-  const OpenLinkButton = () => {
-    const jobUrl =
-      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+  const onLoadData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiJobGetOne({ id: id as string });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const linkUrl = `http://192.168.1.83:3000/job-vacancy/`;
+
+  const OpenLinkButton = ({ id }: { id: string }) => {
+    const jobUrl = `${linkUrl}${id}`;
 
     const openInBrowser = async () => {
       const supported = await Linking.canOpenURL(jobUrl);
@@ -44,9 +60,8 @@ export default function JobDetail() {
     );
   };
 
-  const CopyLinkButton = () => {
-    const jobUrl =
-      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+  const CopyLinkButton = ({ id }: { id: string }) => {
+    const jobUrl = `${linkUrl}${id}`;
 
     const copyToClipboard = async () => {
       await Clipboard.setStringAsync(jobUrl);
@@ -70,10 +85,16 @@ export default function JobDetail() {
 
   return (
     <ViewWrapper>
-      <Job_BoxDetailSection data={jobDetail}/>
-      <OpenLinkButton />
-      <Spacing />
-      <CopyLinkButton />
+      {isLoading ? (
+        <LoaderCustom />
+      ) : (
+        <>
+          <Job_BoxDetailSection data={data} />
+          <OpenLinkButton id={id as string} />
+          <Spacing />
+          <CopyLinkButton id={id as string} />
+        </>
+      )}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/job/create.tsx b/app/(application)/(user)/job/create.tsx
index 9408a6c..31ef530 100644
--- a/app/(application)/(user)/job/create.tsx
+++ b/app/(application)/(user)/job/create.tsx
@@ -7,19 +7,99 @@ import {
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiJobCreate } from "@/service/api-client/api-job";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
 import { router } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function JobCreate() {
+  const nextUrl = "/(application)/(user)/job/(tabs)/status";
+  const { user } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [image, setImage] = useState<string | null>(null);
+  const [data, setData] = useState({
+    title: "",
+    content: "",
+    deskripsi: "",
+    authorId: "",
+  });
+
+  const handlerOnSubmit = async () => {
+    let imageId = "";
+    const newData = {
+      title: data.title,
+      content: data.content,
+      deskripsi: data.deskripsi,
+      authorId: user?.id,
+      imageId: "",
+    };
+
+    if (!data.title || !data.content || !data.deskripsi || !user?.id) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      if (image === null || !image) {
+        const response = await apiJobCreate(newData);
+        if (response.success) {
+          Toast.show({
+            type: "success",
+            text1: "Berhasil",
+            text2: "Lowongan berhasil dibuat",
+          });
+          router.replace(nextUrl);
+        }
+
+        return;
+      }
+
+      const responseUploadImage = await uploadImageService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.job_image,
+      });
+
+      if (responseUploadImage.success) {
+        imageId = responseUploadImage.data.id;
+      }
+
+      const fixData = {
+        ...newData,
+        imageId: imageId,
+      };
+
+      const response = await apiJobCreate(fixData);
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: "Lowongan berhasil dibuat",
+        });
+        router.replace(nextUrl);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = () => {
     return (
       <>
-        <ButtonCustom
-          onPress={() =>
-            router.replace("/(application)/(user)/job/(tabs)/status")
-          }
-        >
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
           Simpan
         </ButtonCustom>
         <Spacing />
@@ -32,10 +112,19 @@ export default function JobCreate() {
       <StackCustom gap={"xs"}>
         <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
-        <LandscapeFrameUploaded />
+        {/* <BaseBox>
+          <Image
+            source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
+            style={{ width: "100%", height: 200 }}
+          />
+        </BaseBox> */}
+        <LandscapeFrameUploaded image={image as string} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            // router.push("/(application)/(image)/take-picture/123");
+            pickImage({
+              setImageUri: setImage,
+            });
           }}
           icon="upload"
         >
@@ -48,6 +137,8 @@ export default function JobCreate() {
           label="Judul Lowongan"
           placeholder="Masukan Judul Lowongan Kerja"
           required
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
 
         <TextAreaCustom
@@ -56,6 +147,8 @@ export default function JobCreate() {
           required
           showCount
           maxLength={1000}
+          value={data.content}
+          onChangeText={(value) => setData({ ...data, content: value })}
         />
 
         <TextAreaCustom
@@ -64,6 +157,8 @@ export default function JobCreate() {
           required
           showCount
           maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
         {buttonSubmit()}
diff --git a/app/(application)/(user)/profile/[id]/index.tsx b/app/(application)/(user)/profile/[id]/index.tsx
index bf3acfe..3d50901 100644
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -77,18 +77,16 @@ export default function Profile() {
     <>
       <Stack.Screen
         options={{
-          title: "Profile",
+          title: `Profile`,
           headerLeft: () => <LeftButtonCustom />,
-          headerRight: () =>
-            isUserCheck() && (
-              <TouchableOpacity onPress={openDrawer}>
-                <Ionicons
-                  name="ellipsis-vertical"
-                  size={20}
-                  color={MainColor.yellow}
-                />
-              </TouchableOpacity>
-            ),
+          headerRight: () => (
+            <ButtonnDot
+              id={id as string}
+              openDrawer={openDrawer}
+              isUserCheck={isUserCheck()}
+              logout={logout}
+            />
+          ),
           headerStyle: GStyles.headerStyle,
           headerTitleStyle: GStyles.headerTitleStyle,
         }}
@@ -124,3 +122,44 @@ export default function Profile() {
     </>
   );
 }
+
+const ButtonnDot = ({
+  id,
+  openDrawer,
+  isUserCheck,
+  logout,
+}: {
+  id: string;
+  openDrawer: () => void;
+  isUserCheck: boolean;
+  logout: () => Promise<void>;
+}) => {
+  const isId = id === undefined || id === null;
+
+  console.log("ID CHECK", id);
+
+  if (isId) {
+    console.log("ID UNDEFINED", id);
+    return (
+      <>
+        <TouchableOpacity onPress={logout}>
+          <Ionicons name="log-out" size={20} color={MainColor.red} />
+        </TouchableOpacity>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {isUserCheck && (
+        <TouchableOpacity onPress={openDrawer}>
+          <Ionicons
+            name="ellipsis-vertical"
+            size={20}
+            color={MainColor.yellow}
+          />
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
diff --git a/components/Box/BaseBox.tsx b/components/Box/BaseBox.tsx
index 128fa0b..9bf6fd9 100644
--- a/components/Box/BaseBox.tsx
+++ b/components/Box/BaseBox.tsx
@@ -40,7 +40,7 @@ export default function BaseBox({
 
   return (
     <>
-      {onPress || href ? (
+      {onPress as any || href ? (
         <TouchableOpacity
           activeOpacity={0.7}
           onPress={href ? () => router.navigate(href) : onPress}
diff --git a/components/Image/LandscapeFrameUploaded.tsx b/components/Image/LandscapeFrameUploaded.tsx
index 02439de..1f9b78f 100644
--- a/components/Image/LandscapeFrameUploaded.tsx
+++ b/components/Image/LandscapeFrameUploaded.tsx
@@ -2,7 +2,11 @@ import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { Image } from "react-native";
 import BaseBox from "../Box/BaseBox";
 
-export default function LandscapeFrameUploaded() {
+export default function LandscapeFrameUploaded({
+  image,
+}: {
+  image?: string;
+}) {
   return (
     <BaseBox
       style={{
@@ -11,7 +15,7 @@ export default function LandscapeFrameUploaded() {
       }}
     >
       <Image
-        source={DUMMY_IMAGE.background}
+        source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
         resizeMode="cover"
         style={{ width: "100%", height: "100%", borderRadius: 10 }}
       />
diff --git a/components/_ShareComponent/DummyLandscapeImage.tsx b/components/_ShareComponent/DummyLandscapeImage.tsx
index d4ee613..8ff9b4b 100644
--- a/components/_ShareComponent/DummyLandscapeImage.tsx
+++ b/components/_ShareComponent/DummyLandscapeImage.tsx
@@ -4,17 +4,33 @@ import { Image } from "expo-image";
 import { StyleSheet } from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import { router } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
 
-export default function DummyLandscapeImage({height, unClickPath}: {height?: number, unClickPath?: boolean}) {
+export default function DummyLandscapeImage({
+  height,
+  unClickPath,
+  imageId,
+}: {
+  height?: number;
+  unClickPath?: boolean;
+  imageId?: string;
+}) {
   return (
     <ClickableCustom
       onPress={() => {
         if (!unClickPath) {
-          router.push("/(application)/(image)/preview-image/1");
+          router.push(`/(application)/(image)/preview-image/${imageId}`);
         }
       }}
     >
-      <Image source={DUMMY_IMAGE.background} style={[styles.backgroundImage, {height: height || 200}]} />
+      <Image
+        source={
+          imageId
+            ? { uri: API_STRORAGE.GET({ fileId: imageId }) }
+            : DUMMY_IMAGE.dummy_image
+        }
+        style={[styles.backgroundImage, { height: height || 200 }]}
+      />
     </ClickableCustom>
   );
 }
diff --git a/components/_ShareComponent/SearchInput.tsx b/components/_ShareComponent/SearchInput.tsx
index b73df2f..01d297a 100644
--- a/components/_ShareComponent/SearchInput.tsx
+++ b/components/_ShareComponent/SearchInput.tsx
@@ -11,6 +11,7 @@ interface SearchInputProps {
   iconRight?: React.ReactNode;
   containerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<TextStyle>;
+  onChangeText?: (value: string) => void;
 }
 export default function SearchInput({
   placeholder,
@@ -19,6 +20,7 @@ export default function SearchInput({
   iconRight,
   containerStyle,
   style,
+  onChangeText,
   ...props
 }: SearchInputProps) {
   return (
@@ -30,6 +32,7 @@ export default function SearchInput({
           color={MainColor.placeholder}
         />
       }
+      onChangeText={onChangeText}
       placeholder={placeholder}
       borderRadius={50}
       containerStyle={[containerStyle, { marginBottom: 0 }]}
diff --git a/screens/Job/BoxDetailSection.tsx b/screens/Job/BoxDetailSection.tsx
index 5995554..0137783 100644
--- a/screens/Job/BoxDetailSection.tsx
+++ b/screens/Job/BoxDetailSection.tsx
@@ -1,28 +1,34 @@
-import { BaseBox, StackCustom, DummyLandscapeImage, TextCustom } from "@/components";
+import {
+  BaseBox,
+  StackCustom,
+  DummyLandscapeImage,
+  TextCustom,
+} from "@/components";
 
-export default function Job_BoxDetailSection({data}: {data: any}) {
-    return (
-      <>
-        <BaseBox>
-          <StackCustom gap={"lg"}>
-            <DummyLandscapeImage />
+export default function Job_BoxDetailSection({ data }: { data: any }) {
+  return (
+    <>
+      <BaseBox>
+        <StackCustom gap={"lg"}>
+          {data && data.imageId && (
+            <DummyLandscapeImage imageId={data?.imageId} />
+          )}
 
-            <TextCustom align="center" bold size="large">
-              {data?.posisi}
-            </TextCustom>
+          <TextCustom align="center" bold size="large">
+            {data?.title || "-"}
+          </TextCustom>
 
-            <StackCustom gap={"sm"}>
-              <TextCustom bold>Syarat & Ketentuan :</TextCustom>
-              <TextCustom>{data?.syaratKetentuan}</TextCustom>
-            </StackCustom>
-
-            <StackCustom gap={"sm"}>
-              <TextCustom bold>Deskripsi :</TextCustom>
-              <TextCustom>{data?.deskripsi}</TextCustom>
-            </StackCustom>
+          <StackCustom gap={"sm"}>
+            <TextCustom bold>Syarat & Ketentuan :</TextCustom>
+            <TextCustom>{data?.content || "-"}</TextCustom>
           </StackCustom>
-        </BaseBox>
-      </>
-    );
+
+          <StackCustom gap={"sm"}>
+            <TextCustom bold>Deskripsi :</TextCustom>
+            <TextCustom>{data?.deskripsi || "-"}</TextCustom>
+          </StackCustom>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
 }
-    
\ No newline at end of file
diff --git a/screens/Job/ButtonStatusSection.tsx b/screens/Job/ButtonStatusSection.tsx
index edaf004..6799bce 100644
--- a/screens/Job/ButtonStatusSection.tsx
+++ b/screens/Job/ButtonStatusSection.tsx
@@ -1,11 +1,18 @@
 import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import { apiJobDelete, apiJobUpdateStatus } from "@/service/api-client/api-job";
 import { router } from "expo-router";
-import { View } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function Job_ButtonStatusSection({
+  id,
   status,
+  isLoading,
+  onSetLoading,
 }: {
+  id: string;
   status: string;
+  isLoading: boolean;
+  onSetLoading: (value: boolean) => void;
 }) {
   const handleBatalkanReview = () => {
     AlertDefaultSystem({
@@ -13,9 +20,33 @@ export default function Job_ButtonStatusSection({
       message: "Apakah Anda yakin ingin batalkan review ini?",
       textLeft: "Batal",
       textRight: "Ya",
-      onPressRight: () => {
-        console.log("Hapus");
-        router.back();
+      onPressRight: async () => {
+        try {
+          onSetLoading(true);
+          const response = await apiJobUpdateStatus({
+            id: id,
+            status: "draft",
+          });
+          console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          onSetLoading(false);
+        }
       },
     });
   };
@@ -26,9 +57,33 @@ export default function Job_ButtonStatusSection({
       message: "Apakah Anda yakin ingin ajukan review ini?",
       textLeft: "Batal",
       textRight: "Ya",
-      onPressRight: () => {
-        console.log("Hapus");
-        router.back();
+      onPressRight: async () => {
+        try {
+          onSetLoading(true);
+          const response = await apiJobUpdateStatus({
+            id: id,
+            status: "review",
+          });
+          console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          onSetLoading(false);
+        }
       },
     });
   };
@@ -39,9 +94,33 @@ export default function Job_ButtonStatusSection({
       message: "Apakah Anda yakin ingin edit kembali ini?",
       textLeft: "Batal",
       textRight: "Ya",
-      onPressRight: () => {
-        console.log("Hapus");
-        router.back();
+      onPressRight: async () => {
+        try {
+          onSetLoading(true);
+          const response = await apiJobUpdateStatus({
+            id: id,
+            status: "draft",
+          });
+          console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          onSetLoading(false);
+        }
       },
     });
   };
@@ -52,9 +131,32 @@ export default function Job_ButtonStatusSection({
       message: "Apakah Anda yakin ingin menghapus data ini?",
       textLeft: "Batal",
       textRight: "Hapus",
-      onPressRight: () => {
-        console.log("Hapus");
-        router.back();
+      onPressRight: async () => {
+        try {
+          onSetLoading(true);
+          const response = await apiJobDelete({
+            id: id,
+          });
+          console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          onSetLoading(false);
+        }
       },
     });
   };
@@ -63,6 +165,7 @@ export default function Job_ButtonStatusSection({
     return (
       <>
         <ButtonCustom
+          isLoading={isLoading}
           backgroundColor="red"
           textColor="white"
           onPress={handleOpenDeleteAlert}
@@ -90,7 +193,7 @@ export default function Job_ButtonStatusSection({
 
     case "review":
       return (
-        <ButtonCustom onPress={handleBatalkanReview}>
+        <ButtonCustom isLoading={isLoading} onPress={handleBatalkanReview}>
           Batalkan Review
         </ButtonCustom>
       );
@@ -99,15 +202,14 @@ export default function Job_ButtonStatusSection({
       return (
         <>
           <Grid>
-            <Grid.Col span={5}>
-              <ButtonCustom onPress={handleAjukanReview}>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom isLoading={isLoading} onPress={handleAjukanReview}>
                 Ajukan Review
               </ButtonCustom>
             </Grid.Col>
-            <Grid.Col span={2}>
-              <View />
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
             </Grid.Col>
-            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
           </Grid>
         </>
       );
@@ -116,15 +218,15 @@ export default function Job_ButtonStatusSection({
       return (
         <>
           <Grid>
-            <Grid.Col span={5}>
-              <ButtonCustom onPress={handleEditKembali}>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom isLoading={isLoading} onPress={handleEditKembali}>
                 Edit Kembali
               </ButtonCustom>
             </Grid.Col>
-            <Grid.Col span={2}>
-              <View />
+
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              {DeleteButton()}
             </Grid.Col>
-            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
           </Grid>
         </>
       );
diff --git a/service/api-client/api-job.ts b/service/api-client/api-job.ts
new file mode 100644
index 0000000..fbd3c98
--- /dev/null
+++ b/service/api-client/api-job.ts
@@ -0,0 +1,87 @@
+import { apiConfig } from "../api-config";
+
+export async function apiJobCreate(data: any) {
+  try {
+    const response = await apiConfig.post(`/mobile/job`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiJobGetByStatus({
+  authorId,
+  status,
+}: {
+  authorId: string;
+  status: string;
+}) {
+  try {
+    const response = await apiConfig.get(`/mobile/job/${authorId}/${status}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiJobGetOne({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/job/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiJobUpdateStatus({
+  id,
+  status,
+}: {
+  id: string;
+  status: "draft" | "review" | "publish" | "reject";
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/job/${id}/${status}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiJobDelete({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/job/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiJobGetAll({ search }: { search?: string }) {
+  try {
+    const searchText = search ? `?search=${search}` : "";
+    const response = await apiConfig.get(`/mobile/job${searchText}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiJobUpdateData({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/job/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
diff --git a/service/upload-service.ts b/service/upload-service.ts
index 3fe7347..dcc7e02 100644
--- a/service/upload-service.ts
+++ b/service/upload-service.ts
@@ -1,6 +1,6 @@
 import { API_BASE_URL } from "@/service/api-config";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { apiFileUpload } from "./api-client/api-file";
+import { apiFileDelete, apiFileUpload } from "./api-client/api-file";
 
 export async function uploadImageService({
   dirId,
@@ -49,3 +49,18 @@ export async function uploadImageService({
     throw error;
   }
 }
+
+export async function deleteImageService({ id }: { id: string }) {
+  const token = await AsyncStorage.getItem("authToken");
+
+  try {
+    const response = await apiFileDelete({
+      id: id,
+      token: token as string,
+    });
+
+    return response;
+  } catch (error) {
+    throw error;
+  }
+}