diff --git a/app/(application)/(user)/portofolio/[id]/list.tsx b/app/(application)/(user)/portofolio/[id]/list.tsx
new file mode 100644
index 0000000..5c57d12
--- /dev/null
+++ b/app/(application)/(user)/portofolio/[id]/list.tsx
@@ -0,0 +1,47 @@
+import { BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function ListPortofolio() {
+  const { id } = useLocalSearchParams();
+  return (
+    <ViewWrapper>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox
+          key={index}
+          style={{ backgroundColor: MainColor.darkblue }}
+          onPress={() => {
+            console.log("press to Portofolio");
+            router.push(`/portofolio/${id}`);
+          }}
+        >
+          <Grid>
+            <Grid.Col
+              span={10}
+              style={{ justifyContent: "center", backgroundColor: "" }}
+            >
+              <TextCustom bold size="large" truncate={1}>
+                Nama usaha portofolio
+              </TextCustom>
+              <TextCustom size="small" color="yellow">
+                #id-porofolio12345
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col
+              span={2}
+              style={{ alignItems: "flex-end", justifyContent: "center" }}
+            >
+              <Ionicons
+                name="caret-forward"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/portofolio/_layout.tsx b/app/(application)/(user)/portofolio/_layout.tsx
index a7b48d0..2d81b1b 100644
--- a/app/(application)/(user)/portofolio/_layout.tsx
+++ b/app/(application)/(user)/portofolio/_layout.tsx
@@ -1,6 +1,5 @@
-
 import LeftButtonCustom from "@/components/Button/BackButton";
-import { GStyles } from "@/styles/global-styles";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function PortofolioLayout() {
@@ -8,10 +7,7 @@ export default function PortofolioLayout() {
     <>
       <Stack
         screenOptions={{
-          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: GStyles.headerTitleStyle,
-          headerTitleAlign: "center",
-          headerBackButtonDisplayMode: "minimal",
+          ...HeaderStyles,
           headerLeft: () => <LeftButtonCustom />,
         }}
       >
@@ -20,7 +16,10 @@ export default function PortofolioLayout() {
           name="[id]/create"
           options={{ title: "Tambah Portofolio" }}
         />
-        
+        <Stack.Screen
+          name="[id]/list"
+          options={{ title: "Daftar Portofolio" }}
+        />
       </Stack>
     </>
   );
diff --git a/components/Text/TextCustom.tsx b/components/Text/TextCustom.tsx
index 47ac145..0f1f019 100644
--- a/components/Text/TextCustom.tsx
+++ b/components/Text/TextCustom.tsx
@@ -5,7 +5,7 @@ import {
   TEXT_SIZE_SMALL,
 } from "@/constants/constans-value";
 import React from "react";
-import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
+import { Text as RNText, StyleProp, StyleSheet, TextStyle, TouchableOpacity } from "react-native";
 
 // Tambahkan type TextAlignProps agar lebih type-safe
 type TextAlign = "left" | "center" | "right";
@@ -19,6 +19,7 @@ interface TextCustomProps {
   color?: "default" | "yellow" | "red";
   align?: TextAlign; // Prop untuk alignment
   truncate?: boolean | number;
+  onPress?: () => void;
 }
 
 const TextCustom: React.FC<TextCustomProps> = ({
@@ -30,6 +31,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
   color = "default",
   align = "left", // Default alignment
   truncate = false,
+  onPress,
 }) => {
   const getStyle = () => {
     let selectedStyles = [];
@@ -61,15 +63,29 @@ const TextCustom: React.FC<TextCustomProps> = ({
   };
 
   return (
-    <RNText
-      numberOfLines={
-        typeof truncate === "number" ? truncate : truncate ? 1 : undefined
-      }
-      ellipsizeMode="tail"
-      style={getStyle()}
-    >
-      {children}
-    </RNText>
+    onPress ? (
+      <TouchableOpacity onPress={onPress}>
+        <RNText
+          numberOfLines={
+            typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+          }
+          ellipsizeMode="tail"
+          style={getStyle()}
+        >
+          {children}
+        </RNText>
+      </TouchableOpacity>
+    ) : (
+      <RNText
+        numberOfLines={
+          typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+        }
+        ellipsizeMode="tail"
+        style={getStyle()}
+      >
+        {children}
+      </RNText>
+    )
   );
 };
 
diff --git a/screens/Profile/profilSection.tsx b/screens/Profile/profilSection.tsx
index 1bca730..449cfc9 100644
--- a/screens/Profile/profilSection.tsx
+++ b/screens/Profile/profilSection.tsx
@@ -115,9 +115,15 @@ export default function ProfilSection() {
             </BaseBox>
           ))}
         </View>
+
+        <TextCustom
+          bold
+          align="right"
+          onPress={() => router.push(`/portofolio/${id}/list`)}
+        >
+          Lihat semua
+        </TextCustom>
       </BaseBox>
     </>
   );
 }
-
-