diff --git a/components/icons.tsx b/components/icons.tsx
index b2bac27..99fd9b9 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -256,7 +256,7 @@ export const ChevronUpIcon = ({
 	size,
 	height = 24,
 	width = 24,
-	fill = "none",
+	fill = "currentColor",
 	...props
 }: IconSvgProps) => (
 	<svg
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 31a46bf..a7c6fac 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -865,7 +865,7 @@ export const Navbar = () => {
 			<NavbarMenu>
 				{/* {searchInput} */}
 				<div className="mx-4 mt-2 flex flex-col gap-2 pt-10">
-					{siteConfig.navMenuItems.map((item, index) => (
+					{siteConfig.humasMenuItems.map((item, index) => (
 						<NavbarMenuItem key={`${item}-${index}`}>
 							<Link
 								href={item.href}
diff --git a/components/navbar/NavbarHumas.tsx b/components/navbar/NavbarHumas.tsx
index 5824ebf..a4e5cc5 100644
--- a/components/navbar/NavbarHumas.tsx
+++ b/components/navbar/NavbarHumas.tsx
@@ -1,17 +1,22 @@
 'use client'
 import { Input } from '@nextui-org/input';
-import { Navbar, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar';
+import { Navbar, NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle } from '@nextui-org/navbar';
 import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger, autocomplete } from '@nextui-org/react';
 import Link from "next/link";
-import { ChevronDownIcon, ChevronRightIcon, ChevronRightWhite, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
+import { ChevronDownIcon, ChevronRightIcon, ChevronRightWhite, ChevronUpIcon, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
 import { ThemeSwitch } from '../theme-switch';
 import Image from 'next/image';
+import { siteConfig } from '@/config/site';
+import { useState } from 'react';
 
 export default function NavbarHumas() {
 
-    const handleClick = () => {
-        console.log('Link clicked!');
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+
+    const toggleDropdown = () => {
+        setDropdownOpen(!dropdownOpen);
     };
+
     const searchInput = (
         <Input
             aria-label="Search"
@@ -241,6 +246,40 @@ export default function NavbarHumas() {
                 <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
                     <ThemeSwitch />
                     <NavbarMenuToggle />
+                    <NavbarMenu>
+                        {/* {searchInput} */}
+                        <div className="mt-1 flex flex-col gap-1">
+                            {siteConfig.humasMenuItems.map((item, index) => (
+                                <NavbarMenuItem key={`${item}-${index}`}>
+                                    {item.submenu ? (
+                                        <div>
+                                            <button onClick={toggleDropdown} className="flex items-center gap-2">
+                                                <span>{item.label}</span>
+                                                {dropdownOpen ? (
+                                                    <ChevronUpIcon />
+                                                ) : (
+                                                    <ChevronDownIcon />
+                                                )}
+                                            </button>
+                                            {dropdownOpen && (
+                                                <div className="flex  flex-col mt-1 ml-2 text-medium gap-1">
+                                                    {item.submenu.map((subItem, subIndex) => (
+                                                        <Link key={`${subItem}-${subIndex}`} href={subItem.href}>
+                                                            {subItem.label}
+                                                        </Link>
+                                                    ))}
+                                                </div>
+                                            )}
+                                        </div>
+                                    ) : (
+                                        <Link href={item.href} >
+                                            {item.label}
+                                        </Link>
+                                    )}
+                                </NavbarMenuItem>
+                            ))}
+                        </div>
+                    </NavbarMenu>
                 </NavbarContent>
             </div>
         </Navbar>
diff --git a/config/site.ts b/config/site.ts
index 4fc0fea..5fa9b1b 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -25,40 +25,104 @@ export const siteConfig = {
 			href: "/about",
 		}
 	],
-	navMenuItems: [
+	humasMenuItems: [
 		{
-			label: "Profile",
-			href: "/profile",
+			key: "home",
+			label: "Beranda",
+			href: "/",
 		},
 		{
-			label: "Dashboard",
-			href: "/dashboard",
+			key: "about",
+			label: "Tentang",
+			submenu: [
+				{
+					label: "Tentang Humas POLRI",
+					href: "/tentang-humas-polri"
+				},
+				{
+					label: "Profile Pimpinan POLRI",
+					href: "/visi-misi"
+				},
+				{
+					label: "Struktur Organisasi",
+					href: "/struktur-organisasi"
+				},
+				{
+					label: "Visi dan Misi",
+					href: "/visi-misi"
+				},
+				{
+					label: "Tugas dan Fungsi",
+					href: "/tugas-dan-fungsi"
+				},
+				{
+					label: "Logo",
+					href: "#"
+				}
+			]
 		},
 		{
-			label: "Projects",
-			href: "/projects",
+			key: "ppid",
+			label: "Portal PPID",
+			href: "/portal-ppid",
 		},
 		{
-			label: "Team",
-			href: "/team",
+			key: "service",
+			label: "Pelayanan Masyarakat",
+			submenu: [
+				{
+					label: "Formulir Permohonan Informasi",
+					href: "/form-permohonan-informasi"
+				},
+				{
+					label: "Pelayanan SIM",
+					href: "/visi-misi"
+				},
+				{
+					label: "Pelayanan e-Rikkes SIM",
+					href: "/struktur-organisasi"
+				},
+				{
+					label: "Pelayanan Tes Psikologi SIM",
+					href: "/visi-misi"
+				},
+				{
+					label: "Pelayanan e-Avis",
+					href: "/tugas-dan-fungsi"
+				},
+				{
+					label: "Pelayanan Samsat Digital",
+					href: "#"
+				},
+				{
+					label: "Pelayanan SKCK",
+					href: "#"
+				},
+				{
+					label: "Pelayanan Propam Presisi",
+					href: "#"
+				},
+				{
+					label: "Pelayanan Dumas Presisi",
+					href: "#"
+				},
+				{
+					label: "Pelayanan Binmas",
+					href: "#"
+				},
+				{
+					label: "Wistle Blower System",
+					href: "#"
+				},
+			]
 		},
 		{
-			label: "Calendar",
-			href: "/calendar",
-		},
-		{
-			label: "Settings",
-			href: "/settings",
-		},
-		{
-			label: "Help & Feedback",
-			href: "/help-feedback",
-		},
-		{
-			label: "Logout",
-			href: "/logout",
+			key: "contact",
+			label: "Kontak",
+			href: "/kontak-kami",
 		},
 	],
+
 	links: {
 		github: "https://github.com/nextui-org/nextui",
 		twitter: "https://twitter.com/getnextui",