diff --git a/package-lock.json b/package-lock.json
index 8a7ca3c..e9f20fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga4": "^2.1.0",
-        "react-icons": "^4.8.0",
+        "react-icons": "^5.2.1",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^6.9.0",
         "styled-components": "^5.3.9",
@@ -6949,9 +6949,9 @@
       "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
     },
     "node_modules/react-icons": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
-      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
       "peerDependencies": {
         "react": "*"
       }
diff --git a/package.json b/package.json
index 0d28b0a..9663c49 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
-    "react-icons": "^4.8.0",
+    "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.9.0",
     "styled-components": "^5.3.9",
diff --git a/public/img/temp-bg.jpg b/public/img/temp-bg.jpg
new file mode 100644
index 0000000..00c04e7
Binary files /dev/null and b/public/img/temp-bg.jpg differ
diff --git a/src/features/Navbar/NavbarPill.tsx b/src/features/Navbar/NavbarPill.tsx
new file mode 100644
index 0000000..292a85c
--- /dev/null
+++ b/src/features/Navbar/NavbarPill.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+import { NavbarPillProps } from "./NavbarPillProps";
+
+const NavbarPill = ({ title, desc, Icon, image, link } : NavbarPillProps) => {
+  return (
+      <Link to={link}>
+        <div className="relative w-full flex gap-4 items-center justify-center px-3 py-4 mt-2 rounded-md border border-white bg-center bg-cover"
+          style={{ backgroundImage: `url(${image})` }}>
+            <div className="absolute inset-0 bg-black opacity-50 z-0"></div>
+            <Icon className="relative w-8 h-8 z-10" />
+            <div className="relative flex flex-col gap-1 z-10">
+              <h3 className="font-semibold text-md">{title}</h3>
+              <p className="text-sm">{desc}</p>
+            </div>
+        </div>
+      </Link>
+  )
+}
+
+export default NavbarPill;
\ No newline at end of file
diff --git a/src/features/Navbar/NavbarPillProps.ts b/src/features/Navbar/NavbarPillProps.ts
new file mode 100644
index 0000000..ba039c3
--- /dev/null
+++ b/src/features/Navbar/NavbarPillProps.ts
@@ -0,0 +1,10 @@
+import { IconType } from "react-icons";
+
+export interface NavbarPillProps {
+  title: string;
+  desc: string;
+  Icon: IconType;
+  image: string;
+  link: string;
+}
+
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index 1497c15..e4da43e 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -1,6 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { Outlet, useLocation } from "react-router";
-import { FaDiscord, FaEnvelope, FaFacebook, FaInstagram, FaLinkedin, FaTiktok } from "react-icons/fa";
+import {
+  FaDiscord,
+  FaEnvelope,
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaTiktok,
+  FaCalendar,
+  FaLink,
+  FaFlag,
+  FaPersonBooth,
+  FaUser,
+} from "react-icons/fa";
 import {
   DISCORD_LINK,
   FACEBOOK_LINK,
@@ -14,6 +26,7 @@ import {
 
 // Components
 import Navbar from "./Navbar";
+import { NavbarPillProps } from "../features/Navbar/NavbarPillProps";
 import Footer from "./Footer";
 
 // Styles
@@ -40,11 +53,50 @@ const Layout = () => {
     setIsShowFooter(!isFooterHidden);
   }, [location]);
 
+  const homePills: NavbarPillProps[] = [];
+
+  const aboutPills: NavbarPillProps[] = [
+    {
+      title: "Events",
+      desc: "Our flagship Events!",
+      Icon: FaFlag,
+      image: "/img/temp-bg.jpg",
+      link: "/about/events",
+    },
+    {
+      title: "Meet the team",
+      desc: "See our amazing team",
+      Icon: FaUser,
+      image: "/img/temp-bg.jpg",
+      link: "/about/meettheteam",
+    },
+  ];
+
+  const calenderPills: NavbarPillProps[] = [
+    {
+      title: "Calender",
+      desc: "See what's going on!",
+      Icon: FaCalendar,
+      image: "/img/temp-bg.jpg",
+      link: "/upcoming/calendar",
+    },
+    {
+      title: "Links",
+      desc: "Signups, events and more",
+      Icon: FaLink,
+      image: "/img/temp-bg.jpg",
+      link: "/upcoming/links",
+    },
+  ];
+
+  const sponsorPills: NavbarPillProps[] = [];
+
   const nav = {
     clubname: "HackMelbourne",
     logo: "/img/HM_White_Transparent.png",
-    pages: ["Home", "Meet The Team", "Calendar", "Sponsors"],
-    links: ["/", "about/meettheteam", "upcoming/calendar", "sponsors"],
+    pages: ["Home", "About", "Upcoming", "Sponsors"],
+    links: ["/", "/about/meettheteam", "/upcoming/calendar", "/sponsors"],
+    pills: [homePills, aboutPills, calenderPills, sponsorPills],
   };
 
   const footer = {
@@ -89,7 +141,9 @@ const Layout = () => {
   return (
     <>
       <div className="w-screen max-w-full overflow-x-clip">
-        {isShowNavbar ? <Navbar clubname={nav.clubname} logo={nav.logo} pages={nav.pages} links={nav.links} /> : null}
+        {isShowNavbar ? (
+          <Navbar clubname={nav.clubname} logo={nav.logo} pages={nav.pages} links={nav.links} pills={nav.pills} />
+        ) : null}
         <Outlet />
         {isShowFooter ? <Footer links={footer.links} icons={footer.icons} /> : null}
 
diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
index c421e4d..7213695 100644
--- a/src/layouts/Navbar.tsx
+++ b/src/layouts/Navbar.tsx
@@ -1,37 +1,136 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
+import { ArrowDropUp, ArrowDropDown } from '@mui/icons-material';
+import { NavbarPillProps } from '../features/Navbar/NavbarPillProps';
 
 // Styles
 import '../styles/gradients.css';
 
 // Images
 // Change image to remove the bottom text
-import close_button from '/img/close-button.png';
 import { Link } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
+import { List } from '@mui/material';
+import NavbarPill from '../features/Navbar/NavbarPill';
 
 interface Nav {
   clubname: string;
   logo: string;
   pages: string[];
   links: string[];
+  pills: NavbarPillProps[][];
 }
 
-const Navbar = ({ clubname, logo, pages, links }: Nav) => {
+const Navbar = ({ clubname, logo, pages, links, pills }: Nav) => {
+  const [isDesktopMenuOpen, setIsDesktopMenuOpen] = useState(true);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = useState(true);
+  const [activePage, setActivePage] = useState<number | null>(null); 
+  const [activeSubMenu, setActiveSubMenu] = useState<boolean[]>(new Array(pages.length).fill(false));
+  const mobileNavRef = useRef<HTMLDivElement>(null);
+
+  const menuVars = {
+    initial: {
+      scaleY: 0.
+    },
+    animate: {
+      scaleY: 1,
+      transition: {
+        duration: 0.3
+      }
+    },
+    exit: {
+      scaleY: 0,
+      transition: {
+        duration: 0.1,
+      }
+    }
+  }
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
+    setIsDesktopMenuOpen(isMenuOpen);
   };
 
   const handleLinkClick = () => {
     setIsMenuOpen(false);
+    setIsDesktopMenuOpen(true);
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
   };
 
+  const revealMobileNav = (index: number | null) => {
+    setActivePage(index);
+    setIsSubMenuOpen(false);
+  };
+
+  const revealMobileNavItems = () => {
+    if (activePage == null) return
+    return (
+      <Slide in={activePage !== null}> 
+        <div className="flex flex-col justify-start items-start min-h-screen w-3/4 m-auto gap-3 mt-16">
+          <h3 className="text-xl" onClick={()=>{
+            revealMobileNav(null);
+            setIsSubMenuOpen(true);
+          }}>Back</h3>
+          <h3 className="text-3xl font-bold bg-white bg-opacity-10 py-2 px-4 w-full rounded-md">{pages[activePage]}</h3>
+          <div className="flex flex-col h-1/3 w-full">
+            {pills[activePage].map((pill) => (
+                <NavbarPill {...pill} />
+              ))}
+          </div>
+        </div>
+      </Slide>
+    );
+  };
+
+  const revealSubMenu = (index: number) => {
+    setActiveSubMenu((prev) => {
+      const newActiveSubMenu = [...prev];
+      newActiveSubMenu[index] = !newActiveSubMenu[index];
+      return newActiveSubMenu;
+    });
+  };
+
+  const navItems = ( pills : NavbarPillProps[], title : string) => {
+    if (activePage == null) return
+    return (
+      <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-16 w-fit h-fit">
+        {/* Really bootleg solution, creates an invisible box to ensure hovered nav item doesnt 
+        dissapear since the items are disconnected from the bar */}
+        <div className="absolute -top-6 transform -translate-x-1/2 h-max w-max py-4">
+          <div className="w-80 border px-8 pb-6 pt-4 rounded-md bg-black/80 backdrop-blur-md flex-col gap-1">
+            <div className="flex items-center">
+              <h2 className="font-semibold">{title}</h2>
+              <div className="ml-3 flex-grow border-primary border-t-4 rounded-md" />
+            </div>
+            {pills.map((pill) => (
+              <NavbarPill {...pill} />
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const handleClickOutsideNav = (e: MouseEvent) => {
+    if (mobileNavRef.current && !mobileNavRef.current.contains(e.target as Node)) {
+      toggleMenu();
+    }
+  };
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      document.addEventListener('mousedown', handleClickOutsideNav);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutsideNav);
+    }
+  }, [isMenuOpen]);
+
   return (
-    <div className="flex justify-center">
+    <div className="flex justify-center" onMouseLeave={()=>setActivePage(null)}>
+      {isDesktopMenuOpen && (
       <nav className="w-screen max-w-[800px] fixed pt-8 z-40 px-8">
         <div className="max-w-[800px] grow rounded-md bg-black/20 backdrop-blur-md border flex justify-between items-center px-5 py-3">
           <Link to={links[0]} className="flex items-center justify-start gap-2 font-bold" onClick={handleLinkClick}>
@@ -45,42 +144,84 @@ const Navbar = ({ clubname, logo, pages, links }: Nav) => {
           {/* DESKTOP */}
           <div className="hidden md:flex justify-end gap-6 items-center">
             {pages.map((page, index) => (
-              <Link
-                key={index}
-                to={links[index]}
-                onClick={handleLinkClick}
-                className=" hover:underline hover:text-primary">
-                {page}
-              </Link>
-            ))}
+                <div
+                  onMouseEnter={()=>setActivePage(index)} 
+                  className="relative"
+                >
+                  <Link
+                    key={index}
+                    to={links[index]}
+                    onClick={()=>setActivePage(index)}
+                    className="">
+                    {page}
+                    <span className={`${activePage == index ? "visible" : "hidden"} absolute left-0 -bottom-2 w-full h-1 bg-primary scale-x-100`}></span>
+                  </Link>
+                  {pills[index].length > 0 && activePage === index && navItems(pills[index], page)}
+                </div>
+              ))}
           </div>
         </div>
       </nav>
+      )}
 
       {/* MOBILE */}
       <Slide in={isMenuOpen}>
-        <nav id="popup" className="flex fixed w-screen h-screen p-2.5 z-50 bg-neutral-950">
-          <div className="flex flex-col w-full mx-2.5 rounded-xl border-2 border-white">
-            <div className="flex w-[100%] justify-between items-center">
-              <Link to={links[0]} onClick={handleLinkClick}>
-                <img src={logo} className="h-14 w-14 ml-5 mt-5" />
-              </Link>
-              <button className="mr-5 mt-5" onClick={toggleMenu}>
-                <CloseIcon fontSize="large" />
-              </button>
-            </div>
-
-            <div className="flex flex-col h-5/6 justify-center items-center gap-5">
-              {pages.map((page, index) => (
-                <Link key={index} to={links[index]} className="text-[32px] font-bold" onClick={handleLinkClick}>
-                  {page}
+        <div className="w-full pt-8 p-3 fixed z-40">
+          <nav ref={mobileNavRef} className="w-full flex flex-col items p-3 z-50 rounded-xl border-2 border-white backdrop-blur">
+            <List style={{maxHeight: '66vh', overflow: 'auto'}}>
+              <div className="flex w-full justify-between items-center pt-1 px-2">
+                <Link to={links[0]} onClick={handleLinkClick} className="font-semibold">
+                  {clubname}
                 </Link>
-              ))}
-            </div>
-          </div>
-        </nav>
+                <button onClick={toggleMenu}>
+                  <CloseIcon fontSize="medium" />
+                </button>
+              </div>
+                {/* {revealMobileNavItems()} */}
+                <div className="w-full h-full justify-center items-center pt-3">
+                  <div className="flex flex-col justify-center px-8 py-6 gap-7">
+                    {pages.map((page, index) => (
+                      <>
+                        {pills[index].length <= 0 ? (
+                          <div key={index} className="text-lg font-bold cursor-pointer">
+                            <Link to={links[index]} onClick={handleLinkClick}>
+                              {page}
+                            </Link>
+                          </div>
+                          ) : (
+                            <div key={index} className="text-lg font-bold cursor-pointer" onClick={() => revealSubMenu(index)}>
+                              {page}
+                              {activeSubMenu[index] ? <ArrowDropUp /> : <ArrowDropDown />}
+                              <AnimatePresence>
+                                {activeSubMenu[index] && (
+                                  <motion.div
+                                    key={index}
+                                    variants={menuVars}
+                                    initial="initial"
+                                    animate="animate"
+                                    exit="exit"
+                                    className="origin-top"
+                                  >
+                                    {pills[index].map((pill: NavbarPillProps) => (
+                                      <Link to={pill.link} onClick={handleLinkClick}>
+                                        <NavbarPill {...pill} />
+                                      </Link>
+                                    ))}
+                                  </motion.div>
+                                )}
+                              </AnimatePresence>
+                            </div>
+                          )
+                        }
+                      </>
+                    ))}
+                  </div> 
+              </div>
+            </List>  
+          </nav>
+        </div>
       </Slide>
     </div>
   );
 };
-export default Navbar;
+export default Navbar;
\ No newline at end of file