diff --git a/src/app/dev/profile/upload/background/[id]/page.tsx b/src/app/dev/profile/upload/background/[id]/page.tsx
index ef64703e..35367183 100644
--- a/src/app/dev/profile/upload/background/[id]/page.tsx
+++ b/src/app/dev/profile/upload/background/[id]/page.tsx
@@ -1,12 +1,9 @@
-import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile"
 import Profile_UpdateFotoBackground from "@/app_modules/katalog/profile/upload/foto_background"
 
-export default async function Page({params}:{params: {id: string}}) {
-    let profileId = params.id
-    const dataProfile = await Profile_getOneById(profileId)
-
-    return <>
-    <Profile_UpdateFotoBackground dataProfile={dataProfile as any}/>
+export default async function Page() {
+  return (
+    <>
+      <Profile_UpdateFotoBackground />
     </>
-    
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/dev/profile/upload/foto/[id]/page.tsx b/src/app/dev/profile/upload/foto/[id]/page.tsx
index b36862ab..66ced2af 100644
--- a/src/app/dev/profile/upload/foto/[id]/page.tsx
+++ b/src/app/dev/profile/upload/foto/[id]/page.tsx
@@ -1,13 +1,9 @@
 import { UploadFotoProfile } from "@/app_modules/katalog/profile";
-import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let profileId = params.id;
-  const dataProfile = await Profile_getOneById(profileId);
 
+export default async function Page() {
   return (
     <>
-      <UploadFotoProfile dataProfile={dataProfile as any} />
+      <UploadFotoProfile />
     </>
   );
 }
diff --git a/src/app_modules/katalog/profile/fun/get/get_one_profile.ts b/src/app_modules/katalog/profile/fun/get/get_one_profile.ts
index 013493fc..1cace2aa 100644
--- a/src/app_modules/katalog/profile/fun/get/get_one_profile.ts
+++ b/src/app_modules/katalog/profile/fun/get/get_one_profile.ts
@@ -9,6 +9,5 @@ export async function Profile_getOneById(profileId: string) {
     },
   });
 
-  
   return data;
 }
diff --git a/src/app_modules/katalog/profile/upload/foto_background/index.tsx b/src/app_modules/katalog/profile/upload/foto_background/index.tsx
index 3c24e726..2a7ee62e 100644
--- a/src/app_modules/katalog/profile/upload/foto_background/index.tsx
+++ b/src/app_modules/katalog/profile/upload/foto_background/index.tsx
@@ -9,16 +9,39 @@ import { AspectRatio, Center, Image, Stack } from "@mantine/core";
 import { useState } from "react";
 import { Profile_ComponentButtonUpdateBackgroundProfile } from "../../_component";
 import { MODEL_PROFILE } from "../../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetOneProfileById } from "../../lib/api_fetch_profile";
+import { useParams } from "next/navigation";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Profile_UpdateFotoBackground({
-  dataProfile,
-}: {
-  dataProfile: MODEL_PROFILE;
-}) {
-  const [profile, setProfile] = useState(dataProfile);
+export default function Profile_UpdateFotoBackground() {
+  const param = useParams<{ id: string }>();
+  const profileId = param.id;
+  const [profile, setProfile] = useState<MODEL_PROFILE | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneProfileById({ id: profileId });
+      if (response && response.success) {
+        setProfile(response.data);
+      } else {
+        setProfile(null);
+      }
+    } catch (error) {
+      console.log("Error get profile", error);
+      setProfile(null);
+    }
+  };
+
+  if (!profile)
+    return <CustomSkeleton height={300} width={"100%"} radius={"md"} />;
+
   return (
     <>
       <Stack px={"xs"}>
diff --git a/src/app_modules/katalog/profile/upload/foto_profile/index.tsx b/src/app_modules/katalog/profile/upload/foto_profile/index.tsx
index eaeace7d..85c5bff9 100644
--- a/src/app_modules/katalog/profile/upload/foto_profile/index.tsx
+++ b/src/app_modules/katalog/profile/upload/foto_profile/index.tsx
@@ -9,16 +9,39 @@ import { AspectRatio, Center, Image, Stack } from "@mantine/core";
 import { useState } from "react";
 import { Profile_ComponentButtonUpdatePhotoProfile } from "../../_component";
 import { MODEL_PROFILE } from "../../model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { apiGetOneProfileById } from "../../lib/api_fetch_profile";
 
-export default function UploadFotoProfile({
-  dataProfile,
-}: {
-  dataProfile: MODEL_PROFILE;
-}) {
-  const [profile, setProfile] = useState(dataProfile);
+export default function UploadFotoProfile() {
+  const param = useParams<{ id: string }>();
+  const profileId = param.id;
+  const [profile, setProfile] = useState<MODEL_PROFILE | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneProfileById({ id: profileId });
+      if (response && response.success) {
+        setProfile(response.data);
+      } else {
+        setProfile(null);
+      }
+    } catch (error) {
+      console.log("Error get profile", error);
+      setProfile(null);
+    }
+  };
+
+  if (!profile)
+    return <CustomSkeleton height={300} width={"100%"} radius={"md"} />;
+
   return (
     <>
       <Stack px={"xs"}>