diff --git a/src/app/(not-user)/job-vacancy/[id]/page.tsx b/src/app/(not-user)/job-vacancy/[id]/page.tsx
index 33425748..13ecbc48 100644
--- a/src/app/(not-user)/job-vacancy/[id]/page.tsx
+++ b/src/app/(not-user)/job-vacancy/[id]/page.tsx
@@ -1,13 +1,10 @@
 import { Job_UiNotUserView } from "@/app_modules/job/_ui";
-import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const jobId = params.id;
-  const dataJob = await job_getOneById(jobId);
+export default async function Page() {
 
   return (
     <>
-      <Job_UiNotUserView data={dataJob} />
+      <Job_UiNotUserView />
     </>
   );
 }
diff --git a/src/app/api/not-user/job/[id]/route.ts b/src/app/api/not-user/job/[id]/route.ts
new file mode 100644
index 00000000..757fa07c
--- /dev/null
+++ b/src/app/api/not-user/job/[id]/route.ts
@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+
+    const data = await prisma.job.findUnique({
+      where: {
+        id: id,
+      },
+    });
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("Error fetching job data:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch job data" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app_modules/_global/lib/api_fetch_not_user.tsx b/src/app_modules/_global/lib/api_fetch_not_user.tsx
new file mode 100644
index 00000000..5795eb99
--- /dev/null
+++ b/src/app_modules/_global/lib/api_fetch_not_user.tsx
@@ -0,0 +1,16 @@
+export async function apiGetNotUserForJob({ id }: { id: string }) {
+  try {
+    const response = await fetch(`/api/not-user/job/${id}`);
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error("Failed to get job", response.statusText, errorData);
+      throw new Error(errorData?.message || "Failed to get job");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get job:", error);
+    throw error;
+  }
+}
diff --git a/src/app_modules/job/_ui/ui_not_user_view_job.tsx b/src/app_modules/job/_ui/ui_not_user_view_job.tsx
index 236e9faf..bf89beed 100644
--- a/src/app_modules/job/_ui/ui_not_user_view_job.tsx
+++ b/src/app_modules/job/_ui/ui_not_user_view_job.tsx
@@ -7,23 +7,16 @@ import UI_NewLayoutTamplate, {
 } from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { Job_ViewNotUserJobVacany } from "../_view";
 
-export function Job_UiNotUserView({ data }: { data: any }) {
+export function Job_UiNotUserView() {
   return (
     <>
-      {/* <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate title="Job Vacancy" hideButtonLeft />
-        }
-      >
-        <Job_ViewNotUserJobVacany data={data} />
-      </UIGlobal_LayoutTamplate> */}
 
       <UI_NewLayoutTamplate>
         <UI_NewHeader>
           <Component_Header title="Job Vacancy" hideButtonLeft />
         </UI_NewHeader>
         <UI_NewChildren>
-          <Job_ViewNotUserJobVacany data={data} />
+          <Job_ViewNotUserJobVacany/>
         </UI_NewChildren>
       </UI_NewLayoutTamplate>
     </>
diff --git a/src/app_modules/job/_view/view_not_user_view_job.tsx b/src/app_modules/job/_view/view_not_user_view_job.tsx
index 75908f27..4cd6139d 100644
--- a/src/app_modules/job/_view/view_not_user_view_job.tsx
+++ b/src/app_modules/job/_view/view_not_user_view_job.tsx
@@ -2,9 +2,29 @@ import {
   ComponentGlobal_CardStyles,
   ComponentGlobal_NotUserLoadImage,
 } from "@/app_modules/_global/component";
-import { Center, Stack, Text, Title } from "@mantine/core";
+import { apiGetNotUserForJob } from "@/app_modules/_global/lib/api_fetch_not_user";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Center, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+
+export function Job_ViewNotUserJobVacany() {
+  const { id } = useParams();
+  const [data, setData] = useState<any>(null);
+
+  useShallowEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await apiGetNotUserForJob({ id: id as string });
+        setData(data);
+      } catch (error) {
+        console.error("Error fetching job data:", error);
+      }
+    };
+    fetchData();
+  }, []);
 
-export function Job_ViewNotUserJobVacany({ data }: { data: any }) {
   return (
     <>
       {data ? (
@@ -32,13 +52,7 @@ export function Job_ViewNotUserJobVacany({ data }: { data: any }) {
           </Stack>
         </ComponentGlobal_CardStyles>
       ) : (
-        <ComponentGlobal_CardStyles>
-          <Stack spacing={"xl"}>
-            <Title order={3} align="center">
-              Data Not Found
-            </Title>
-          </Stack>
-        </ComponentGlobal_CardStyles>
+        <CustomSkeleton height={400} />
       )}
     </>
   );
diff --git a/src/app_modules/job/detail/main/view.tsx b/src/app_modules/job/detail/main/view.tsx
index d725c4a4..9d315e5a 100644
--- a/src/app_modules/job/detail/main/view.tsx
+++ b/src/app_modules/job/detail/main/view.tsx
@@ -44,13 +44,13 @@ export default function Job_MainDetail() {
       <Stack>
         <ComponentJob_DetailData data={data as any} />
 
-        {/* {!data ? (
+        {!data ? (
           <Center>
             <CustomSkeleton height={40} width={"50%"} radius={"xl"} />
           </Center>
         ) : (
           <ButtonAction jobId={param.id} />
-        )} */}
+        )}
       </Stack>
     </>
   );
diff --git a/src/middleware.ts b/src/middleware.ts
index 5c733d6c..ec0e424b 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -18,6 +18,7 @@ const CONFIG: MiddlewareConfig = {
   userPath: "/dev/home",
   publicRoutes: [
     "/",
+    "/api/not-user/*",
     "/api/voting/*",
     "/api/collaboration/*",
     "/api/notifikasi/*",
@@ -36,7 +37,7 @@ const CONFIG: MiddlewareConfig = {
     "/validasi",
     "/splash",
     "/invalid-user",
-    "/job-vacancy",
+    "/job-vacancy/*",
     "/preview-image",
     "/auth/login",
     "/auth/api/login",