diff --git a/src/app/dev/portofolio/create/page.tsx b/src/app/dev/portofolio/create/page.tsx
index 92d01ad6..353e59f4 100644
--- a/src/app/dev/portofolio/create/page.tsx
+++ b/src/app/dev/portofolio/create/page.tsx
@@ -1,16 +1,17 @@
 import { myConsole } from "@/app/fun/my_console";
 import { CreatePortofolio } from "@/app_modules/katalog/portofolio";
-import { getBidangBisnis } from "@/app_modules/katalog/portofolio/fun/get_list_bidang_bisnis";
+import { getBidangBisnis } from "@/app_modules/katalog/portofolio/fun/get_bidang_bisnis";
 import { getProfile } from "@/app_modules/katalog/profile";
 
 export default async function Page() {
-  const bidangBisnis = await getBidangBisnis();
+  const bidangBisnis = await getBidangBisnis()
   const id = await getProfile();
   const profileId = id?.id;
+  // console.log(bidangBisnis)
 
   return (
     <>
-      <CreatePortofolio data={bidangBisnis} profileId={profileId} />
+      <CreatePortofolio bidangBisnis={bidangBisnis as any} profileId={profileId} />
     </>
   );
 }
diff --git a/src/app/dev/portofolio/main/[id]/layout.tsx b/src/app/dev/portofolio/main/[id]/layout.tsx
new file mode 100644
index 00000000..c6d17588
--- /dev/null
+++ b/src/app/dev/portofolio/main/[id]/layout.tsx
@@ -0,0 +1,9 @@
+import { PortofolioLayout } from "@/app_modules/katalog/portofolio";
+
+export default async function Layout({ children }: { children: any }) {
+  return (
+    <>
+      <PortofolioLayout>{children}</PortofolioLayout>
+    </>
+  );
+}
diff --git a/src/app/dev/portofolio/main/[id]/page.tsx b/src/app/dev/portofolio/main/[id]/page.tsx
new file mode 100644
index 00000000..25e9a13e
--- /dev/null
+++ b/src/app/dev/portofolio/main/[id]/page.tsx
@@ -0,0 +1,15 @@
+import { ViewPortofolio } from "@/app_modules/katalog/portofolio";
+import { getOnePortofolio } from "@/app_modules/katalog/portofolio/fun/get_one_portofolio";
+
+export default async function Page({params}: {params: {id: string}}) {
+
+  const getPorto = await getOnePortofolio(params.id)
+  // console.log(getPorto)
+
+  return (
+    <>
+    {/* {JSON.stringify(getPorto)} */}
+      <ViewPortofolio dataPorto={getPorto as any} />
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/component/header_transparent.tsx b/src/app_modules/katalog/component/header_transparent.tsx
index 05b1feb2..27c3c7e4 100644
--- a/src/app_modules/katalog/component/header_transparent.tsx
+++ b/src/app_modules/katalog/component/header_transparent.tsx
@@ -2,22 +2,28 @@
 
 import { Header, Group, ActionIcon, Text } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
 import React from "react";
 
-export default function headerTransparent({
-  icon1,
+export default function HeaderTransparent({
+  route,
   icon2,
   title,
 }: {
-  icon1: React.ReactNode;
-  icon2: React.ReactNode;
+  route: any;
+  icon2: any;
   title: string;
 }) {
+  const router = useRouter();
   return (
     <>
+
       <Header height={50} px={"sm"}>
         <Group position="apart" h={50}>
-          {icon1}
+          <ActionIcon variant="transparent" onClick={() => router.push(route)}>
+            <IconArrowLeft />
+          </ActionIcon>
+
           <Text>{title}</Text>
           {icon2}
         </Group>
diff --git a/src/app_modules/katalog/index.ts b/src/app_modules/katalog/index.ts
index 740fbc1b..215b6612 100644
--- a/src/app_modules/katalog/index.ts
+++ b/src/app_modules/katalog/index.ts
@@ -1,3 +1,3 @@
-import headerTransparent from "./component/header_transparent";
+import HeaderTransparent from "./component/header_transparent";
 
-export {headerTransparent}
\ No newline at end of file
+export {HeaderTransparent as headerTransparent}
\ No newline at end of file
diff --git a/src/app_modules/katalog/portofolio/create/layout.tsx b/src/app_modules/katalog/portofolio/create/layout.tsx
index e5e6e58c..5deec16c 100644
--- a/src/app_modules/katalog/portofolio/create/layout.tsx
+++ b/src/app_modules/katalog/portofolio/create/layout.tsx
@@ -4,7 +4,7 @@ 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 }) {
+export default function CreatePortofolioLayout({ children }: { children: any }) {
   const router = useRouter();
   return (
     <>
diff --git a/src/app_modules/katalog/portofolio/create/view.tsx b/src/app_modules/katalog/portofolio/create/view.tsx
index f8863e4b..a205a126 100644
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -3,6 +3,7 @@
 import { myConsole } from "@/app/fun/my_console";
 import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
+import { BIDANG_BISNIS } from "@/app_modules/models/portofolio";
 import { Button, Select, Stack, TextInput, Title } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -10,10 +11,10 @@ import { useState } from "react";
 import toast from "react-simple-toasts";
 
 export default function CreatePortofolio({
-  data,
+  bidangBisnis,
   profileId,
 }: {
-  data: any;
+  bidangBisnis: BIDANG_BISNIS;
   profileId: any;
 }) {
   const router = useRouter();
@@ -46,7 +47,7 @@ export default function CreatePortofolio({
     })
       .then((res) => res.json())
       .then((val) => {
-        myConsole(val)
+        myConsole(val);
         if (val.status == 201) {
           toast("Berhasil disimpan");
           return router.push("/dev/katalog/view");
@@ -58,6 +59,7 @@ export default function CreatePortofolio({
 
   return (
     <>
+      {/* {JSON.stringify(bidangBisnis)} */}
 
       <Stack px={"sm"}>
         <TextInput
@@ -71,7 +73,10 @@ export default function CreatePortofolio({
         />
         <Select
           label="Bidang Bisnis"
-          data={_.map(data).map((e: any) => ({ label: e.name, value: e.id }))}
+          data={_.map(bidangBisnis as any).map((e : any) => ({
+            value: e.id,
+            label: e.name,
+          }))}
           onChange={(val) => {
             setValue({
               ...value,
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..2a7f7de9
--- /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 { funGetListPortofolio } from "./get_list_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 funGetListPortofolio(id).then((res) => res);
+    return data
+  }
+}
diff --git a/src/app_modules/katalog/portofolio/fun/get_list_bidang_bisnis.ts b/src/app_modules/katalog/portofolio/fun/get_bidang_bisnis.ts
similarity index 100%
rename from src/app_modules/katalog/portofolio/fun/get_list_bidang_bisnis.ts
rename to src/app_modules/katalog/portofolio/fun/get_bidang_bisnis.ts
diff --git a/src/app_modules/katalog/portofolio/fun/get_one_portofolio.ts b/src/app_modules/katalog/portofolio/fun/get_one_portofolio.ts
new file mode 100644
index 00000000..154f5edb
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/fun/get_one_portofolio.ts
@@ -0,0 +1,29 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function getOnePortofolio(id: string) {
+    // console.log(id)
+  const data = await prisma.katalog.findUnique({
+    where: {
+      id: id,
+    },
+    select: {
+      id: true,
+      namaBisnis: true,
+      alamatKantor: true,
+      deskripssi: true,
+      tlpn: true,
+      active: true,
+      MasterBidangBisnis: {
+        select: {
+          id: true,
+          name: true,
+          active: true,
+        },
+      },
+    },
+  });
+
+  return data
+}
diff --git a/src/app_modules/katalog/portofolio/index.ts b/src/app_modules/katalog/portofolio/index.ts
index 3c257e8b..3f6834e9 100644
--- a/src/app_modules/katalog/portofolio/index.ts
+++ b/src/app_modules/katalog/portofolio/index.ts
@@ -1,5 +1,7 @@
 import CreatePortofolio from "./create/view";
-import PortofolioLayout from "./create/layout";
+import CreatePortofolioLayout from "./create/layout";
 import ListPortofolioView from "./list_view/view";
+import PortofolioLayout from "./main/layout";
+import ViewPortofolio from "./main/view";
 
-export {CreatePortofolio, PortofolioLayout, ListPortofolioView}
\ No newline at end of file
+export {CreatePortofolio, CreatePortofolioLayout, ListPortofolioView, PortofolioLayout, ViewPortofolio}
\ 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
index d838b565..08d2003e 100644
--- a/src/app_modules/katalog/portofolio/list_view/view.tsx
+++ b/src/app_modules/katalog/portofolio/list_view/view.tsx
@@ -11,14 +11,15 @@ import { gs_ListPortofolio } from "../state/global_state";
 import { myConsole } from "@/app/fun/my_console";
 import { getProfile } from "../../profile";
 import { LIST_PORTOFOLIO } from "@/app_modules/models/portofolio";
+import { useRouter } from "next/navigation";
 
 export default function ListPortofolioView({
   listPorto,
 }: {
   listPorto: LIST_PORTOFOLIO;
 }) {
+  const router = useRouter();
   const [porto, setPorto] = useState(listPorto);
-
   return (
     <>
       {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
@@ -32,7 +33,14 @@ export default function ListPortofolioView({
               <>
                 {" "}
                 {_.map(porto as any).map((e: any) => (
-                  <Paper key={e.id} h={50} bg={"gray"} my={"md"}>
+                  <Paper
+                    key={e.id}
+                    h={50}
+                    bg={"gray"}
+                    my={"md"}
+                    radius={50}
+                    onClick={() => router.push(`/dev/portofolio/main/${e.id}/`)}
+                  >
                     <Grid h={50} align="center" px={"md"}>
                       <Grid.Col span={10}>
                         <Text fw={"bold"}>{e.namaBisnis}</Text>
diff --git a/src/app_modules/katalog/portofolio/main/layout.tsx b/src/app_modules/katalog/portofolio/main/layout.tsx
new file mode 100644
index 00000000..f13b46ca
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/main/layout.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { ActionIcon, AppShell } from "@mantine/core";
+import HeaderTransparent from "../../component/header_transparent";
+
+import { useRouter } from "next/navigation";
+import { IconArrowLeft, IconEdit } from "@tabler/icons-react";
+
+export default function PortofolioLayout({ children }: { children: any }) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <HeaderTransparent
+            route={"/dev/katalog/view"}
+            title="Portofolio"
+            icon2={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => router.push("/dev/portofolio/edit")}
+              >
+                <IconEdit />
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/main/view.tsx b/src/app_modules/katalog/portofolio/main/view.tsx
new file mode 100644
index 00000000..85d32212
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/main/view.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import { GET_ONE_PORTOFOLIO } from "@/app_modules/models/portofolio";
+import { Box, Button, Center, Text, Title } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ViewPortofolio({
+  dataPorto,
+}: {
+  dataPorto: GET_ONE_PORTOFOLIO;
+}) {
+  const router = useRouter();
+  const [porto, setPorto] = useState(dataPorto);
+
+  
+
+
+  return (
+    <>
+      <Box>
+        <Text>{porto.namaBisnis}</Text>
+        <Text>{porto.alamatKantor}</Text>
+        <Text>+{porto.tlpn}</Text>
+        <Text>{porto.deskripssi}</Text>
+        <Text>{porto.MasterBidangBisnis.name}</Text>
+      </Box>
+      <Center mt={"md"}>
+        <Button bg={"red"} color="red" w={300}
+        onClick={() => {
+
+        }}
+        >
+          <IconTrash />
+        </Button>{" "}
+      </Center>
+    </>
+  );
+}
diff --git a/src/app_modules/models/portofolio.ts b/src/app_modules/models/portofolio.ts
index 0a169463..b15a5472 100644
--- a/src/app_modules/models/portofolio.ts
+++ b/src/app_modules/models/portofolio.ts
@@ -1,9 +1,25 @@
 export interface LIST_PORTOFOLIO {
-    id: string;
-    namaBisnis: string;
-    alamatKantor: string;
-    tlpn: string;
-    deskripssi: string;
-    masterBidangBisnisId: string;
-    active: boolean;
-}
\ No newline at end of file
+  id: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripssi: string;
+  masterBidangBisnisId: string;
+  active: boolean;
+}
+
+export interface BIDANG_BISNIS {
+  id: string;
+  name: string;
+  active: boolean;
+}
+
+export interface GET_ONE_PORTOFOLIO {
+  id: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  deskripssi: string;
+  tlpn: string;
+  active: boolean;
+  MasterBidangBisnis: BIDANG_BISNIS;
+}