diff --git a/frontend/nextjs/package.json b/frontend/nextjs/package.json
index 382d583..ee2409e 100644
--- a/frontend/nextjs/package.json
+++ b/frontend/nextjs/package.json
@@ -13,6 +13,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/frontend/nextjs/src/app/dapp/_components/navbar.tsx b/frontend/nextjs/src/app/dapp/_components/navbar.tsx
new file mode 100644
index 0000000..762ccc3
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/_components/navbar.tsx
@@ -0,0 +1,111 @@
+"use client"
+import React, { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { Search } from '@/components/ui/forms/search';
+import { HiMagnifyingGlass, HiBars3, HiOutlinePencilSquare } from 'react-icons/hi2'
+import { X } from "lucide-react"
+import Link from 'next/link'
+import { CREATE_A_POST_PAGE, primaryNavigationLinks, resourcesLinks, hasBackButtonList, } from "./page-links"
+
+export const Navbar = () => {
+    const [showSearch, setShowSearch] = useState(false)
+    const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+    return (
+        <>
+            <header>
+                <div className=" flex-col md:flex">
+                    <div className="container flex items-center justify-between py-4 md:h-16">
+                        <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
+                        <div className="ml-auto flex items-center space-x-2 sm:justify-end">
+                            <div className='hidden md:block'>
+                                <Search />
+                            </div>
+                            {showSearch && <Search />}
+                            {showSearch ? <>
+                                <Button variant="ghost" aria-label='search' size="icon" onClick={() => setShowSearch(false)}>
+                                    <X className="h-4 w-4" />
+                                </Button>
+                            </>
+
+                                : <>
+                                    <Button variant="ghost" aria-label='search' className='block md:hidden' size="icon" onClick={() => setShowSearch(true)}>
+                                        <HiMagnifyingGlass className="h-4 w-4" />
+                                    </Button>
+                                    <Button variant="ghost" aria-label='create a post' size="icon">
+                                        <HiOutlinePencilSquare className="h-4 w-4" />
+                                    </Button>
+                                    <div className="hidden md:block">
+                                        <ConnectButton
+                                            label="Sign in"
+                                            accountStatus={{
+                                                smallScreen: "avatar",
+                                                largeScreen: "address"
+                                            }}
+                                            chainStatus="none"
+                                            showBalance={false}
+                                        />
+                                    </div>
+                                    <div className="block md:hidden">
+                                        <Popover>
+                                            <PopoverTrigger>
+                                                <Button variant="ghost" size="icon" aria-label='mobile-menu' className=''>
+                                                    <HiBars3 className="h-6 w-6" />
+                                                </Button>
+
+                                            </PopoverTrigger>
+                                            <PopoverContent className='w-[90vw] bg-accent-shade right-[calc(50%-160px)] '>
+                                                <div className="space-y-4">
+                                                    <div className="px-3 py-2">
+                                                        <div className="space-y-1">
+                                                            {primaryNavigationLinks.map((link, key) => (
+                                                                <Button variant="ghost" key={`primary-nav-${key}`} className="w-full justify-start" asChild>
+                                                                    <Link href={typeof (link.href) === "function" ? link.href("naval") : link.href}>
+                                                                        <link.icon className="mr-2 h-4 w-4 text-accent-2" />
+                                                                        {link.title}
+                                                                    </Link>
+                                                                </Button>
+                                                            ))}
+                                                        </div>
+                                                        {isLoggedIn ? <Button variant="default" className="w-full mt-4" asChild>
+                                                            Logout
+                                                        </Button> : <ConnectButton
+                                                            label="Sign in"
+                                                            accountStatus={{
+                                                                smallScreen: "avatar",
+                                                                largeScreen: "address"
+                                                            }}
+                                                            chainStatus="none"
+                                                            showBalance={false}
+                                                        />}
+                                                    </div>
+
+                                                    <div className="bg-accent-shade rounded-md py-4 px-2">
+                                                        <h2 className="mb-3 px-4 text-md font-semibold tracking-tight">
+                                                            Resources
+                                                        </h2>
+                                                        <div className="space-y-0">
+                                                            {resourcesLinks.map((link, key) => (
+                                                                <Button variant="link" key={`primary-nav-${key}`} className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                                                                    <Link href={link.href}>
+                                                                        {link.title}
+                                                                    </Link>
+                                                                </Button>
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </PopoverContent>
+                                        </Popover>
+                                    </div>
+                                </>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/_components/page-links.ts b/frontend/nextjs/src/app/dapp/_components/page-links.ts
index 5436881..ab90252 100644
--- a/frontend/nextjs/src/app/dapp/_components/page-links.ts
+++ b/frontend/nextjs/src/app/dapp/_components/page-links.ts
@@ -1,3 +1,5 @@
+import {HiOutlineHome, HiOutlineUser, HiOutlineUsers, HiOutlineCalendarDays, HiOutlineEnvelope } from 'react-icons/hi2'
+
 export const CREATE_A_POST_PAGE = "/dapp/p/create"
 export const POST_PAGE = (permalink:string) => `/dapp/p/${permalink}`
 export const PROFILE_EDIT_PAGE = "/dapp/profile/edit"
@@ -10,4 +12,61 @@ export const NOTIFICATIONS_PAGE = "/dapp/notifications"
 export const WELCOME_PAGE = "/welcome"
 export const FAQ_PAGE = "/faq"
 export const HELP_PAGE = "/help"
-export const PRIVACY_POLICY_PAGE = "/privacy-policy"
\ No newline at end of file
+export const PRIVACY_POLICY_PAGE = "/privacy-policy"
+
+export const primaryNavigationLinks = [
+    {
+        title: "Home",
+        icon: HiOutlineHome,
+        isActive: false,
+        href: HOME_PAGE
+    },
+    {
+        title: "Marketplace",
+        icon: HiOutlineUsers,
+        isActive: false,
+        href: MARKETPLACE_PAGE
+    },
+    {
+        title: "Bookings",
+        icon: HiOutlineCalendarDays,
+        isActive: false,
+        href: BOOKINGS_PAGE
+    },
+    {
+        title: "My Profile",
+        icon: HiOutlineUser,
+        isActive: false,
+        href: PROFILE_PAGE
+    },
+    {
+        title: "Notifications",
+        icon: HiOutlineEnvelope,
+        isActive: false,
+        href: NOTIFICATIONS_PAGE
+    }
+]
+
+export const resourcesLinks = [
+    {
+        title: "Welcome",
+        href: WELCOME_PAGE
+    },
+    {
+        title: "FAQ",
+        href: FAQ_PAGE
+    },
+    {
+        title: "Help",
+        href: HELP_PAGE
+    },
+    {
+        title: "Privacy Policy",
+        href: PRIVACY_POLICY_PAGE
+    },
+]
+
+export const hasBackButtonList = [
+    PROFILE_EDIT_PAGE,
+    CREATE_A_POST_PAGE
+]
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/_components/sidebar.tsx b/frontend/nextjs/src/app/dapp/_components/sidebar.tsx
index 628b795..9449fd6 100644
--- a/frontend/nextjs/src/app/dapp/_components/sidebar.tsx
+++ b/frontend/nextjs/src/app/dapp/_components/sidebar.tsx
@@ -4,72 +4,14 @@ import Link from "next/link"
 import { usePathname } from 'next/navigation'
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {HiOutlineHome, HiOutlineUser, HiOutlineUsers, HiOutlineCalendarDays, HiOutlineEnvelope, HiChevronLeft} from 'react-icons/hi2'
-import { HOME_PAGE, MARKETPLACE_PAGE, BOOKINGS_PAGE, PROFILE_PAGE, NOTIFICATIONS_PAGE, PROFILE_EDIT_PAGE, CREATE_A_POST_PAGE, WELCOME_PAGE, FAQ_PAGE, HELP_PAGE, PRIVACY_POLICY_PAGE } from "./page-links"
+import { HiChevronLeft} from 'react-icons/hi2'
+import { HOME_PAGE, CREATE_A_POST_PAGE, primaryNavigationLinks, resourcesLinks, hasBackButtonList,  } from "./page-links"
 
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
     
 }
 
-const primaryNavigationLinks = [
-    {
-        title: "Home",
-        icon: HiOutlineHome,
-        isActive: false,
-        href: HOME_PAGE
-    },
-    {
-        title: "Marketplace",
-        icon: HiOutlineUsers,
-        isActive: false,
-        href: MARKETPLACE_PAGE
-    },
-    {
-        title: "Bookings",
-        icon: HiOutlineCalendarDays,
-        isActive: false,
-        href: BOOKINGS_PAGE
-    },
-    {
-        title: "My Profile",
-        icon: HiOutlineUser,
-        isActive: false,
-        href: PROFILE_PAGE
-    },
-    {
-        title: "Notifications",
-        icon: HiOutlineEnvelope,
-        isActive: false,
-        href: NOTIFICATIONS_PAGE
-    }
-]
-
-const resourcesLinks = [
-    {
-        title: "Welcome",
-        href: WELCOME_PAGE
-    },
-    {
-        title: "FAQ",
-        href: FAQ_PAGE
-    },
-    {
-        title: "Help",
-        href: HELP_PAGE
-    },
-    {
-        title: "Privacy Policy",
-        href: PRIVACY_POLICY_PAGE
-    },
-]
-
-const hasBackButtonList = [
-    PROFILE_EDIT_PAGE,
-    CREATE_A_POST_PAGE
-]
-
-
 export function Sidebar({ className }: SidebarProps) {
     const [hasBackButton, setHasBackButton] = useState(false)
     const pathname = usePathname()
@@ -109,10 +51,10 @@ export function Sidebar({ className }: SidebarProps) {
                 </div>
                 <div className="px-3 py-2">
                     <div className="bg-accent-shade rounded-md py-4 px-2">
-                    <h2 className="mb-3 px-4 text-md font-semibold tracking-tight">
-                        Resources
-                    </h2>
-                    <div className="space-y-0">
+                        <h2 className="mb-3 px-4 text-md font-semibold tracking-tight">
+                            Resources
+                        </h2>
+                        <div className="space-y-0">
                             {resourcesLinks.map((link, key) => (
                                 <Button variant="link" key={`primary-nav-${key}`} className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
                                     <Link href={link.href}>
@@ -120,7 +62,7 @@ export function Sidebar({ className }: SidebarProps) {
                                     </Link>
                                 </Button>
                             ))}
-                    </div>
+                        </div>
                     </div>
                     
                 </div>
diff --git a/frontend/nextjs/src/app/dapp/layout.tsx b/frontend/nextjs/src/app/dapp/layout.tsx
index c08e2bb..987165e 100644
--- a/frontend/nextjs/src/app/dapp/layout.tsx
+++ b/frontend/nextjs/src/app/dapp/layout.tsx
@@ -1,18 +1,18 @@
 
-import React from 'react';
+import React, {useState} from 'react';
 import { Metadata } from 'next'
 import '@rainbow-me/rainbowkit/styles.css';
 import {
   ConnectButton
 } from '@rainbow-me/rainbowkit';
 import { Sidebar } from './_components/sidebar';
-import { RightSidebar } from './_components/right-sidebar';
-import { Search } from '@/components/ui/forms/search';
 import { Button } from '@/components/ui/button';
 import { HiOutlinePencilAlt } from "react-icons/hi"
+import { HiBars3, HiMagnifyingGlass } from "react-icons/hi2"
 import DappProviders from './_components/providers';
 import SessionProvider from "@/lib/hooks/sessionProvider";
 import { getServerSession } from "next-auth";
+import {Navbar} from "./_components/navbar"
 
 export const metadata: Metadata = {
   title: 'MEMM! Homepage',
@@ -26,32 +26,12 @@ export default async function DappLayout({
   children
 }: Props) {
   const session = await getServerSession();
+
   return (
     <>
     <SessionProvider refetchInterval={0} session={session}>
       <DappProviders>
-        <header>
-          <div className=" flex-col md:flex">
-            <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
-              <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
-              <div className="ml-auto flex w-full space-x-2 sm:justify-end">
-                <Search />
-                <Button variant="ghost" aria-label='create a post' size="icon">
-                  <HiOutlinePencilAlt className="h-4 w-4" />
-                </Button>
-                <ConnectButton
-                  label="Sign in"
-                  accountStatus={{
-                    smallScreen: "avatar",
-                    largeScreen: "address"
-                  }}
-                  chainStatus="none"
-                  showBalance={false}
-                />
-              </div>
-            </div>
-          </div>
-        </header>
+        <Navbar />
 
         <div className="body">
           <div className="border-t">
diff --git a/frontend/nextjs/src/components/ui/popover.tsx b/frontend/nextjs/src/components/ui/popover.tsx
new file mode 100644
index 0000000..a0ec48b
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }