diff --git a/src/app_modules/katalog/profile/edit/view.tsx b/src/app_modules/katalog/profile/edit/view.tsx
index 2c39c97d..4425460d 100644
--- a/src/app_modules/katalog/profile/edit/view.tsx
+++ b/src/app_modules/katalog/profile/edit/view.tsx
@@ -12,9 +12,9 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
 import { gs_profile } from "../state/global_state";
-import { g_getProfile } from "../fun/fun-get-profile";
+import { g_getProfile } from "../fun/fun_get_profile";
 
-export default function EditProfile({ data }: { data: any }) {
+export default function EditProfile() {
   const router = useRouter();
 
   //Get data profile
@@ -24,6 +24,8 @@ export default function EditProfile({ data }: { data: any }) {
   }, []);
 
 
+
+
   async function onUpdate() {
     const body = profile;
     if (_.values(body).includes("")) return toast("Lengkapi data");
@@ -51,8 +53,8 @@ export default function EditProfile({ data }: { data: any }) {
     <>
       {/* {JSON.stringify(profile)} */}
       <Stack px={"sm"}>
-        <TextInput label="Username" disabled value={data.User.username} />
-        <TextInput label="Nomor" disabled value={data.User.nomor} />
+        <TextInput label="Username" disabled value={profile.User.username} />
+        <TextInput label="Nomor" disabled value={profile.User.nomor} />
 
         <TextInput
           label="Nama"
diff --git a/src/app_modules/katalog/profile/fun/api-get-profile.ts b/src/app_modules/katalog/profile/fun/api-get-profile.ts
index 2caa6d92..4fb27faa 100644
--- a/src/app_modules/katalog/profile/fun/api-get-profile.ts
+++ b/src/app_modules/katalog/profile/fun/api-get-profile.ts
@@ -24,13 +24,7 @@ export async function getProfile() {
       alamat: true,
       jenisKelamin: true,
       active: true,
-      ImageProfile: {
-        select: {
-          id: true,
-          url: true,
-          active: true,
-        },
-      },
+      imagesId: true,
       User: {
         select : {
           username: true,
diff --git a/src/app_modules/katalog/profile/fun/fun-get-profile.ts b/src/app_modules/katalog/profile/fun/fun_get_profile.ts
similarity index 53%
rename from src/app_modules/katalog/profile/fun/fun-get-profile.ts
rename to src/app_modules/katalog/profile/fun/fun_get_profile.ts
index 9e00b1e1..d7e8e66e 100644
--- a/src/app_modules/katalog/profile/fun/fun-get-profile.ts
+++ b/src/app_modules/katalog/profile/fun/fun_get_profile.ts
@@ -1,3 +1,4 @@
+import { myConsole } from "@/app/fun/my_console";
 import { getProfile } from "..";
 
 /**
@@ -6,6 +7,9 @@ import { getProfile } from "..";
  * @returns data profile
  */
 export async function g_getProfile(setProfile: any) {
-    const data = await getProfile().then((res) => res);
-    setProfile(data)
-  }
\ No newline at end of file
+  await getProfile()
+    .then((res) => res)
+    .then((val) => {
+      setProfile(val);
+    });
+}
diff --git a/src/app_modules/katalog/profile/fun/get_foto_profile.ts b/src/app_modules/katalog/profile/fun/get_foto_profile.ts
new file mode 100644
index 00000000..d8d24f5a
--- /dev/null
+++ b/src/app_modules/katalog/profile/fun/get_foto_profile.ts
@@ -0,0 +1,16 @@
+"use server";
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+
+export async function getFotoProfile(id: any) {
+  const imgUrl = await prisma.images.findUnique({
+    where: {
+      id: id,
+    },
+    select: {
+      id: true,
+      url: true,
+    },
+  });
+  return imgUrl;
+}
diff --git a/src/app_modules/katalog/profile/fun/upload_foto.ts b/src/app_modules/katalog/profile/fun/upload_foto.ts
new file mode 100644
index 00000000..043bd563
--- /dev/null
+++ b/src/app_modules/katalog/profile/fun/upload_foto.ts
@@ -0,0 +1,52 @@
+"use server";
+
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+import fs from "fs";
+import _ from "lodash";
+import { cookies } from "next/headers";
+import { v4 } from "uuid";
+
+/**
+ *
+ * @param formData
+ * @returns upload gambar ke /public/img
+ */
+export async function funUploadFoto(formData: FormData, id: string) {
+  const file: any = formData.get("file");
+  const fName = file.name;
+  const fExt = _.lowerCase(file.name.split(".").pop());
+  const fRandomName = v4(fName) + "." + fExt;
+
+  myConsole(id);
+  myConsole(fExt);
+
+  const upload = await prisma.images.create({
+    data: {
+      url: fRandomName,
+    },
+    select: {
+      id: true,
+      url: true,
+    },
+  });
+
+  if (upload) {
+    await prisma.profile.update({
+      where: {
+        id: id,
+      },
+      data: {
+        imagesId: upload.id,
+      },
+    });
+  }
+
+  const upFolder = Buffer.from(await file.arrayBuffer());
+  fs.writeFileSync(`./public/img/${upload.url}`, upFolder);
+
+  return {
+    success: true,
+    data: upload,
+  };
+}
diff --git a/src/app_modules/katalog/profile/index.ts b/src/app_modules/katalog/profile/index.ts
index d4f97edc..a5081aaf 100644
--- a/src/app_modules/katalog/profile/index.ts
+++ b/src/app_modules/katalog/profile/index.ts
@@ -1,8 +1,17 @@
 import ProfileLayout from "./create/layout";
 import CreateProfile from "./create/view";
-import {getProfile} from "./fun/api-get-profile";
-import EditProfileLayout from './edit/layout';
-import EditProfileView from './edit/view'
+import { getProfile } from "./fun/api-get-profile";
+import EditProfileLayout from "./edit/layout";
+import EditProfileView from "./edit/view";
+import UploadFotoProfile from "./upload/view";
+import UploadFotoProfileLayout from "./upload/layout";
 
-
-export {ProfileLayout, CreateProfile, getProfile, EditProfileView, EditProfileLayout}
\ No newline at end of file
+export {
+  ProfileLayout,
+  CreateProfile,
+  getProfile,
+  EditProfileView,
+  EditProfileLayout,
+  UploadFotoProfile,
+  UploadFotoProfileLayout,
+};
diff --git a/src/app_modules/katalog/profile/upload/layout.tsx b/src/app_modules/katalog/profile/upload/layout.tsx
new file mode 100644
index 00000000..fc81d9d4
--- /dev/null
+++ b/src/app_modules/katalog/profile/upload/layout.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  FileButton,
+  Flex,
+  Footer,
+  Group,
+  Header,
+  Text,
+} from "@mantine/core";
+import { IconArrowLeft, IconUpload } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import toast from "react-simple-toasts";
+import { gs_profile } from "../state/global_state";
+import { useShallowEffect } from "@mantine/hooks";
+import { g_getProfile } from "../fun/fun_get_profile";
+import { funUploadFoto } from "../fun/upload_foto";
+import { useRouter } from "next/navigation";
+
+export default function UploadFotoProfileLayout({
+  children,
+}: {
+  children: any;
+}) {
+  const router = useRouter()
+  const [profile, setProfile] = useAtom(gs_profile);
+  useShallowEffect(() => {
+    g_getProfile(setProfile);
+  }, []);
+
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} px={"sm"}>
+            <Group position="apart" h={50}>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => router.push("/dev/katalog/view")}
+              >
+                <IconArrowLeft />
+              </ActionIcon>
+              <Text>Upload Foto Profile</Text>
+              <ActionIcon variant="transparent"></ActionIcon>
+            </Group>
+          </Header>
+        }
+        footer={
+          <Footer height={70}>
+            <Flex align={"center"} justify={"center"} h={70} gap={"xl"}>
+              <Flex align={"center"} justify={"center"} h={70}>
+                <Flex direction={"column"} align={"center"}>
+                  <FileButton
+                    onChange={async (files) => {
+                      const id = profile?.id
+
+                      if (!files) return toast("File Kosong");
+                      const fd = new FormData();
+                      fd.append("file", files);
+
+                      const upFoto = await funUploadFoto(fd, id);
+                      if (upFoto.success) {
+                        toast("Upload berhasil");
+                        router.push("/dev/katalog/view")
+                        // loadDataProfile(valUser.id, setUser, setProfile);
+                      }
+                    }}
+                    accept="image/png,image/jpeg,image/webp"
+                  >
+                    {(props) => (
+                      <ActionIcon {...props}>
+                        <IconUpload />
+                      </ActionIcon>
+                    )}
+                  </FileButton>
+                  <Text fz={"sm"} fw={"bold"}>
+                    Upload
+                  </Text>
+                </Flex>
+              </Flex>
+            </Flex>
+
+            {/*  */}
+          </Footer>
+        }
+      >
+        {children}
+        {/* {JSON.stringify(profile)} */}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/profile/upload/view.tsx b/src/app_modules/katalog/profile/upload/view.tsx
new file mode 100644
index 00000000..f4096940
--- /dev/null
+++ b/src/app_modules/katalog/profile/upload/view.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { AspectRatio, FileButton, Image, Paper, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { g_getProfile } from "../fun/fun_get_profile";
+import { gs_profile } from "../state/global_state";
+import { getFotoProfile } from "../fun/get_foto_profile";
+import { useState } from "react";
+import { ApiHipmi } from "@/app/lib/api";
+import { myConsole } from "@/app/fun/my_console";
+
+export default function UploadFotoProfile() {
+  const [profile, setProfile] = useAtom(gs_profile);
+  useShallowEffect(() => {
+    g_getProfile(setProfile);
+  }, []);
+
+  const [foto, setFoto] = useState<any | null>(null);
+  useShallowEffect(() => {
+    if (profile?.imagesId === undefined || profile?.imagesId === null) {
+      myConsole("Waiting data");
+    } else {
+      getFotoProfile(profile?.imagesId).then((res) => setFoto(res?.url));
+    }
+  }, [profile?.imagesId]);
+
+  return (
+    <>
+    {/* {JSON.stringify(foto)} */}
+      <AspectRatio ratio={1 / 1} >
+       <Paper  p={"lg"}>
+       {foto ? <Image alt="" src={ApiHipmi.get_foto + `${foto}`} /> : <Image alt="" src={"/aset/avatar.png"} />}
+       </Paper>
+      </AspectRatio>
+      {/* {JSON.stringify(profile)} */}
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/view/view.tsx b/src/app_modules/katalog/view/view.tsx
index 682cbc10..6fe31f5e 100644
--- a/src/app_modules/katalog/view/view.tsx
+++ b/src/app_modules/katalog/view/view.tsx
@@ -29,7 +29,9 @@ import { getProfile } from "../profile";
 import { gs_profile } from "../profile/state/global_state";
 import { myConsole } from "@/app/fun/my_console";
 import { useAtom } from "jotai";
-import { g_getProfile } from "../profile/fun/fun-get-profile";
+import { g_getProfile } from "../profile/fun/fun_get_profile";
+import { getFotoProfile } from "../profile/fun/get_foto_profile";
+import { ApiHipmi } from "@/app/lib/api";
 
 export default function KatalogView() {
   const router = useRouter();
@@ -40,20 +42,51 @@ export default function KatalogView() {
     g_getProfile(setProfile);
   }, []);
 
+  const [foto, setFoto] = useState<any | null>(null);
+  useShallowEffect(() => {
+    if (profile?.imagesId === undefined || profile?.imagesId === null) {
+      myConsole("Waiting data");
+    } else {
+      getFotoProfile(profile?.imagesId).then((res) => setFoto(res?.url));
+    }
+    myConsole(profile?.imagesId);
+  }, [profile?.imagesId]);
+
   return (
     <>
+      {/* Background dan foto */}
       <Box>
         <Paper bg={"gray"} p={"md"}>
           <Image alt="" src={"/aset/logo.png"} />
         </Paper>
         <Center>
-          <Image
-            alt=""
-            src={"/aset/avatar.png"}
-            height={100}
-            width={100}
-            sx={{ position: "absolute", marginBottom: 10, paddingBottom: 10 }}
-          />
+          {foto ? (
+            <Image
+              radius={50}
+              alt=""
+              src={ApiHipmi.get_foto + `${foto}`}
+              height={100}
+              width={100}
+              sx={{
+                position: "absolute",
+                marginBottom: 10,
+                paddingBottom: 10,
+              }}
+            />
+          ) : (
+            <Image
+              radius={50}
+              alt=""
+              src={"/aset/avatar.png"}
+              height={100}
+              width={100}
+              sx={{
+                position: "absolute",
+                marginBottom: 10,
+                paddingBottom: 10,
+              }}
+            />
+          )}
         </Center>
         <Center>
           <ActionIcon
@@ -62,7 +95,7 @@ export default function KatalogView() {
             variant="transparent"
             bg={"gray"}
             radius={50}
-            // onClick={() => router.push("/dev/katalog/profile/upload")}
+            onClick={() => router.push("/dev/katalog/profile/upload")}
             sx={{ position: "relative" }}
           >
             <IconCamera color="black" size={20} />
@@ -70,6 +103,7 @@ export default function KatalogView() {
         </Center>
       </Box>
 
+      {/* Username dan Nama */}
       <Group position="apart">
         <Flex direction={"column"} mt={"lg"}>
           <Text fz={"lg"} fw={"bold"}>
@@ -87,6 +121,7 @@ export default function KatalogView() {
         </ActionIcon>
       </Group>
 
+      {/* Info user: nomor, email dll */}
       <Flex direction={"column"} pt={"lg"}>
         <Grid>
           <Grid.Col span={"content"}>