diff --git a/src/app_modules/katalog/portofolio/api/get-bidang-bisnis.ts b/src/app_modules/katalog/portofolio/api/get-bidang-bisnis.ts
new file mode 100644
index 00000000..4130f24d
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/api/get-bidang-bisnis.ts
@@ -0,0 +1,9 @@
+"use server"
+
+import { myConsole } from "@/app/fun/my_console"
+import prisma from "@/app/lib/prisma"
+
+export async function getBidangBisnis() {
+    const data = await prisma.masterBidangBisnis.findMany()
+    return data
+}
\ No newline at end of file
diff --git a/src/app_modules/katalog/portofolio/api/get-portofolio.ts b/src/app_modules/katalog/portofolio/api/get-portofolio.ts
new file mode 100644
index 00000000..2a775a57
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/api/get-portofolio.ts
@@ -0,0 +1,35 @@
+"use server";
+
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+
+/**
+ * 
+ * @param id - profileId
+ * @returns list portofolio by Id
+ */
+export default async function getListPortofolio(id: string) {
+  myConsole(id);
+  
+
+  const data = await prisma.katalog.findMany({
+    where: {
+      profileId: id,
+    },
+    select: {
+      id: true,
+      namaBisnis: true,
+      alamatKantor: true,
+      tlpn: true,
+      deskripssi: true,
+      active: true,
+      masterBidangBisnisId: true,
+    },
+  });
+  
+  if (!data) {
+    throw new Error('Failed to fetch data')
+  }
+
+  return data;
+}
diff --git a/src/app_modules/katalog/portofolio/create/layout.tsx b/src/app_modules/katalog/portofolio/create/layout.tsx
new file mode 100644
index 00000000..e5e6e58c
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/create/layout.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function PortofolioLayout({ children }: { children: any }) {
+  const router = useRouter();
+  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>Buat Portofolio</Text>
+              <ActionIcon variant="transparent"></ActionIcon>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/create/view.tsx b/src/app_modules/katalog/portofolio/create/view.tsx
new file mode 100644
index 00000000..0ff7a01d
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { myConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import { Warna } from "@/app/lib/warna";
+import { Button, Select, Stack, TextInput, Title } from "@mantine/core";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+export default function CreatePortofolio({
+  data,
+  profileId,
+}: {
+  data: any;
+  profileId: any;
+}) {
+  const router = useRouter();
+  const [value, setValue] = useState({
+    namaBisnis: "",
+    bidangBisnisId: "",
+    alamatKantor: "",
+    tlpn: "",
+    deskripssi: "",
+  });
+
+  async function onSubmit() {
+    const body = {
+      profileId: profileId,
+      namaBisnis: value.namaBisnis,
+      masterBidangBisnisId: value.bidangBisnisId,
+      alamatKantor: value.alamatKantor,
+      tlpn: value.tlpn,
+      deskripssi: value.deskripssi,
+    };
+
+    if (_.values(body).includes("")) return toast("Lengkapi Data");
+
+    await fetch(ApiHipmi.create_portofolio, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        myConsole(val)
+        if (val.status == 201) {
+          toast("Berhasil disimpan");
+          return router.push("/dev/katalog/view");
+        } else {
+          return toast("Gagal disimpa");
+        }
+      });
+  }
+
+  return (
+    <>
+      {/* {JSON.stringify(data)} */}
+      <Stack px={"sm"}>
+        <TextInput
+          label="Nama Bisnis"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              namaBisnis: val.target.value,
+            });
+          }}
+        />
+        <Select
+          label="Bidang Bisnis"
+          data={_.map(data).map((e: any) => ({ label: e.name, value: e.id }))}
+          onChange={(val) => {
+            setValue({
+              ...value,
+              bidangBisnisId: val as any,
+            });
+          }}
+        />
+        <TextInput
+          label="Alamat Kantor"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              alamatKantor: val.target.value,
+            });
+          }}
+        />
+        <TextInput
+          label="Nomor Telepon"
+          type="number"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              tlpn: val.target.value,
+            });
+          }}
+        />
+        <TextInput
+          label="Deskripsi"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              deskripssi: val.target.value,
+            });
+          }}
+        />
+
+        <Button
+          mt={"md"}
+          radius={50}
+          bg={Warna.hijau_muda}
+          color="green"
+          onClick={() => {
+            onSubmit();
+          }}
+        >
+          Simpan
+        </Button>
+      </Stack>
+
+      {/* <pre> {JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts b/src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts
new file mode 100644
index 00000000..cc540f58
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/fun/fun_get_all_portofolio.ts
@@ -0,0 +1,16 @@
+import toast from "react-simple-toasts";
+import getListPortofolio from "../api/get-portofolio";
+
+/**
+ * 
+ * @param id - profileId
+ * @returns load list portofolio by Id
+ */
+export async function loadListPortofolio(id: string) {
+  if (id === null) {
+    return toast("Id null");
+  } else {
+    const data = await getListPortofolio(id).then((res) => res);
+    return data
+  }
+}
diff --git a/src/app_modules/katalog/portofolio/index.ts b/src/app_modules/katalog/portofolio/index.ts
new file mode 100644
index 00000000..3496c641
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/index.ts
@@ -0,0 +1,5 @@
+import CreatePortofolio from "./create/view";
+import PortofolioLayout from "./create/layout";
+import PortofolioView from "./list_view/view";
+
+export {CreatePortofolio, PortofolioLayout, PortofolioView}
\ No newline at end of file
diff --git a/src/app_modules/katalog/portofolio/list_view/view.tsx b/src/app_modules/katalog/portofolio/list_view/view.tsx
new file mode 100644
index 00000000..0b8368b9
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/list_view/view.tsx
@@ -0,0 +1,65 @@
+"use client";
+import { Box, Center, Grid, Paper, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { loadListPortofolio } from "../fun/fun_get_all_portofolio";
+import _ from "lodash";
+import { IconCaretRightFilled } from "@tabler/icons-react";
+import { loadDataProfile } from "../../profile/fun/fun_get_profile";
+import { useAtom } from "jotai";
+import { gs_profile } from "../../profile/state/global_state";
+import getListPortofolio from "../api/get-portofolio";
+
+export default function PortofolioView({
+  profileId,
+  porto,
+}: {
+  profileId: any;
+  porto: any;
+}) {
+  const [profile, setProfile] = useAtom(gs_profile);
+  useShallowEffect(() => {
+    loadDataProfile(setProfile);
+  }, []);
+
+  const [listPorto, setListPorto] = useState<any | null>(porto);
+  useShallowEffect(() => {
+    loadListPortofolio(profile?.id).then((res) => setListPorto(res));
+  }, [profile?.id]);
+
+
+  return (
+    <>
+      {/* {JSON.stringify(profile.id)}
+      <br />
+      {JSON.stringify(listPorto)} */}
+      <Center>
+        <Title order={4}>Portofolio</Title>
+      </Center>
+      <Box mt={"md"} >
+        {(() => {
+          if (listPorto) {
+            return (
+              <>
+                {_.map(listPorto).map((e: any) => (
+                  <Paper key={e.id} h={50} bg={"gray"} my={"md"} >
+                    <Grid h={50} align="center" px={"md"}>
+                      <Grid.Col span={10}>
+                        <Text fw={"bold"}>{e.namaBisnis}</Text>
+                      </Grid.Col>
+                      <Grid.Col span={"auto"} h={50}>
+                        <IconCaretRightFilled size={35} />
+                      </Grid.Col>
+                    </Grid>
+                  </Paper>
+                ))}
+              </>
+            );
+          } else {
+            return <></>;
+          }
+        })()}
+      </Box>
+    </>
+  );
+}