diff --git a/app/layout.tsx b/app/layout.tsx
index 93d28d3..4997d00 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -49,7 +49,7 @@ export default function RootLayout({
 								src="/headerbannerpng.png"
 								className=" w-full"
 							/>
-							<main className="pt-8 px-2 md:px-6 flex-grow">
+							<main className="pt-8 px-2 md:px-4 lg:px-6 flex-grow">
 								{children}
 							</main>
 							<Footer />
diff --git a/components/Landing Page/BodyLayout.tsx b/components/Landing Page/BodyLayout.tsx
index 9ea0694..9d696f8 100644
--- a/components/Landing Page/BodyLayout.tsx	
+++ b/components/Landing Page/BodyLayout.tsx	
@@ -8,13 +8,13 @@ import SidebarNav from './SidebarNav'
 export default function BodyLayout() {
   return (
     <div className='md:flex bg-white text-black  mt-8 pb-8'>
-      <div className='w-auto md:w-[75%] space-y-5'>
+      <div className='w-auto md:-w[65%] lg:w-[75%] space-y-5'>
         <CategorySatker />
         <RegionalNews />
         <MediaSocial />
         <ENewsPolri />
       </div>
-      <div className='w-auto md:w-[25%]'>
+      <div className='w-auto md:w-[35%] lg:w-[25%]'>
         <SidebarNav />
       </div>
     </div>
diff --git a/components/Landing Page/CategorySatker.tsx b/components/Landing Page/CategorySatker.tsx
index efd355e..0665ab2 100644
--- a/components/Landing Page/CategorySatker.tsx	
+++ b/components/Landing Page/CategorySatker.tsx	
@@ -26,13 +26,13 @@ export default function CategorySatker() {
         },
     ];
     return (
-        <div className='text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto md:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center'>
+        <div className='text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center border-2 border-green-500'>
             <div className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>Kategori Satker</div>
             <div className='flex items-center justify-around'>
                 <div><ChevronLeftWhite /></div>
                 <div className="gap-2 md:gap-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
                     {list.map((item, index) => (
-                        <div className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
+                        <div key={index} className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
                             <Image
                                 radius="lg"
                                 className="h-[59px]"
diff --git a/components/Landing Page/ENewsPolri.tsx b/components/Landing Page/ENewsPolri.tsx
index 8d6b288..eaba3c7 100644
--- a/components/Landing Page/ENewsPolri.tsx	
+++ b/components/Landing Page/ENewsPolri.tsx	
@@ -22,11 +22,11 @@ export default function ENewsPolri() {
         },
     ];
     return (
-        <div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto md:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center items-center'>
+        <div className='bg-[#1F1A17] text-center border-2 border-purple-500 rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center items-center'>
             <p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
             <div className='flex flex-row w-full items-center justify-between'>
                 <ChevronLeftWhite />
-                <div className='md:flex space-y-4 md:space-y-0 gap-4'>
+                <div className='lg:flex space-y-4 lg:space-y-0 gap-4'>
                     {eNews.map((data) => (
                         <div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
                             <Card className='text-white'
diff --git a/components/Landing Page/HeaderNews.tsx b/components/Landing Page/HeaderNews.tsx
index 57c9c32..0da47c3 100644
--- a/components/Landing Page/HeaderNews.tsx	
+++ b/components/Landing Page/HeaderNews.tsx	
@@ -5,8 +5,8 @@ import Image from 'next/image'
 
 export default function HeaderNews() {
     return (
-        <div className='md:flex items-center text-center bg-black dark:bg-white  rounded-md gap-3 p-2'>
-            <div className='w-auto md:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
+        <div className='lg:flex items-center text-center bg-black dark:bg-white  rounded-md gap-3 p-2'>
+            <div className='w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
                 <p className='text-lg font-bold h-10'>Berita Terkini</p>
                 <ScrollShadow hideScrollBar className=" h-[343px]">
                     <div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
@@ -39,7 +39,7 @@ export default function HeaderNews() {
                     </Button>
                 </div>
             </div>
-            <div className='w-auto md:w-[50%]'>
+            <div className='w-auto lg:w-[50%]'>
                 <Card
                     isFooterBlurred
                     radius="lg"
@@ -62,7 +62,7 @@ export default function HeaderNews() {
                     </CardFooter>
                 </Card>
             </div>
-            <div className='w-auto md:w-[25%] p-2 rounded-md text-white dark:text-black '>
+            <div className='w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black '>
                 <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
                     <img src="/gprheader.png" alt="gpr" className='w-full' />
                 </div>
diff --git a/components/Landing Page/MediaSocial.tsx b/components/Landing Page/MediaSocial.tsx
index d162df8..d720ccb 100644
--- a/components/Landing Page/MediaSocial.tsx	
+++ b/components/Landing Page/MediaSocial.tsx	
@@ -73,7 +73,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -115,7 +115,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -157,7 +157,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -197,7 +197,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -237,7 +237,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
diff --git a/components/Landing Page/SidebarNav.tsx b/components/Landing Page/SidebarNav.tsx
index af06f82..45f873a 100644
--- a/components/Landing Page/SidebarNav.tsx	
+++ b/components/Landing Page/SidebarNav.tsx	
@@ -55,33 +55,33 @@ export default function SidebarNav() {
             </div>
             <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div>
             <div className='flex flex-col space-y-4'>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal1.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-3'>Berita BPS</p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p>
                     <p className='leading-tight text-blue-500 pt-2'>Pengumuman BPS</p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal2.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>Berita KPU</p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p>
                     <p className='leading-tight text-blue-500 pt-2'>Pengumuman KPU</p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal3.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>Berita BAWASLU</p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p>
                     <p className='leading-tight text-blue-500 pt-2'>Pengumuman BAWASLU</p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal4.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>Info KPAI</p>
                     <p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal5.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>INFO KOMNAS PEREMPUAN</p>
                     <p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 724d58a..529bf85 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,5 +1,5 @@
+'use client'
 import { Input } from "@nextui-org/input";
-import { Kbd } from "@nextui-org/kbd";
 import { Link } from "@nextui-org/link";
 import {
 	NavbarBrand,
@@ -24,10 +24,13 @@ import {
 } from "@/components/icons";
 import { ThemeSwitch } from "@/components/theme-switch";
 
-import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Image } from "@nextui-org/react";
 import { siteConfig } from "@/config/site";
+import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger, Image, User } from "@nextui-org/react";
+import { useEffect, useState } from "react";
 
 export const Navbar = () => {
+	const [hasMounted, setHasMounted] = useState(false);
+
 	const searchInput = (
 		<Input
 			aria-label="Search"
@@ -35,11 +38,6 @@ export const Navbar = () => {
 				inputWrapper: "bg-default-100",
 				input: "text-sm",
 			}}
-			endContent={
-				<Kbd className="hidden lg:inline-block" keys={["command"]}>
-					K
-				</Kbd>
-			}
 			labelPlacement="outside"
 			placeholder="Search..."
 			startContent={
@@ -49,6 +47,13 @@ export const Navbar = () => {
 		/>
 	);
 
+	useEffect(() => {
+		setHasMounted(true);
+	}, []);
+
+	// Render
+	if (!hasMounted) return null;
+
 	return (
 		<NextUINavbar className="h-28 md:h-36"
 			classNames={{
@@ -61,33 +66,987 @@ export const Navbar = () => {
 			</NavbarBrand>
 			<NavbarContent className="hidden md:flex   basis-3/5 gap-0 md:gap-4 lg:gap-12 px-auto lg:px-10" justify="center">
 				<NavbarItem>
-					<Link color="foreground" href="#">
-						<p className="mr-1 font-semibold">Pelayanan Masyarakat</p>
-						<ChevronDownIcon />
-					</Link>
+					<div >
+						<Dropdown>
+							<NavbarItem>
+								<DropdownTrigger>
+									<Button
+										disableRipple
+										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
+										radius="sm"
+										variant="light"
+										endContent={<ChevronDownIcon className="pt-1" />}
+									>
+										Pelayanan Masyarakat
+									</Button>
+								</DropdownTrigger>
+							</NavbarItem>
+							<DropdownMenu
+								aria-label="pelayanan-masyarakat"
+								className=""
+							>
+								<DropdownSection
+									title="Pelayanan Masyarakat" showDivider
+									classNames={{
+										group: "flex flex-row",
+										base: "",
+
+									}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/logo1.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">Pelayanan Surat Pemberitahuan Perkembangan Hasil Penyidikan Online</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm2.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Formulir Permohonan Informasi</div>
+												<div className="truncate max-w-min">
+													Pelayanan Permohonan Formulir Informasi
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm3.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan SIM</div>
+												<div className="truncate max-w-min">
+													Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM Berbasis Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm4.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan E-Rikkes SIM</div>
+												<div className="truncate max-w-min">
+													Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi Berbasis Online Dalam Proses Penerbitan SIM.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm5.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan Test Psikologi SIM</div>
+												<div className="truncate max-w-min">
+													Pelayanan Pembuatan Test Psikologi SIM Berbasis Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm6.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan E-Avis</div>
+												<div className="truncate max-w-min">
+													Pelayanan Ujian Teori SIM Berbasis Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm7.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan Samsat Digital</div>
+												<div className="truncate max-w-min">
+													Pelayanan Samsat Berbasis Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm8.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan SKCK</div>
+												<div className="truncate max-w-min">
+													Pelayanan Pembuatan SKCK Berbasis Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm9.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan Propam Presisi</div>
+												<div className="truncate max-w-min">
+													Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu Kejadian atau Kejahatan.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm10.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan Dumas Presisi</div>
+												<div className="truncate max-w-min">
+													Layanan Pengaduan Masyarakat Terintegrasi Berbasis Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm11.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Pelayanan Binmas</div>
+												<div className="truncate max-w-min">
+													Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/pm12.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Clean & Clear Polri</div>
+												<div className="truncate max-w-min">
+													Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan Anggota POLRI.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+							</DropdownMenu>
+						</Dropdown>
+					</div>
 				</NavbarItem>
 				<NavbarItem >
-					<Link href="#" color="foreground">
-						<p className="mr-1 font-semibold">Portal PPID</p>
-					</Link>
+					<Dropdown className="border border-purple-700">
+						<DropdownTrigger>
+							<Button
+								className="bg-transparent p-0 text-medium font-semibold data-[hover=true]:bg-transparent"
+								variant="light"
+							>
+								Portal PPID
+							</Button>
+						</DropdownTrigger>
+						<DropdownMenu
+							aria-label="Action event example"
+							onAction={(key) => alert(key)}
+							classNames={{
+								base: "border border-green-500",
+								list: "border border-pink-500"
+							}}
+						>
+							<DropdownSection className="border border-red-700"
+								classNames={{
+									base: "border border-yellow-500",
+								}}
+								itemClasses={{
+									base: "border border-white-500",
+									wrapper: "border-2 border-white-500"
+								}}>
+								<DropdownItem
+									key="sp2hp"
+								>
+									<div className="flex flex-wrap items-center">
+										<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+										<div className="text-xs pl-2">
+											<div>SP2HP</div>
+											<div className="">
+												Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
+											</div>
+										</div>
+									</div>
+								</DropdownItem>
+								<DropdownItem
+									key="sp2hp"
+								>
+									<div className="flex items-center">
+										<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+										<div className="text-xs pl-2">
+											<div>SP2HP</div>
+											<div className="truncate max-w-min">
+												Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+											</div>
+										</div>
+									</div>
+								</DropdownItem>
+								<DropdownItem
+									key="sp2hp"
+								>
+									<div className="flex items-center">
+										<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+										<div className="text-xs pl-2">
+											<div>SP2HP</div>
+											<div className="truncate max-w-min">
+												Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+											</div>
+										</div>
+									</div>
+								</DropdownItem>
+								<DropdownItem
+									key="sp2hp"
+								>
+									<div className="flex items-center">
+										<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+										<div className="text-xs pl-2">
+											<div>SP2HP</div>
+											<div className="truncate max-w-min">
+												Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+											</div>
+										</div>
+									</div>
+								</DropdownItem>
+							</DropdownSection>
+						</DropdownMenu>
+					</Dropdown>
 				</NavbarItem>
 				<NavbarItem>
-					<Link color="foreground" href="#">
-						<p className="mr-1 font-semibold">Publikasi</p>
-						<ChevronDownIcon />
-					</Link>
+					<div >
+						<Dropdown>
+							<NavbarItem>
+								<DropdownTrigger>
+									<Button
+										disableRipple
+										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
+										radius="sm"
+										variant="light"
+										endContent={<ChevronDownIcon className="pt-1" />}
+									>
+										Publikasi
+									</Button>
+								</DropdownTrigger>
+							</NavbarItem>
+							<DropdownMenu
+								aria-label="pelayanan-masyarakat"
+								className=""
+							>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+							</DropdownMenu>
+						</Dropdown>
+					</div>
 				</NavbarItem>
 				<NavbarItem>
-					<Link color="foreground" href="#">
-						<p className="mr-1 font-semibold">Tentang</p>
-						<ChevronDownIcon />
-					</Link>
+					<div >
+						<Dropdown>
+							<NavbarItem>
+								<DropdownTrigger>
+									<Button
+										disableRipple
+										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
+										radius="sm"
+										variant="light"
+										endContent={<ChevronDownIcon className="pt-1" />}
+									>
+										Tentang
+									</Button>
+								</DropdownTrigger>
+							</NavbarItem>
+							<DropdownMenu
+								aria-label="pelayanan-masyarakat"
+								className=""
+							>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem><DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="sp2hp"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+							</DropdownMenu>
+						</Dropdown>
+					</div>
 				</NavbarItem>
 				<NavbarItem>
-					<Link color="foreground" href="#">
-						<p className="mr-1 font-semibold">Aplikasi Terkait</p>
-						<ChevronDownIcon />
-					</Link>
+					<div >
+						<Dropdown>
+							<NavbarItem>
+								<DropdownTrigger>
+									<Button
+										disableRipple
+										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
+										radius="sm"
+										variant="light"
+										endContent={<ChevronDownIcon className="pt-1" />}
+									>
+										Aplikasi Terkait
+									</Button>
+								</DropdownTrigger>
+							</NavbarItem>
+							<DropdownMenu
+								aria-label="pelayanan-masyarakat"
+								className=""
+							>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="1"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at1.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Polri Super App</div>
+												<div className="truncate max-w-min">
+													Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK, Pengaduan Masyarakat.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="2"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at2.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Media Hub</div>
+												<div className="truncate max-w-min">
+													Humas Polri dalam Data.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="3"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at3.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Polisiku</div>
+												<div className="truncate max-w-min">
+													Membantu anggota Kepolisian untuk mengindetifikasi masalah di lapangan.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="4"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at4.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SP2HP</div>
+												<div className="truncate max-w-min">
+													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="5"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at5.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Polri TV</div>
+												<div className="truncate max-w-min">
+													Humas Polri dalam Audio Visual.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="6"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at6.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Polri Radio</div>
+												<div className="truncate max-w-min">
+													Humas Polri dalam Audio.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="7"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at7.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>E-Avis</div>
+												<div className="truncate max-w-min">
+													Platform Ujian Teori SIM.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="8"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at8.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>E-Rikkes</div>
+												<div className="truncate max-w-min">
+													Pemeriksaan Kesehatan Berbassi Teknologi Secara Online dalam Proses Penerbitan SIM.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="9"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at9.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>E-PPSI</div>
+												<div className="truncate max-w-min">
+													Tes Psikologis SIM Secara Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="10"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at10.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>BOS</div>
+												<div className="truncate max-w-min">
+													Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="11"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at11.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Signal</div>
+												<div className="truncate max-w-min">
+													Aplikasi Samsat Digital Nasional.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="12"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at12.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SKCK Online</div>
+												<div className="truncate max-w-min">
+													Aplikasi Pembuatan SKCK Secara Online.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="13"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at13.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Propam Presisi</div>
+												<div className="truncate max-w-min">
+													Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="14"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at14.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Monitoring Presisi</div>
+												<div className="truncate max-w-min">
+													Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya Melaporkan Tugas.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="15"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at15.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>SDM - Penerimaan POLRI</div>
+												<div className="truncate max-w-min">
+													Website untuk Memonitoring Penerimaan Anggota POLRI.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="16"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at16.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Wistle Blowing System</div>
+												<div className="truncate max-w-min">
+													Website untuk Pengaduan Penerimaan Anggota POLRI.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+								<DropdownSection classNames={{
+									group: "flex flex-row",
+									base: "",
+
+								}}>
+									<DropdownItem
+										key="17"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at17.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Dumas Presisi</div>
+												<div className="truncate max-w-min">
+													Website Layanan Pengaduan Masyarakat Terintegrasi.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="18"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at18.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Clean & Clear Polri</div>
+												<div className="truncate max-w-min">
+													Aplikasi untuk Memonitoring Penerimaan Angota POLRI.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="19"
+									>
+										<div className="flex items-center w-[350px]">
+											<div className="min-w-max"><img src="/at19.png" alt="" /></div>
+											<div className="text-xs pl-2">
+												<div>Sinar</div>
+												<div className="truncate max-w-min">
+													Aplikasi dan Website Pelayanan Pendaftaran dan Perpanjangan SIM.
+												</div>
+											</div>
+										</div>
+									</DropdownItem>
+									<DropdownItem
+										key="12"
+									>
+										<div className="flex items-center w-[350px]">
+
+										</div>
+									</DropdownItem>
+								</DropdownSection>
+							</DropdownMenu>
+						</Dropdown>
+					</div>
 				</NavbarItem>
 				<NavbarItem>
 					<ThemeSwitch />
diff --git a/public/at1.png b/public/at1.png
new file mode 100644
index 0000000..4c0aaa2
Binary files /dev/null and b/public/at1.png differ
diff --git a/public/at10.png b/public/at10.png
new file mode 100644
index 0000000..0a77cb0
Binary files /dev/null and b/public/at10.png differ
diff --git a/public/at11.png b/public/at11.png
new file mode 100644
index 0000000..6a0dea6
Binary files /dev/null and b/public/at11.png differ
diff --git a/public/at12.png b/public/at12.png
new file mode 100644
index 0000000..48481b1
Binary files /dev/null and b/public/at12.png differ
diff --git a/public/at13.png b/public/at13.png
new file mode 100644
index 0000000..21cb225
Binary files /dev/null and b/public/at13.png differ
diff --git a/public/at14.png b/public/at14.png
new file mode 100644
index 0000000..0b49999
Binary files /dev/null and b/public/at14.png differ
diff --git a/public/at15.png b/public/at15.png
new file mode 100644
index 0000000..702998c
Binary files /dev/null and b/public/at15.png differ
diff --git a/public/at16.png b/public/at16.png
new file mode 100644
index 0000000..c8aca34
Binary files /dev/null and b/public/at16.png differ
diff --git a/public/at17.png b/public/at17.png
new file mode 100644
index 0000000..a640e2a
Binary files /dev/null and b/public/at17.png differ
diff --git a/public/at18.png b/public/at18.png
new file mode 100644
index 0000000..a45ed3c
Binary files /dev/null and b/public/at18.png differ
diff --git a/public/at19.png b/public/at19.png
new file mode 100644
index 0000000..a44cb85
Binary files /dev/null and b/public/at19.png differ
diff --git a/public/at2.png b/public/at2.png
new file mode 100644
index 0000000..82c2c33
Binary files /dev/null and b/public/at2.png differ
diff --git a/public/at3.png b/public/at3.png
new file mode 100644
index 0000000..05d6339
Binary files /dev/null and b/public/at3.png differ
diff --git a/public/at4.png b/public/at4.png
new file mode 100644
index 0000000..584eea5
Binary files /dev/null and b/public/at4.png differ
diff --git a/public/at5.png b/public/at5.png
new file mode 100644
index 0000000..3c621b1
Binary files /dev/null and b/public/at5.png differ
diff --git a/public/at6.png b/public/at6.png
new file mode 100644
index 0000000..c8ae0f4
Binary files /dev/null and b/public/at6.png differ
diff --git a/public/at7.png b/public/at7.png
new file mode 100644
index 0000000..af59bd1
Binary files /dev/null and b/public/at7.png differ
diff --git a/public/at8.png b/public/at8.png
new file mode 100644
index 0000000..badfe62
Binary files /dev/null and b/public/at8.png differ
diff --git a/public/at9.png b/public/at9.png
new file mode 100644
index 0000000..c91b3d9
Binary files /dev/null and b/public/at9.png differ
diff --git a/public/logo1.png b/public/logo1.png
new file mode 100644
index 0000000..584eea5
Binary files /dev/null and b/public/logo1.png differ
diff --git a/public/pm10.png b/public/pm10.png
new file mode 100644
index 0000000..a640e2a
Binary files /dev/null and b/public/pm10.png differ
diff --git a/public/pm11.png b/public/pm11.png
new file mode 100644
index 0000000..0a77cb0
Binary files /dev/null and b/public/pm11.png differ
diff --git a/public/pm12.png b/public/pm12.png
new file mode 100644
index 0000000..a45ed3c
Binary files /dev/null and b/public/pm12.png differ
diff --git a/public/pm2.png b/public/pm2.png
new file mode 100644
index 0000000..16414b6
Binary files /dev/null and b/public/pm2.png differ
diff --git a/public/pm3.png b/public/pm3.png
new file mode 100644
index 0000000..a44cb85
Binary files /dev/null and b/public/pm3.png differ
diff --git a/public/pm4.png b/public/pm4.png
new file mode 100644
index 0000000..badfe62
Binary files /dev/null and b/public/pm4.png differ
diff --git a/public/pm5.png b/public/pm5.png
new file mode 100644
index 0000000..c91b3d9
Binary files /dev/null and b/public/pm5.png differ
diff --git a/public/pm6.png b/public/pm6.png
new file mode 100644
index 0000000..af59bd1
Binary files /dev/null and b/public/pm6.png differ
diff --git a/public/pm7.png b/public/pm7.png
new file mode 100644
index 0000000..8defcb4
Binary files /dev/null and b/public/pm7.png differ
diff --git a/public/pm8.png b/public/pm8.png
new file mode 100644
index 0000000..48481b1
Binary files /dev/null and b/public/pm8.png differ
diff --git a/public/pm9.png b/public/pm9.png
new file mode 100644
index 0000000..21cb225
Binary files /dev/null and b/public/pm9.png differ
diff --git a/public/sp2h.png b/public/sp2h.png
new file mode 100644
index 0000000..eb02cbf
Binary files /dev/null and b/public/sp2h.png differ