diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
new file mode 100644
index 0000000..1909d3a
--- /dev/null
+++ b/app/admin/layout.tsx
@@ -0,0 +1,13 @@
+import HumasAdminLayout from "@/components/layout/HumasAdminLayout";
+
+export default function HumasLayoutAdmin({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasAdminLayout >
+            {children}
+        </HumasAdminLayout>
+    );
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
new file mode 100644
index 0000000..1e4a2d5
--- /dev/null
+++ b/app/admin/page.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+export default function AdminHumasPage() {
+    return (
+        <div className='bg-white'>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+        </div>
+    )
+}
diff --git a/app/news/all/layout.tsx b/app/news/all/layout.tsx
new file mode 100644
index 0000000..2f57034
--- /dev/null
+++ b/app/news/all/layout.tsx
@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function AllNewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}
diff --git a/app/news/all/page.tsx b/app/news/all/page.tsx
new file mode 100644
index 0000000..ffe2efa
--- /dev/null
+++ b/app/news/all/page.tsx
@@ -0,0 +1,8 @@
+import ListNews from '@/components/detail/ListNews'
+import React from 'react'
+
+export default function ListNewsPage() {
+    return (
+        <ListNews />
+    )
+}
diff --git a/components/detail/ListNews.tsx b/components/detail/ListNews.tsx
new file mode 100644
index 0000000..35596f7
--- /dev/null
+++ b/components/detail/ListNews.tsx
@@ -0,0 +1,121 @@
+'use client'
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
+import PPIDSidebar from '../Portal PPID/PPIDSidebar';
+import { EyeFilledIcon, SearchIcon } from '../icons';
+
+
+export default function ListNews() {
+    const searchInput = (
+        <Input
+            aria-label="Search"
+            className="w-full"
+            classNames={{
+                inputWrapper: "bg-white hover:!bg-gray-100",
+                input: "text-sm",
+            }}
+            labelPlacement="outside"
+            placeholder="Search..."
+            startContent={
+                <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+            }
+            endContent={
+                <Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
+            }
+            type="search"
+        />
+    )
+
+    const listNews = [
+        {
+            id: 1,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 2,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 3,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 4,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 5,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 6,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 7,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 8,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+        {
+            id: 9,
+            thumnbnail: '/headernews.png',
+            title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
+            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
+        },
+
+    ]
+
+    return (
+        <div className=' max-w-7xl self-center text-black'>
+            <Breadcrumbs color="primary" className="pt-5">
+                <BreadcrumbItem>Beranda</BreadcrumbItem>
+                <BreadcrumbItem>Berita</BreadcrumbItem>
+            </Breadcrumbs>
+            <div className="flex-wrap grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
+                {listNews.map((news) => (
+                    <div className="h-[400px] w-[300px] bg-[#eeeeee] text-xs">
+                        <div className="h-[50%]">
+                            <img src={news.thumnbnail} alt="" className="w-max" />
+                        </div>
+                        <div className="px-3 py-5">
+                            <div className="font-medium">{news.title}</div>
+                            <div className="flex pb-2">
+                                <div className="text-xs">{news.date}</div>
+                                {/* <div>jam</div>
+                                <div>creator</div> */}
+                            </div>
+                            <div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/components/layout/HumasAdminLayout.tsx b/components/layout/HumasAdminLayout.tsx
new file mode 100644
index 0000000..16dc476
--- /dev/null
+++ b/components/layout/HumasAdminLayout.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import HumasSidebarWrapper from '../navbar/HumasSidebarWrapper'
+import HumasNavbarWrapper from '../navbar/HumasNavbarWrapper'
+import { ThemeSwitch } from '../theme-switch';
+
+interface Props {
+    children: React.ReactNode;
+    pageTitle?: string;
+}
+
+
+export default function HumasAdminLayout({ children, pageTitle }: Props) {
+    return (
+        // <section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
+        <section className="flex  ">
+            <HumasSidebarWrapper />
+            <HumasNavbarWrapper>
+                {children}
+            </HumasNavbarWrapper>
+        </section>
+    )
+}
diff --git a/components/layout/PPIDAdminLayout.tsx b/components/layout/PPIDAdminLayout.tsx
index 0aa6056..f6c1534 100644
--- a/components/layout/PPIDAdminLayout.tsx
+++ b/components/layout/PPIDAdminLayout.tsx
@@ -1,7 +1,7 @@
 "use client";
-import React, { Children } from "react";
-import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
+import React from "react";
 import PPIDAdminNavbarWrapper from "../navbar/PPIDAdminNavbarWrapper";
+import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
 
 interface Props {
     children: React.ReactNode;
diff --git a/components/navbar/HumasNavbarWrapper.tsx b/components/navbar/HumasNavbarWrapper.tsx
new file mode 100644
index 0000000..436ca8e
--- /dev/null
+++ b/components/navbar/HumasNavbarWrapper.tsx
@@ -0,0 +1,50 @@
+'use client'
+import { Navbar, NavbarContent } from '@nextui-org/navbar';
+import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import React from 'react'
+import { ThemeSwitch } from '../theme-switch';
+
+interface Props {
+    children: React.ReactNode;
+    pageTitle?: string;
+}
+export default function HumasNavbarWrapper({ children }: Props) {
+    return (
+        <div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden max-h-screen bg-transparent'>
+            <Navbar className='w-full bg-slate-100 dark:bg-[#16213E]'
+                isBordered
+                classNames={{
+                    wrapper: "w-full max-w-full"
+                }}>
+                <NavbarContent as="div" justify="end">
+                    <Dropdown placement="bottom-end">
+                        <DropdownTrigger>
+                            <Avatar
+                                isBordered
+                                as="button"
+                                className="transition-transform"
+                                color="secondary"
+                                name="Jason Hughes"
+                                size="sm"
+                                src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                            />
+                        </DropdownTrigger>
+                        <DropdownMenu aria-label="Profile Actions" variant="flat">
+                            <DropdownItem key="profile" className="h-14 gap-2">
+                                <p className="font-semibold">Signed in as</p>
+                                <p className="font-semibold">zoey@example.com</p>
+                            </DropdownItem>
+                            <DropdownItem key="settings">My Settings</DropdownItem>
+                            <DropdownItem key="logout" color="danger">
+                                Log Out
+                            </DropdownItem>
+                            <DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </NavbarContent>
+            </Navbar>
+            {children}
+        </div>
+
+    )
+}
diff --git a/components/navbar/HumasSidebarWrapper.tsx b/components/navbar/HumasSidebarWrapper.tsx
new file mode 100644
index 0000000..4917cb1
--- /dev/null
+++ b/components/navbar/HumasSidebarWrapper.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function HumasSidebarWrapper() {
+    return (
+        <aside className='w-[250px] h-screen bg-[#070F2B]'>
+            Sidebar
+        </aside>
+    )
+}
diff --git a/debug.log b/debug.log
index 773803e..6d96fc3 100644
--- a/debug.log
+++ b/debug.log
@@ -1,2 +1,6 @@
 [0303/221019.644:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
 [0303/221019.882:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
+[0305/191435.450:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
+[0305/191435.917:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
+[0306/181620.653:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
+[0306/181620.915:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)