diff --git a/src/app/api/new/portofolio/route.ts b/src/app/api/new/portofolio/route.ts
index 357f42b3..b25478d5 100644
--- a/src/app/api/new/portofolio/route.ts
+++ b/src/app/api/new/portofolio/route.ts
@@ -8,9 +8,11 @@ export async function GET(request: Request) {
       let fixData
       const { searchParams } = new URL(request.url)
       const profile = searchParams.get("profile")
+      const kategori_halaman = searchParams.get("cat")
       const page = searchParams.get("page")
+      const dataSkip = Number(page) * 10 - 10;
 
-      if (page == "profile") {
+      if (kategori_halaman == "profile") {
          fixData = await prisma.portofolio.findMany({
             take: 2,
             orderBy: {
@@ -27,8 +29,10 @@ export async function GET(request: Request) {
                profileId: true,
             },
          });
-      } else if (page == "portofolio") {
+      } else if (kategori_halaman == "portofolio") {
          fixData = await prisma.portofolio.findMany({
+            skip: dataSkip,
+            take: 10,
             orderBy: {
                createdAt: "desc",
             },
diff --git a/src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx b/src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx
index 45a30f23..2252757b 100644
--- a/src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx
+++ b/src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx
@@ -1,17 +1,17 @@
-import { Portofolio_ViewListDetail } from "@/app_modules/katalog/portofolio";
-import { portofolio_funGetAllDaftarByid } from "@/app_modules/katalog/portofolio/fun/get/get_all_portofolio";
+import { ListDetailPortofolioNew } from "@/app_modules/katalog/portofolio";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const profileId = params.id;
-  const dataPortofolio = await portofolio_funGetAllDaftarByid({
-    profileId,
-    page: 1,
-  });
+  // const profileId = params.id;
+  // const dataPortofolio = await portofolio_funGetAllDaftarByid({
+  //   profileId,
+  //   page: 1,
+  // });
 
 
   return (
     <>
-      <Portofolio_ViewListDetail dataPortofolio={dataPortofolio as any} profileId={profileId} />
+      {/* <Portofolio_ViewListDetail dataPortofolio={dataPortofolio as any} profileId={profileId} /> */}
+      <ListDetailPortofolioNew />
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/index.ts b/src/app_modules/katalog/portofolio/index.ts
index b45526dc..9d31be0f 100644
--- a/src/app_modules/katalog/portofolio/index.ts
+++ b/src/app_modules/katalog/portofolio/index.ts
@@ -10,6 +10,7 @@ import Portofolio_EditMedsosBisnis from "./edit/medsos/ui_edit_medsos";
 import LayoutPortofolio_EditDataBisnis from "./edit/data/layout";
 import LayoutPortofolio_EditLogoBisnis from "./edit/logo/layout";
 import LayoutPortofolio_EditMedsosBisnis from "./edit/medsos/layout";
+import ListDetailPortofolioNew from './view/list_detail_portofolio_new';
 
 export {
   CreatePortofolio,
@@ -22,8 +23,9 @@ export {
   LayoutPortofolio_EditDataBisnis,
   LayoutPortofolio_EditLogoBisnis,
   LayoutPortofolio_EditMedsosBisnis,
-  apiGetPortofolioByProfile
+  apiGetPortofolioByProfile,
 };
 export type { IListPortofolio };
 export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
+export { ListDetailPortofolioNew }
 
diff --git a/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx b/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx
new file mode 100644
index 00000000..9add314b
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx
@@ -0,0 +1,59 @@
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentPortofolio_DaftarBoxView } from "../component/card_view_daftar";
+import { portofolio_funGetAllDaftarByid } from "../fun/get/get_all_portofolio";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { useParams } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetPortofolioByProfile } from "../lib/api_portofolio";
+
+export default function Portofolio_UiListDetailNew() {
+   const param = useParams<{ id: string }>()
+   const profileId = param.id
+   const [data, setData] = useState<MODEL_PORTOFOLIO[]>([])
+   const [activePage, setActivePage] = useState(1)
+
+   async function getPortofolio() {
+      try {
+         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&cat=portofolio&page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getPortofolio()
+   }, []);
+
+   return <>
+      <Box py={5}>
+         <ScrollOnly
+            height="90vh"
+            renderLoading={() => (
+               <Center mt={"lg"}>
+                  <ComponentGlobal_Loader />
+               </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+               const loadData = await portofolio_funGetAllDaftarByid({
+                  profileId,
+                  page: activePage + 1,
+               });
+               setActivePage((val) => val + 1);
+
+               return loadData;
+            }}
+         >
+            {(item) => <ComponentPortofolio_DaftarBoxView data={item} />}
+         </ScrollOnly>
+      </Box>
+   </>;
+}
\ No newline at end of file
diff --git a/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx b/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx
new file mode 100644
index 00000000..1920461d
--- /dev/null
+++ b/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx
@@ -0,0 +1,13 @@
+'use client'
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+import Portofolio_UiListDetailNew from "../ui/ui_list_detail_portofolio_new";
+
+export default function ListDetailPortofolioNew() {
+   return (
+      <>
+         <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Daftar Portofolio" />} >
+            <Portofolio_UiListDetailNew />
+         </UIGlobal_LayoutTamplate>
+      </>
+   )
+}
\ No newline at end of file
diff --git a/src/app_modules/katalog/ui/list_portolio_new.tsx b/src/app_modules/katalog/ui/list_portolio_new.tsx
index b1118bb3..ff7d96a4 100644
--- a/src/app_modules/katalog/ui/list_portolio_new.tsx
+++ b/src/app_modules/katalog/ui/list_portolio_new.tsx
@@ -17,7 +17,7 @@ export default function ListPortofolioProfileNew() {
    async function getPortofolio() {
       try {
          setLoading(true)
-         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&page=profile`)
+         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&cat=profile`)
          if (response.success) {
             setDataPortofolio(response.data);
          }