diff --git a/src/app/dev/portofolio/edit/data/[id]/page.tsx b/src/app/dev/portofolio/edit/data/[id]/page.tsx
index 6325f831..625d8ee4 100644
--- a/src/app/dev/portofolio/edit/data/[id]/page.tsx
+++ b/src/app/dev/portofolio/edit/data/[id]/page.tsx
@@ -1,21 +1,6 @@
 import { Portofolio_EditDataBisnis } from "@/app_modules/katalog/portofolio";
-import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/get_one_portofolio";
-import { Portofolio_getMasterBidangBisnis } from "@/app_modules/katalog/portofolio/fun/master/get_bidang_bisnis";
-import _ from "lodash";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let portoId = params.id;
-  const data = await portofolio_getOneById(portoId);
-  const dataPorto = _.omit(data, [
-    "Logo",
-    "Portofolio_MediaSosial",
-    "Portofolio_MediaSosial",
-    "logoId",
-    "profileId",
-  ]);
-
-  const listBidang = await Portofolio_getMasterBidangBisnis()
 
+export default async function Page() {
   return (
     <>
       <Portofolio_EditDataBisnis />
diff --git a/src/app/dev/portofolio/edit/logo/[id]/page.tsx b/src/app/dev/portofolio/edit/logo/[id]/page.tsx
index 11d25a47..ef22c078 100644
--- a/src/app/dev/portofolio/edit/logo/[id]/page.tsx
+++ b/src/app/dev/portofolio/edit/logo/[id]/page.tsx
@@ -2,26 +2,11 @@ import { Portofolio_EditLogoBisnis } from "@/app_modules/katalog/portofolio";
 import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/get_one_portofolio";
 import _ from "lodash";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  let portoId = params.id;
-  const dataPorto = await portofolio_getOneById(portoId).then((res) =>
-    _.omit(res, [
-      "Logo",
-      "MasterBidangBisnis",
-      "Portofolio_MediaSosial",
-      "active",
-      "alamatKantor",
-      "deskripsi",
-      "masterBidangBisnisId",
-      "profileId",
-      "tlpn",
-      "namaBisnis"
-    ])
-  );
+export default async function Page() {
 
   return (
     <>
-      <Portofolio_EditLogoBisnis  dataPorto={dataPorto as any} />
+      <Portofolio_EditLogoBisnis   />
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
index 387d4742..2864f981 100644
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
+++ b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
@@ -76,8 +76,6 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
   return (
     <>
       <Box
-        p={"xs"}
-        bg={"red"}
         style={{
           display: "flex",
           justifyContent: "center",
@@ -93,7 +91,7 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
           color="yellow"
           c={"black"}
           style={{
-            width: "100%",
+            width: "90%",
             transition: "0.5s",
             position: "absolute",
             bottom: 20,
diff --git a/src/app_modules/katalog/portofolio/component/skeleton_view.tsx b/src/app_modules/katalog/portofolio/component/skeleton_view.tsx
index fc8e114b..387f7a90 100644
--- a/src/app_modules/katalog/portofolio/component/skeleton_view.tsx
+++ b/src/app_modules/katalog/portofolio/component/skeleton_view.tsx
@@ -1,7 +1,7 @@
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Stack } from "@mantine/core";
 
-export { Portofolio_SkeletonEditDataBisnis };
+export { Portofolio_SkeletonEditDataBisnis, Portofolio_SkeletonEditLogoBisnis };
 
 function Portofolio_SkeletonEditDataBisnis() {
   return (
@@ -16,3 +16,13 @@ function Portofolio_SkeletonEditDataBisnis() {
     </>
   );
 }
+
+function Portofolio_SkeletonEditLogoBisnis() {
+  return (
+    <>
+      <Stack spacing={"xl"} px={"sm"}>
+        <CustomSkeleton height={250} width={"100%"} />
+      </Stack>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
index cb2f4867..49ed5f76 100644
--- a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
+++ b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
@@ -1,24 +1,49 @@
 "use client";
 
-import {
-  AccentColor
-} from "@/app_modules/_global/color/color_pallet";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_ButtonUploadFileImage,
   ComponentGlobal_LoadImage,
 } from "@/app_modules/_global/component";
-import { Center, Image, Paper, Stack } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Center, Image, Paper, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
+import { apiGetPortofolioById } from "../../component/api_fetch_portofolio";
 import { MODEL_PORTOFOLIO } from "../../model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Portofolio_SkeletonEditLogoBisnis } from "../../component/skeleton_view";
 
-export default function Portofolio_EditLogoBisnis({
-  dataPorto,
-}: {
-  dataPorto: MODEL_PORTOFOLIO;
-}) {
+export default function Portofolio_EditLogoBisnis() {
+  const params = useParams<{ id: string }>();
+  const portofolioId = params.id;
   const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>(null);
+  const [data, setData] = useState<MODEL_PORTOFOLIO | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  const onLoadData = async () => {
+    try {
+      const respone = await apiGetPortofolioById({
+        id: portofolioId,
+      });
+
+      if (respone.success) {
+        setData(respone.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data portofolio", error);
+    }
+  };
+
+  if (!data) return <Portofolio_SkeletonEditLogoBisnis />;
 
   return (
     <>
@@ -37,7 +62,7 @@ export default function Portofolio_EditLogoBisnis({
             {img ? (
               <Image maw={250} alt="Image" src={img} />
             ) : (
-              <ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
+              <ComponentGlobal_LoadImage fileId={data.logoId} />
             )}
           </Paper>
           <Center>
@@ -49,8 +74,8 @@ export default function Portofolio_EditLogoBisnis({
         </Stack>
         <ComponentPortofolio_ButtonEditLogoBisnis
           file={file as any}
-          portofolioId={dataPorto.id}
-          fileRemoveId={dataPorto.logoId}
+          portofolioId={data.id}
+          fileRemoveId={data.logoId}
         />
       </Stack>
     </>