diff --git a/src/app/dev/katalog/[id]/layout.tsx b/src/app/dev/katalog/[id]/layout.tsx
index bd874c57..98b718f6 100644
--- a/src/app/dev/katalog/[id]/layout.tsx
+++ b/src/app/dev/katalog/[id]/layout.tsx
@@ -1,31 +1,24 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { KatalogLayout } from "@/app_modules/katalog/main";
-import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
+import { LayoutKatalogNew } from "@/app_modules/katalog/main";
 
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: any;
-  params: { id: string };
-}) {
-  const profileId = params.id;
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
-  const authorId = dataProfile?.userId;
+export default async function Layout({ children, params, }: { children: any; params: { id: string } }) {
+  // const profileId = params.id;
+  // const dataProfile = await Profile_getOneProfileAndUserById(profileId);
+  // const authorId = dataProfile?.userId;
 
-  const userLoginId = await funGetUserIdByToken();
-  const userRoleId = dataProfile?.User?.masterUserRoleId;
+  // const userLoginId = await funGetUserIdByToken();
+  // const userRoleId = dataProfile?.User?.masterUserRoleId;
 
   return (
     <>
-      <KatalogLayout
+      {/* <KatalogLayout
         profileId={profileId}
         userLoginId={userLoginId as string}
         authorId={authorId as any}
         userRoleId={userRoleId as string}
       >
         {children}
-      </KatalogLayout>
+      </KatalogLayout> */}
+      <LayoutKatalogNew>{children}</LayoutKatalogNew>
     </>
   );
 }
diff --git a/src/app/dev/katalog/[id]/page.tsx b/src/app/dev/katalog/[id]/page.tsx
index e37c8933..98ab33e3 100644
--- a/src/app/dev/katalog/[id]/page.tsx
+++ b/src/app/dev/katalog/[id]/page.tsx
@@ -1,14 +1,11 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { Katalog_MainView, ViewKatalogNew } from "@/app_modules/katalog";
-import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
-import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
+import { ViewKatalogNew } from "@/app_modules/katalog";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let profileId = params.id;
-  const userLoginId = await funGetUserIdByToken();
+  // let profileId = params.id;
+  // const userLoginId = await funGetUserIdByToken();
 
-  const listPorto = await funGetListPortofolio(profileId);
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
+  // const listPorto = await funGetListPortofolio(profileId);
+  // const dataProfile = await Profile_getOneProfileAndUserById(profileId);
 
   return (
     <>
diff --git a/src/app_modules/katalog/component/drawer_katalog_new.tsx b/src/app_modules/katalog/component/drawer_katalog_new.tsx
new file mode 100644
index 00000000..c0ef291f
--- /dev/null
+++ b/src/app_modules/katalog/component/drawer_katalog_new.tsx
@@ -0,0 +1,110 @@
+import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
+import { RouterPortofolio, RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { AccentColor } from "@/app_modules/_global/color";
+import Component_ButtonLogout from "@/app_modules/auth/logout/view";
+import { ActionIcon, Drawer, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconDashboard } from "@tabler/icons-react";
+import { IconEdit, IconPencilPlus, IconPhotoEdit, IconPolaroid, IconX } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+
+export default function DrawerKatalogNew({ opened, close, userRoleId, userId }: { opened: boolean, close: () => void, userRoleId: string, userId: string }) {
+   const param = useParams<{ id: string }>()
+   const router = useRouter()
+
+   const listPage = [
+      {
+         id: "1",
+         name: "Edit profile",
+         icon: <IconEdit />,
+         path: RouterProfile.edit + param.id,
+      },
+      {
+         id: "2",
+         name: "Ubah foto profile",
+         icon: <IconPhotoEdit />,
+         path: RouterProfile.update_foto_profile + param.id,
+      },
+      {
+         id: "3",
+         name: "Ubah latar belakang",
+         icon: <IconPolaroid />,
+         path: RouterProfile.update_foto_background + param.id,
+      },
+      {
+         id: "4",
+         name: "Tambah portofolio",
+         icon: <IconPencilPlus />,
+         path: RouterPortofolio.create + param.id,
+      },
+   ];
+
+   return <>
+      <Drawer
+         opened={opened}
+         onClose={() => close()}
+         position={"bottom"}
+         size={"auto"}
+         withCloseButton={false}
+         styles={{
+            content: {
+               padding: 0,
+               position: "absolute",
+               margin: "auto",
+               backgroundColor: "transparent",
+               left: 0,
+               right: 0,
+               width: 500,
+            },
+            body: {
+               backgroundColor: AccentColor.darkblue,
+               borderTop: `2px solid ${AccentColor.blue}`,
+               borderRight: `1px solid ${AccentColor.blue}`,
+               borderLeft: `1px solid ${AccentColor.blue}`,
+               borderRadius: "20px 20px 0px 0px",
+               color: "white",
+               paddingBottom: "5%",
+            },
+         }}
+      >
+         <Stack spacing={"xs"}>
+            <Group position="right">
+               <ActionIcon onClick={close} variant="transparent">
+                  <IconX color="white" />
+               </ActionIcon>
+            </Group>
+            <SimpleGrid cols={4}>
+               {listPage.map((e, i) => (
+                  <Stack key={i} align="center" spacing={"xs"}>
+                     <ActionIcon
+                        variant="transparent"
+                        c="white"
+                        onClick={() => { router.push(e.path, { scroll: false }); }}
+                     >
+                        {e.icon}
+                     </ActionIcon>
+                     <Text align="center" color="white">
+                        {e.name}
+                     </Text>
+                  </Stack>
+               ))}
+
+               <Component_ButtonLogout userId={userId} />
+               {userRoleId != "1" && (
+                  <Stack align="center" spacing={"xs"}>
+                     <ActionIcon
+                        variant="transparent"
+                        c="white"
+                        onClick={() => { router.push(RouterAdminDashboard.main_admin, { scroll: false }); }}
+                     >
+                        <IconDashboard />
+                     </ActionIcon>
+                     <Text align="center" color="white">
+                        Dashboard Admin
+                     </Text>
+                  </Stack>
+               )}
+            </SimpleGrid>
+         </Stack>
+      </Drawer>
+   </>;
+}
\ No newline at end of file
diff --git a/src/app_modules/katalog/main/index.ts b/src/app_modules/katalog/main/index.ts
index 793e49ee..127d7b75 100644
--- a/src/app_modules/katalog/main/index.ts
+++ b/src/app_modules/katalog/main/index.ts
@@ -1,3 +1,5 @@
 import KatalogLayout from "./layout";
+import LayoutKatalogNew from "./layout_new";
 
 export { KatalogLayout };
+export { LayoutKatalogNew }
diff --git a/src/app_modules/katalog/main/layout_new.tsx b/src/app_modules/katalog/main/layout_new.tsx
new file mode 100644
index 00000000..a0aa4d8e
--- /dev/null
+++ b/src/app_modules/katalog/main/layout_new.tsx
@@ -0,0 +1,60 @@
+'use client'
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+import { apiGetUserProfile } from "@/app_modules/user";
+import { ActionIcon } from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { IconDotsVertical } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import DrawerKatalogNew from "../component/drawer_katalog_new";
+
+export default function LayoutKatalogNew({ children }: { children: any }) {
+   const param = useParams<{ id: string }>()
+   const [authorId, setAuthorId] = useState("")
+   const [userRoleId, setUserRoleId] = useState("")
+   const [userLoginId, setUserLoginId] = useState("")
+   const [opened, { open, close }] = useDisclosure()
+
+   async function getProfile() {
+      try {
+         const response = await apiGetUserProfile(`?profile=${param.id}`)
+         const response2 = await funGetUserIdByToken()
+         if (response.success) {
+            setAuthorId(response.data.id)
+            setUserRoleId(response.data.masterUserRoleId)
+            setUserLoginId(response2)
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useShallowEffect(() => {
+      getProfile()
+   }, [])
+
+   return (
+      <>
+         <UIGlobal_LayoutTamplate
+            header={
+               <UIGlobal_LayoutHeaderTamplate
+                  title="KATALOG"
+                  customButtonRight={
+                     authorId !== userLoginId ? (
+                        <ActionIcon disabled variant="transparent"></ActionIcon>
+                     ) : (
+                        <ActionIcon c="white" variant="transparent" onClick={() => open()}>
+                           <IconDotsVertical />
+                        </ActionIcon>
+                     )
+                  }
+               />
+            }
+         >
+            {children}
+            <DrawerKatalogNew opened={opened} close={() => close()} userRoleId={userRoleId} userId={userLoginId} />
+         </UIGlobal_LayoutTamplate>
+      </>
+   )
+}
\ No newline at end of file
diff --git a/src/app_modules/katalog/view_katalog_new.tsx b/src/app_modules/katalog/view_katalog_new.tsx
index 1ce3c013..108e2c93 100644
--- a/src/app_modules/katalog/view_katalog_new.tsx
+++ b/src/app_modules/katalog/view_katalog_new.tsx
@@ -8,11 +8,6 @@ export default function ViewKatalogNew() {
       <>
          <Stack mb={"lg"}>
             <ProfileDetail />
-            {/* <Portofolio_UiListView
-               listPorto={listPorto as any}
-               profile={profile}
-               userLoginId={userLoginId}
-            /> */}
             <ListPortofolioProfileNew />
          </Stack>
       </>