diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 56b25fe..2794177 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -1,228 +1,10 @@
-import { MEMBERSHIP_FORM_URL } from "../lib/siteLinks";
+import NewNavbar from "./NewNavbar";
 import Marquee from "./Marquee";
-import { useEffect, useState } from "react";
-import { Link, NavLink, useLocation } from "react-router-dom";
-import { AnimatePresence, motion } from "motion/react";
-import { FiChevronDown, FiMenu, FiX } from "react-icons/fi";
-import logo from "../assets/brand/umsa-logo.png";
-
-const ABOUT_MENU = [
-  { to: "/about", label: "About Us" },
-  { to: "/contact", label: "Contact" },
-  { to: "/team", label: "Our Team" },
-];
-
-const LINKS = [
-  { to: "/", label: "Home", end: true },
-  { to: "/events", label: "Events" },
-  { to: "/sponsors", label: "Sponsors" },
-  { to: "/gallery", label: "Photos" },
-];
-
-const LINK_BASE =
-  "font-heading text-[13px] tracking-[0.12em] uppercase transition-colors";
-
-function AboutMenu() {
-  const [open, setOpen] = useState(false);
-  const { pathname } = useLocation();
-  const active = ABOUT_MENU.some((item) => pathname === item.to);
-
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
-
-  return (
-    <div
-      className="relative"
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      onFocus={() => setOpen(true)}
-      onBlur={(e) => {
-        if (!e.currentTarget.contains(e.relatedTarget as Node)) setOpen(false);
-      }}
-    >
-      <NavLink
-        to="/about"
-        onClick={() => setOpen(false)}
-        aria-expanded={open}
-        aria-haspopup="menu"
-        className={`relative flex items-center gap-1 ${LINK_BASE} ${
-          active
-            ? "text-accent2-primary"
-            : "text-accent1-primary hover:text-accent2-primary"
-        }`}
-      >
-        About
-        <FiChevronDown
-          size={13}
-          className={`transition-transform ${open ? "rotate-180" : ""}`}
-        />
-        {active && (
-          <motion.span
-            layoutId="nav-underline"
-            className="absolute -bottom-1.5 left-0 h-0.5 w-full bg-accent2-primary"
-          />
-        )}
-      </NavLink>
-
-      <AnimatePresence>
-        {open && (
-          <motion.div
-            role="menu"
-            initial={{ opacity: 0, y: -6 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -6 }}
-            transition={{ duration: 0.16, ease: "easeOut" }}
-            className="absolute top-full left-1/2 z-50 w-44 -translate-x-1/2 rounded-lg
-              bg-background-secondary py-2 shadow-[0_10px_24px_rgba(0,0,0,0.14)]"
-            style={{ marginTop: 8 }}
-          >
-            {ABOUT_MENU.map((item) => (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                role="menuitem"
-                onClick={() => setOpen(false)}
-                className={({ isActive }) =>
-                  `block px-5 py-2.5 ${LINK_BASE} ${
-                    isActive
-                      ? "text-accent2-primary"
-                      : "text-accent1-primary hover:text-accent2-primary"
-                  }`
-                }
-              >
-                {item.label}
-              </NavLink>
-            ))}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
 
 export default function Navbar() {
-  const [open, setOpen] = useState(false);
-
-  const linkClass = ({ isActive }: { isActive: boolean }) =>
-    `relative ${LINK_BASE} ${
-      isActive
-        ? "text-accent2-primary"
-        : "text-accent1-primary hover:text-accent2-primary"
-    }`;
-
   return (
     <header className="sticky top-0 z-50">
-      <nav className="border-b-2 border-accent1-primary bg-background-primary">
-        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-2">
-          <Link to="/" aria-label="UMSA home" className="shrink-0">
-            <img src={logo} alt="UMSA" className="h-10 w-10 object-contain" />
-          </Link>
-
-          <div className="hidden items-center gap-7 lg:flex">
-            <NavLink to="/" end className={linkClass}>
-              {({ isActive }) => (
-                <>
-                  Home
-                  {isActive && (
-                    <motion.span
-                      layoutId="nav-underline"
-                      className="absolute -bottom-1.5 left-0 h-0.5 w-full bg-accent2-primary"
-                    />
-                  )}
-                </>
-              )}
-            </NavLink>
-
-            <AboutMenu />
-
-            {LINKS.filter((l) => l.to !== "/").map((link) => (
-              <NavLink key={link.to} to={link.to} className={linkClass}>
-                {({ isActive }) => (
-                  <>
-                    {link.label}
-                    {isActive && (
-                      <motion.span
-                        layoutId="nav-underline"
-                        className="absolute -bottom-1.5 left-0 h-0.5 w-full bg-accent2-primary"
-                      />
-                    )}
-                  </>
-                )}
-              </NavLink>
-            ))}
-          </div>
-
-          <div className="flex items-center gap-3">
-            <a
-              href={MEMBERSHIP_FORM_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hidden rounded-full border-2 border-red-600 bg-accent2-primary px-5 py-1.5
-                font-heading text-xs tracking-[0.12em] text-white uppercase
-                shadow-[2px_2px_0_0_var(--color-red-600)] transition-transform
-                hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none sm:block"
-            >
-              Sign up
-            </a>
-            <button
-              onClick={() => setOpen((v) => !v)}
-              className="text-accent1-primary lg:hidden"
-              aria-label={open ? "Close menu" : "Open menu"}
-            >
-              {open ? <FiX size={22} /> : <FiMenu size={22} />}
-            </button>
-          </div>
-        </div>
-
-        <AnimatePresence>
-          {open && (
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: "auto", opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0.25 }}
-              className="overflow-hidden lg:hidden"
-            >
-              <div className="flex flex-col gap-1 px-5 pb-4">
-                <NavLink
-                  to="/"
-                  end
-                  onClick={() => setOpen(false)}
-                  className={`py-2 ${LINK_BASE} text-accent1-primary`}
-                >
-                  Home
-                </NavLink>
-                {ABOUT_MENU.concat(LINKS.filter((l) => l.to !== "/")).map(
-                  (link) => (
-                    <NavLink
-                      key={link.to}
-                      to={link.to}
-                      onClick={() => setOpen(false)}
-                      className={`py-2 ${LINK_BASE} text-accent1-primary`}
-                    >
-                      {link.label}
-                    </NavLink>
-                  ),
-                )}
-                <a
-                  href={MEMBERSHIP_FORM_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={() => setOpen(false)}
-                  className={`py-2 ${LINK_BASE} text-accent2-primary sm:hidden`}
-                >
-                  Sign up
-                </a>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </nav>
-
+      <NewNavbar />
       <Marquee />
     </header>
   );
diff --git a/client/src/components/NewNavbar.tsx b/client/src/components/NewNavbar.tsx
new file mode 100644
index 0000000..c574103
--- /dev/null
+++ b/client/src/components/NewNavbar.tsx
@@ -0,0 +1,183 @@
+import { MEMBERSHIP_FORM_URL } from "../lib/siteLinks";
+import { NavLink } from "react-router-dom";
+import { useState } from "react";
+import UMSALogo from "./UMSALogo.png";
+
+export default function NewNavbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openMenu, setOpenMenu] = useState<"about" | "events" | null>(null);
+  const linkClass =
+    "text-[16px] whitespace-nowrap font-normal uppercase [font-family:'Sekuya'] text-[#2727DC] transition-colors hover:text-blue-700";
+
+  const dropdownItem =
+    "px-4 py-2 text-[14px] uppercase [font-family:'Sekuya'] text-[#2727DC] hover:bg-[#e6e6fa]";
+
+  const loginClass =
+    "rounded-full bg-[#FF4B55] px-5 py-[3px] text-[14px] uppercase text-white [font-family:'Sekuya'] " +
+    "shadow-[0_3px_0_#B3202B] transition-transform hover:translate-y-[1px] hover:shadow-[0_2px_0_#B3202B]";
+
+  return (
+    <nav className="relative flex h-[55px] items-center bg-[#F9F9FB] border-2 border-[#8A4DF7] px-[24px]">
+      <NavLink to="/" className="shrink-0 ml-[16px] md:ml-[96px]">
+        <img
+          src={UMSALogo}
+          alt="UMSA Logo"
+          className="h-[40px] w-[40px] object-contain"
+        />
+      </NavLink>
+
+      <div className="hidden md:flex flex-1 items-center justify-evenly px-[40px]">
+        <NavLink to="/" end className={linkClass}>
+          Home
+        </NavLink>
+
+        <div
+          className="relative"
+          onMouseEnter={() => setOpenMenu("about")}
+          onMouseLeave={() => setOpenMenu(null)}
+        >
+          <button className={linkClass}>About</button>
+          {openMenu === "about" && (
+            <div className="absolute left-0 top-full z-50 pt-2">
+              <div className="flex min-w-[180px] flex-col rounded-md border border-[#2727DC] bg-[#F9F9FB] py-2 shadow-lg">
+                <NavLink to="/about" className={dropdownItem}>
+                  About Us
+                </NavLink>
+                <NavLink to="/team" className={dropdownItem}>
+                  Our Team
+                </NavLink>
+                <NavLink to="/contact" className={dropdownItem}>
+                  Contact
+                </NavLink>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div
+          className="relative"
+          onMouseEnter={() => setOpenMenu("events")}
+          onMouseLeave={() => setOpenMenu(null)}
+        >
+          <button className={linkClass}>Events</button>
+          {openMenu === "events" && (
+            <div className="absolute left-0 top-full z-50 pt-2">
+              <div className="flex min-w-[180px] flex-col rounded-md border border-[#2727DC] bg-[#F9F9FB] py-2 shadow-lg">
+                <NavLink to="/events" className={dropdownItem}>
+                  Events
+                </NavLink>
+                <NavLink to="/gallery" className={dropdownItem}>
+                  Photos
+                </NavLink>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <NavLink to="/sponsors" className={linkClass}>
+          Sponsors
+        </NavLink>
+      </div>
+
+      <div className="hidden md:block shrink-0">
+        <a
+          href={MEMBERSHIP_FORM_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={loginClass}
+        >
+          Sign up
+        </a>
+      </div>
+
+      <div className="ml-auto md:hidden">
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="block p-2 text-[#2727DC]"
+          aria-label="Toggle menu"
+        >
+          <svg
+            className="h-7 w-7"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="md:hidden absolute left-0 top-full z-50 w-full border-2 border-t-0 border-[#8A4DF7] bg-[#F9F9FB]">
+          <div className="flex flex-col gap-3 px-8 py-8 text-left">
+            <NavLink
+              to="/"
+              end
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              Home
+            </NavLink>
+            <NavLink
+              to="/about"
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              About
+            </NavLink>
+            <NavLink
+              to="/team"
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              Team
+            </NavLink>
+            <NavLink
+              to="/contact"
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              Contact
+            </NavLink>
+            <NavLink
+              to="/events"
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              Events
+            </NavLink>
+            <NavLink
+              to="/gallery"
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              Gallery
+            </NavLink>
+            <NavLink
+              to="/sponsors"
+              className={linkClass}
+              onClick={() => setIsOpen(false)}
+            >
+              Sponsors
+            </NavLink>
+            <a
+              href={MEMBERSHIP_FORM_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`${loginClass} self-start`}
+              onClick={() => setIsOpen(false)}
+            >
+              Sign up
+            </a>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/client/src/components/UMSALogo.png b/client/src/components/UMSALogo.png
new file mode 100644
index 0000000..65156e6
Binary files /dev/null and b/client/src/components/UMSALogo.png differ