diff --git a/src/app/dev/admin/app-information/bidang-bisnis/page.tsx b/src/app/dev/admin/app-information/bidang-bisnis/page.tsx
new file mode 100644
index 00000000..e53933aa
--- /dev/null
+++ b/src/app/dev/admin/app-information/bidang-bisnis/page.tsx
@@ -0,0 +1,9 @@
+import { AdminAppInformation_ViewKategoriPortofolio } from "@/app_modules/admin/app_info/view";
+
+export default function Page() {
+  return (
+    <>
+      <AdminAppInformation_ViewKategoriPortofolio />
+    </>
+  );
+}
diff --git a/src/app/dev/admin/app-information/info-bank/page.tsx b/src/app/dev/admin/app-information/info-bank/page.tsx
new file mode 100644
index 00000000..22642c1a
--- /dev/null
+++ b/src/app/dev/admin/app-information/info-bank/page.tsx
@@ -0,0 +1,5 @@
+import { AdminAppInformation_ViewInfoBank } from "@/app_modules/admin/app_info/view";
+
+export default function Page() {
+  return <AdminAppInformation_ViewInfoBank />;
+}
diff --git a/src/app/dev/admin/app-information/layout.tsx b/src/app/dev/admin/app-information/layout.tsx
new file mode 100644
index 00000000..17050b24
--- /dev/null
+++ b/src/app/dev/admin/app-information/layout.tsx
@@ -0,0 +1,9 @@
+import AdminAppInformation_Layout from "@/app_modules/admin/app_info/ui/ui_layout_admin_app";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AdminAppInformation_Layout>{children}</AdminAppInformation_Layout>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/app_info/ui/ui_layout_admin_app.tsx b/src/app_modules/admin/app_info/ui/ui_layout_admin_app.tsx
new file mode 100644
index 00000000..410f8838
--- /dev/null
+++ b/src/app_modules/admin/app_info/ui/ui_layout_admin_app.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Stack, Group, Button } from "@mantine/core";
+import { AccentColor } from "@/app_modules/_global/color";
+import {
+  AdminColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { useAtom } from "jotai";
+import { usePathname } from "next/navigation";
+import { gs_app_information_menu } from "../lib";
+import {
+  AdminAppInformation_ViewInfoBank,
+  AdminAppInformation_ViewKategoriPortofolio,
+} from "../view";
+import Link from "next/link";
+
+export default function AdminAppInformation_Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const listPage = [
+    // {
+    //   id: "1",
+    //   name: "Whatsapp",
+    // },
+    {
+      id: "2",
+      name: "Informasi Bank",
+      path: "/dev/admin/app-information/info-bank",
+    },
+    {
+      id: "3",
+      name: "Bidang Bisnis",
+      path: "/dev/admin/app-information/bidang-bisnis",
+    },
+  ];
+
+  const isActive = (path: string) => {
+    if (path === "/" && pathname === "/") return true;
+    if (path !== "/" && pathname.startsWith(path)) return true;
+    return false;
+  };
+
+  return (
+    <>
+      <Stack h={"100%"}>
+        <ComponentAdminGlobal_HeaderTamplate name="App Information" />
+
+        <Group>
+          {listPage.map((e, i) => (
+            <Button
+              key={i}
+              component={Link}
+              href={e.path}
+              radius={"xl"}
+              c={isActive(e.path) ? AdminColor.white : "gray"}
+              bg={isActive(e.path) ? AccentColor.blue : AccentColor.blackgray}
+              style={{
+                transition: "all 0.5s",
+              }}
+            >
+              {e.name}
+            </Button>
+          ))}
+        </Group>
+
+        {children}
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/app_info/view/index.tsx b/src/app_modules/admin/app_info/view/index.ts
similarity index 96%
rename from src/app_modules/admin/app_info/view/index.tsx
rename to src/app_modules/admin/app_info/view/index.ts
index 55184d32..0bf586c9 100644
--- a/src/app_modules/admin/app_info/view/index.tsx
+++ b/src/app_modules/admin/app_info/view/index.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import AdminAppInformation_ViewInfoBank from "./view_info_bank";
 import AdminAppInformation_ViewInformasiWhatApps from "./view_info_whatsapp";
 import { AdminAppInformation_ViewKategoriPortofolio } from "./view_kategori_portofolio";
diff --git a/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx b/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
index f6dabe92..9c86c40e 100644
--- a/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
+++ b/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   AdminColor,
   MainColor,
diff --git a/src/app_modules/admin/new_list_page.tsx b/src/app_modules/admin/new_list_page.tsx
index d92914a6..0a6417c9 100644
--- a/src/app_modules/admin/new_list_page.tsx
+++ b/src/app_modules/admin/new_list_page.tsx
@@ -283,7 +283,7 @@ export const newListAdminPage = [
   {
     id: "App Information",
     name: "App Information",
-    path: RouterAdminAppInformation.main,
+    path: RouterAdminAppInformation.infoBank,
     icon: <IconDeviceMobile />,
     child: [],
   },
diff --git a/src/lib/router_admin/router_app_information.ts b/src/lib/router_admin/router_app_information.ts
index 07575544..e777f8a4 100644
--- a/src/lib/router_admin/router_app_information.ts
+++ b/src/lib/router_admin/router_app_information.ts
@@ -1,3 +1,5 @@
 export const RouterAdminAppInformation = {
   main: "/dev/admin/app-information/main",
+  infoBank: "/dev/admin/app-information/info-bank",
+  bidangBisnis: "/dev/admin/app-information/bidang-bisnis",
 };