diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index dd2d5901..eb60f0cb 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -5,7 +5,7 @@ const page = () => {
     <div>
       <div className="bg-gray-100">
         <div className="text-center justify-center mx-4 lg:mx-16 pt-4">
-          <h1>Upcoming Events!</h1>
+          {/* <h1>Upcoming Events!</h1> */}
           <div className="flex justify-center">
             <Iframe
               url="https://calendar.google.com/calendar/embed?src=7hptoesel85ltt2ndeg0dtptec%40group.calendar.google.com&ctz=America%2FLos_Angeles"
diff --git a/app/layout.tsx b/app/layout.tsx
index 075d5d2e..58806a2e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         {" "}
-        <Header title="UCSB TASA"></Header>
+        {/* <Header title="UCSB TASA"></Header> */}
         <NavBar />
         {children}
         <SpeedInsights />
diff --git a/components/galleryYearSection.tsx b/components/galleryYearSection.tsx
index 178cbccd..4c63054a 100644
--- a/components/galleryYearSection.tsx
+++ b/components/galleryYearSection.tsx
@@ -41,6 +41,7 @@ const GalleryYearSection = ({
                 <Image
                   src={image.imageUrl}
                   alt={image.title}
+                  fill
                   className="absolute inset-0 w-full h-full object-cover"
                   loading={p === "high" ? "eager" : "lazy"} // High priority images load eagerly
                 />
diff --git a/components/main.tsx b/components/main.tsx
index 9aad8e3b..9a2f4031 100644
--- a/components/main.tsx
+++ b/components/main.tsx
@@ -16,8 +16,8 @@ const Main = () => {
         />
         <div className="absolute inset-0 flex items-center justify-center text-center text-white">
           <div className="relative z-10">
-            <h1 className="text-4xl font-semibold mb-4 uppercase">
-              TAIWANESE AMERICAN STUDENT ASSOCIATION
+            <h1 className="text-4xl font-semibold mb-4 lowercase">
+              taiwanese american student association
             </h1>
           </div>
         </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 3c4aec5c..73be8004 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -2,25 +2,28 @@
 
 import Image from "next/image";
 import Link from "next/link";
-
-import { AiOutlineClose, AiOutlineMenu, AiOutlineMail } from "react-icons/ai";
-import { FaInstagram } from "react-icons/fa";
-import { SiLinktree } from "react-icons/si";
 import { useState, useEffect, useRef } from "react";
+import {
+  AiOutlineMenu,
+  AiOutlineClose,
+  AiOutlineShoppingCart,
+} from "react-icons/ai";
 import navLinks from "@/data/navbar";
+import moreNavLinks from "@/data/moreNavbar";
 
-const NavBar = () => {
-  const [nav, setNav] = useState(true);
+export default function NavBar() {
+  const [navOpen, setNavOpen] = useState(false);
   const navRef = useRef<HTMLDivElement>(null);
 
+  // Handle clicking outside the menu to close it
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (navRef.current && !navRef.current.contains(event.target as Node)) {
-        setNav(true);
+        setNavOpen(false);
       }
     }
 
-    if (!nav) {
+    if (navOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     } else {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -29,101 +32,130 @@ const NavBar = () => {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [nav]);
-
-  const handleNav = () => {
-    setNav(!nav);
-  };
+  }, [navOpen]);
 
   return (
-    <div className="w-full z-10 lg:pt-4 lg:pb-6 border-b border-black lg:px-8 dark:border-slate-300/10 h-[0px] p-0 m-0 lg:mx-0">
-      <div className="flex justify-center items-center w-full lg:h-full px-2 2xl:px-16 h-[0px] p-0 m-0">
-        <div className="h-6 overflow-y-hidden">
-          <ul className="hidden lg:flex">
-            {navLinks.map((link) => (
-              <li
-                key={link.href}
-                className="text-black ml-10 text-sm uppercase hover:border-pink hover:border-b-4"
-              >
-                <Link href={link.href}>{link.name}</Link>
+    <nav className="w-full h-14 bg-[#1F1F1F] text-white flex items-center justify-between px-6 md:px-8 sticky top-0 z-50">
+      {/* Left: Logo */}
+      <div className="flex items-center">
+        <Link href="/">
+          <Image
+            src="/logo.jpeg"
+            alt="TASA Logo"
+            width={40}
+            height={40}
+            className="cursor-pointer"
+          />
+        </Link>
+      </div>
+
+      {/* Center: Desktop Navigation Links */}
+      <ul className="hidden lg:flex space-x-6 text-lg ml-auto mr-12">
+        {navLinks.map((link) => (
+          <li key={link.href}>
+            <Link href={link.href} className="hover:opacity-80 px-4">
+              {link.name}
+            </Link>
+          </li>
+        ))}
+        <li className="relative group">
+          <span className="hover:opacity-80 px-4 rounded-lg cursor-pointer">
+            more
+          </span>
+          <ul className="absolute left-0 mt-2 w-32 bg-white text-black shadow-lg rounded-lg group-hover:rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300">
+            {moreNavLinks.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  className="block px-2 py-2 hover:bg-gray-200"
+                >
+                  {link.name}
+                </Link>
               </li>
             ))}
           </ul>
-          <div
-            onClick={handleNav}
-            className="lg:hidden absolute top-0 left-0 mt-4 ml-8 sm:mt-8"
-          >
-            <AiOutlineMenu size={25} />
-          </div>
-        </div>
+        </li>
+      </ul>
+
+      {/* Right: Cart Icon */}
+      <div className="hidden lg:flex items-center space-x-4">
+        <Link href="/store">
+          <AiOutlineShoppingCart
+            className="cursor-pointer hover:opacity-80"
+            size={20}
+          />
+        </Link>
+      </div>
+
+      {/* Mobile Menu Toggle */}
+      <div className="lg:hidden">
+        <button onClick={() => setNavOpen(true)}>
+          <AiOutlineMenu size={25} />
+        </button>
       </div>
+
+      {/* Mobile Menu Drawer */}
       <div
-        className={
-          !nav
-            ? "lg:hidden fixed left-0 top-0 w-full h-[110vh] bg-black/70 z-50"
-            : ""
-        }
+        className={`fixed inset-0 bg-black/70 z-50 transition-opacity duration-300 ${
+          navOpen ? "opacity-100 visible" : "opacity-0 invisible"
+        }`}
       >
         <div
           ref={navRef}
-          className={
-            !nav
-              ? "fixed overflow-y-scroll left-0 top-0 w-[75%] sm:w-[60%] lg:w-[45%] h-[110vh] bg-[#ecf0f3] p-10 ease-in duration-500 z-50"
-              : "fixed overflow-y-scroll left-[-100%] top-0 w-[75%] sm:w-[60%] lg:w-[45%] h-[110vh] bg-[#ecf0f3] p-10 ease-in duration-500 z-50"
-          }
+          className={`fixed top-0 left-0 w-[75%] sm:w-[60%] md:w-[45%] h-full bg-gray-900 p-6 transition-transform duration-300 ${
+            navOpen ? "translate-x-0" : "-translate-x-full"
+          }`}
         >
-          <div className="">
-            <div className="flex w-full justify-between items-center">
-              <Image
-                src="/logo.jpeg"
-                alt="/"
-                width={87}
-                height={87}
-                className="rounded-lg"
-              ></Image>
-              <div
-                onClick={handleNav}
-                className="rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer"
-              >
-                <AiOutlineClose></AiOutlineClose>
-              </div>
-            </div>
-            <div className="py-4 flex flex-col">
-              <ul className="uppercase">
-                {navLinks.map((link) => (
-                  <li key={link.href} className="py-4 text-md">
-                    <Link href={link.href}>{link.name}</Link>
-                  </li>
-                ))}
-              </ul>
-              <div className="p-3">
-                <p className="uppercase tracking-widest text-[#5651e5]">
-                  Socials!
-                </p>
-                <div className="flex items-center justify-between p-3 my-4 w-full sm:w-[80%]">
-                  <Link href="https://www.instagram.com/tasa.ucsb/" target="_">
-                    <div className="rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-                      <FaInstagram />
-                    </div>
-                  </Link>
-                  <Link href="https://linktr.ee/tasaucsb" target="_">
-                    <div className="rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-                      <SiLinktree />
-                    </div>
-                  </Link>
-                  <Link href="mailto:tasa.ucsb@gmail.com" target="_">
-                    <div className="rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-                      <AiOutlineMail />
-                    </div>
-                  </Link>
-                </div>
-              </div>
-            </div>
+          {/* Close Button */}
+          <div className="flex justify-between items-center">
+            <Image
+              src="/logo.jpeg"
+              alt="Logo"
+              width={50}
+              height={50}
+              className="rounded-lg"
+            />
+            <button onClick={() => setNavOpen(false)} className="p-2">
+              <AiOutlineClose size={25} />
+            </button>
           </div>
+
+          {/* Mobile Nav Links */}
+          <ul className="mt-6 space-y-4 text-lg text-white">
+            {navLinks.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  className="block p-2"
+                  onClick={() => setNavOpen(false)}
+                >
+                  {link.name}
+                </Link>
+              </li>
+            ))}
+            {moreNavLinks.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  className="block p-2"
+                  onClick={() => setNavOpen(false)}
+                >
+                  {link.name}
+                </Link>
+              </li>
+            ))}
+            <li key="/store">
+              <Link
+                href="/store"
+                className="block p-2"
+                onClick={() => setNavOpen(false)}
+              >
+                store
+              </Link>
+            </li>
+          </ul>
         </div>
       </div>
-    </div>
+    </nav>
   );
-};
-
-export default NavBar;
+}
diff --git a/data/moreNavbar.ts b/data/moreNavbar.ts
new file mode 100644
index 00000000..ca7ee5d9
--- /dev/null
+++ b/data/moreNavbar.ts
@@ -0,0 +1,14 @@
+export const moreNavLinks = [
+    // { href: "/", name: "Home" },
+    // { href: "/programs", name: "programs" },
+    // { href: "/staff", name: "staff" },
+    // { href: "/calendar", name: "calendar" },
+    // { href: "/gallery", name: "gallery" },
+    // { href: "/family-trees", name: "family trees" },
+    { href: "/contact", name: "contact" },
+    { href: "/faq", name: "faq" },
+    // { href: "/store", name: "Store" },
+  ];
+  
+  export default moreNavLinks;
+  
\ No newline at end of file
diff --git a/data/navbar.ts b/data/navbar.ts
index 49bef1b3..2b522272 100644
--- a/data/navbar.ts
+++ b/data/navbar.ts
@@ -1,13 +1,13 @@
 export const navLinks = [
-  { href: "/", name: "Home" },
-  { href: "/programs", name: "Programs" },
-  { href: "/staff", name: "Staff" },
-  { href: "/calendar", name: "Calendar" },
-  { href: "/gallery", name: "Gallery" },
-  { href: "/family-trees", name: "Family Trees" },
-  { href: "/contact", name: "Contact" },
-  { href: "/faq", name: "FAQ" },
-  { href: "/store", name: "Store" },
+  // { href: "/", name: "Home" },
+  { href: "/programs", name: "programs" },
+  { href: "/staff", name: "staff" },
+  { href: "/calendar", name: "calendar" },
+  { href: "/gallery", name: "gallery" },
+  { href: "/family-trees", name: "family trees" },
+  // { href: "/contact", name: "Contact" },
+  // { href: "/faq", name: "FAQ" },
+  // { href: "/store", name: "Store" },
 ];
 
 export default navLinks;
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03d..40c3d680 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/public/homepage/staff-24-25.jpg b/public/homepage/staff-24-25.jpg
index 33f45b4e..e8f3a227 100644
Binary files a/public/homepage/staff-24-25.jpg and b/public/homepage/staff-24-25.jpg differ
