diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 5b63dd6..cb7a918 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -8,10 +8,14 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 
 const navLinks = [
-  { label: "About", href: "/#about" },
-  { label: "Events", href: "/#events" },
-  { label: "Partners", href: "/#partners" },
-  { label: "Claim your Web3 ID!", href: "/#identity", isCTA: true },
+  { label: "About", href: "#about" },
+  { label: "Events", href: "#events" },
+  { label: "Partners", href: "#partners" },
+  
+  { label: "Search", href : "#search" }, // TODO: add search page
+  { label: "Join Us", href: "#join_us" }, // TODO: add Us
+  { label: "Connect Wallet" , href: "#connect_wallet"}, // TODO: add wallet connection
+  //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true }  // not sure if need 
 ];
 
 export function Navbar() {
@@ -21,10 +25,11 @@ export function Navbar() {
   const isHome = pathname === "/";
 
   return (
-    <nav className={`top-0 left-0 right-0 z-50 py-4 text-foreground ${isHome ? "absolute bg-transparent" : "fixed bg-background/95 backdrop-blur-xl border-b border-border"}`}>
-      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+    <nav className="absolute z-50 bg-[#404246]/60 backdrop-blur-md border-b border-white/10 flex justify-between items-center px-8 w-[80%] left-1/2 translate-x-[-50%] top-[5%] 
+    rounded-full text-white shadow-lg whitespace-nowrap">
+      <div className="container h-16 flex items-center justify-between">
         {/* Logo */}
-        <Link href="/" className="flex items-center gap-3 group">
+        <Link href="#" className="flex items-center group flex-shrink-0">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"
@@ -34,12 +39,12 @@ export function Navbar() {
         </Link>
 
         {/* Desktop links */}
-        <div className="hidden md:flex items-center gap-8">
+        <div className="hidden md:flex items-center gap-15 absolute right-[-14%] -translate-x-1/2">
           {navLinks.map((link) => (
             <Link
               key={link.href}
               href={link.href}
-              className={`text-sm font-bold tracking-wide transition-all ${link.isCTA ? "text-primary bg-primary/10 px-4 py-2 rounded-full border border-primary/20 hover:bg-primary/20 hover:-translate-y-0.5 shadow-sm" : "text-foreground/80 hover:text-primary"}`}
+              className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
             >
               {link.label}
             </Link>
@@ -78,14 +83,14 @@ export function Navbar() {
 
       {/* Mobile menu */}
       {mobileOpen && (
-        <div className="md:hidden absolute top-full left-0 right-0 bg-background/98 backdrop-blur-xl border-b border-border shadow-lg">
+        <div className="md:hidden absolute top-full left-0 right-0 bg-[#404246]/60 backdrop-blur-md border-b border-border shadow-lg rounded-md">
           <div className="container mx-auto px-6 py-6 flex flex-col gap-4">
             {navLinks.map((link) => (
               <Link
                 key={link.href}
                 href={link.href}
                 onClick={() => setMobileOpen(false)}
-                className={`text-base font-bold py-2 transition-colors border-b border-border/50 ${link.isCTA ? "text-primary" : "text-foreground/80 hover:text-primary"}`}
+                className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
               >
                 {link.label}
               </Link>
@@ -105,6 +110,7 @@ export function Navbar() {
             >
               <WalletButton />
             </div>
+            
             <Button
               size="lg"
               className="rounded-xl font-bold mt-4 w-full h-12"