diff --git a/components/2024/layout/navbar.jsx b/components/2024/layout/navbar.jsx
index a28e1f2..feceb69 100644
--- a/components/2024/layout/navbar.jsx
+++ b/components/2024/layout/navbar.jsx
@@ -1,67 +1,75 @@
 "use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import { QUICKET_LINK } from "@/2023/utils/constants";
-import { useState } from "react";
+import { useState, Fragment } from "react";
+import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react";
+import { Cross1Icon, HamburgerMenuIcon, ChevronDownIcon, HeartFilledIcon } from "@radix-ui/react-icons"
 import Logo from "@/components/ui/logo";
-import Banner from "@/components/banner";
-
-export default function Navbar2024() {
-  const NavbarLinks = [
+import { BanknotesIcon, DocumentTextIcon, RocketLaunchIcon, ShieldExclamationIcon, TruckIcon, UserGroupIcon} from '@heroicons/react/24/outline'
+const NavbarLinks = [
     // {
     //   path: "/2024/schedule",
     //   label: "Schedule",
     // },
     {
-      path: "/2024/sponsors",
-      label: "Sponsors",
+        path: "/2024/sponsors",
+        label: "Sponsors",
     },
     {
-      path: "#",
-      label: "Speakers",
-      subLinks: [
-        {
-          path: "/2024/speakers",
-          label: "PyCon 2024 Speakers",
-        },
-      ],
+        path: "#",
+        label: "Speakers",
+        subLinks: [
+            {
+                path: "/2024/speakers",
+                label: "PyCon 2024 Speakers",
+                description: "Get to know the speakers at PyCon 2024.",
+                icon:  <UserGroupIcon className="h-6 w-6 text-gray-600 group-hover:text-pyconug-lightBlue" aria-hidden="true" />
+            },
+        ],
     },
     {
-      path: "#",
-      label: "Diversity",
-      subLinks: [
-        {
-          path: "/2024/financial-aid",
-          label: "Financial Aid",
-        },
-        {
-          path: "/2024/travel-aid",
-          label: "Travel Aid",
-        },
-      ],
+        path: "#",
+        label: "Diversity",
+        subLinks: [
+            {
+                path: "/2024/financial-aid",
+                label: "Financial Aid",
+                description: "Apply for financial assistance to attend PyCon.",
+                icon: <BanknotesIcon className="h-6 w-6 text-gray-600 group-hover:text-pyconug-lightBlue" aria-hidden="true" />
+            },
+            {
+                path: "/2024/travel-aid",
+                label: "Travel Aid",
+                description: "Get support for your travel expenses.",
+                icon: <TruckIcon className="h-6 w-6 text-gray-600 group-hover:text-pyconug-lightBlue" aria-hidden="true" />
+            },
+        ],
     },
     {
-      path: "#",
-      label: "Attendee Guide",
-      subLinks: [
-        {
-          path: "/2024/travel-guide",
-          label: "Travel Guide",
-        },
-        {
-          path: "/2024/code-of-conduct",
-          label: "Code of Conduct",
-        },
-        {
-          path: "/2024/health-and-safety",
-          label: "Health and Safety",
-        },
-        // {
-        //   path: "/contact",
-        //   label: "Contact Us",
-        // },
-      ],
+        path: "#",
+        label: "Attendee Guide",
+        subLinks: [
+            {
+                path: "/2024/travel-guide",
+                label: "Travel Guide",
+                description: "Find travel tips and guides for PyCon.",
+                icon: <RocketLaunchIcon className="h-6 w-6 text-gray-600 group-hover:text-pyconug-lightBlue" aria-hidden="true" />
+            },
+            {
+                path: "/2024/code-of-conduct",
+                label: "Code of Conduct",
+                description: "Understand the guidelines for participating.",
+                icon: <DocumentTextIcon className="h-6 w-6 text-gray-600 group-hover:text-pyconug-lightBlue" aria-hidden="true" />
+            },
+            {
+                path: "/2024/health-and-safety",
+                label: "Health and Safety",
+                description: "Stay informed about health and safety measures.",
+                icon: <ShieldExclamationIcon className="h-6 w-6 text-gray-600 group-hover:text-pyconug-lightBlue" aria-hidden="true" />
+            },
+            // {
+            //   path: "/contact",
+            //   label: "Contact Us",
+            // },
+        ],
     },
     // {
     //   path: "#",
@@ -73,173 +81,168 @@ export default function Navbar2024() {
     //     },
     //   ],
     // },
-  ];
-
-  const TICKET_BTN_LABEL = "Get Early Bird Ticket";
-  const SHOP_ACTION_LABEL = "Shop";
-  const SPONSOR_ACTION_LABEL = "Sponsor";
-  const SPONSOR_ACTION_LINK = "/2024/sponsors";
-  const SHOP_ACTION_LINK = "/2024/shop";
-
-  const [openDropdownIndex, setOpenDropdownIndex] = useState(null);
-  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
+];
 
-  const toggleDropdown = (index) => {
-    if (openDropdownIndex === index) {
-      setOpenDropdownIndex(null);
-    } else {
-      setOpenDropdownIndex(index);
-    }
-  };
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+  }
 
-  const toggleSideMenu = () => {
-    setIsSideMenuOpen(!isSideMenuOpen);
-  };
+export default function Example() {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
-  return (
-    <nav className="sticky top-0 z-10 bg-white backdrop-filter backdrop-blur-lg bg-opacity-30 border-b border-gray-200">
-      <Banner />
-      <div className="mx-[6%] my-2">
-        <div className="flex items-center justify-between h-16">
-          <Logo />
-
-          {/* Side Menu - For smaller devices */}
-          <div className="md:hidden flex items-center">
-            <button
-              className="mr-2 text-gray-700 focus:outline-none"
-              onClick={toggleSideMenu}
-            >
-              <svg
-                className="w-6 h-6"
-                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 12h16m-7 6h7"
-                />
-              </svg>
-            </button>
-          </div>
-
-          {/* For larger devices */}
-          <div className="md:flex space-x-4 hidden items-center">
-            {NavbarLinks.map(({ path, label, subLinks }, index) => (
-              <div key={index} className="relative group">
-                {subLinks ? (
-                  <div
-                    className="flex items-center focus:outline-none"
-                    onMouseEnter={() => toggleDropdown(index)}
-                    onMouseLeave={() => toggleDropdown(null)}
-                  >
-                    <a href={path}>{label}</a>
-                    <svg
-                      className={`w-4 h-4 ml-1 text-gray-700 transform ${
-                        openDropdownIndex === index ? "rotate-180" : ""
-                      }`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                    {openDropdownIndex === index && (
-                      <div className="absolute mt-1 top-5 space-y-1 bg-white border border-gray-300 rounded-md">
-                        {subLinks.map(({ path, label }, subIndex) => (
-                          <a
-                            key={subIndex}
-                            href={path}
-                            className="relative block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                          >
-                            {label}
-                          </a>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <a href={path}>{label}</a>
-                )}
-              </div>
-            ))}
-            <div className="flex flex-row space-x-5">
-              <Link
-                className="border-black hidden md:block  px-6 py-1 border rounded-lg"
-                href={SPONSOR_ACTION_LINK}
-              >
-                {SPONSOR_ACTION_LABEL}
-              </Link>
-              <Link
-                className="bg-black text-white px-6 py-1 border rounded-lg"
-                href={QUICKET_LINK}
-              >
-                {TICKET_BTN_LABEL}
-              </Link>
-            </div>
-          </div>
+    return (
+        <header className="sticky top-0 z-10 bg-white backdrop-filter backdrop-blur-lg bg-opacity-30 border-b border-gray-200">
+            <nav className="mx-auto flex max-w-7xl items-center justify-between gap-x-6 p-6 lg:px-8" aria-label="Global">
+                <div className="flex lg:flex-1">
+                    <Logo />
+                </div>
+                <div className="hidden lg:flex lg:gap-x-12">
+                    {NavbarLinks.map((link, index) => (
+                        link?.subLinks?.length ? (
+                            <Popover.Group className="hidden lg:flex lg:gap-x-12" key={index}>
+                                <Popover className="relative">
+                                    {
+                                        ({open})=>(
+                                    <>
+                                    <Popover.Button className={classNames(open ? "text-pyconug-lightBlue" : "", "flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900  hover:text-pyconug-lightBlue outline-none")}>
+                                        {link.label}
+                                        <ChevronDownIcon className={classNames(open ? 'rotate-180' : '', "h-5 w-5 flex-none text-gray-400")} aria-hidden="true" />
+                                    </Popover.Button>
 
-          {/* Side Menu Links - For smaller devices */}
-          <div
-            className={`${
-              isSideMenuOpen ? "block" : "hidden"
-            } md:hidden absolute bg-pyconug-lightBlue text-white top-20 right-0`}
-          >
-            {NavbarLinks.map(({ path, label, subLinks }, index) => {
-              return (
-                <div key={index}>
-                  {subLinks ? (
-                    <div className="border-b border-gray-300">
-                      <button className="w-full text-left px-4 py-2 text-white focus:outline-none">
-                        {label}
-                      </button>
-                      <div className="space-y-1 bg-white">
-                        {subLinks.map(({ path, label }, subIndex) => (
-                          <a
-                            key={subIndex}
-                            href={path}
-                            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                          >
-                            {label}
-                          </a>
-                        ))}
-                      </div>
-                    </div>
-                  ) : (
+                                    <Transition
+                                        as={Fragment}
+                                        enter="transition ease-out duration-200"
+                                        enterFrom="opacity-0 translate-y-1"
+                                        enterTo="opacity-100 translate-y-0"
+                                        leave="transition ease-in duration-150"
+                                        leaveFrom="opacity-100 translate-y-0"
+                                        leaveTo="opacity-0 translate-y-1"
+                                    >
+                                        <Popover.Panel className="absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
+                                            <div className="p-4">
+                                                {link.subLinks.map((subLink, i) => (
+                                                    <div
+                                                        key={i}
+                                                        className="group relative flex gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
+                                                    >
+                                                        <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                                                            {subLink?.icon}
+                                                        </div>
+                                                        <div className="flex-auto">
+                                                            <a href={subLink.path} className="block font-semibold text-gray-900 hover:text-pyconug-lightBlue">
+                                                                {subLink.label}
+                                                                <span className="absolute inset-0" />
+                                                            </a>
+                                                            <p className="mt-1 text-gray-600">{subLink?.description}</p>                                                     </div>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </Popover.Panel>
+                                    </Transition>
+                                    </>
+                                        )
+                                    }
+                                    
+                                </Popover>
+                            </Popover.Group>
+                        ) :
+                            (
+                                <a key={link.label} href={link.path} className="text-sm font-semibold leading-6 text-gray-900  hover:text-pyconug-lightBlue">
+                                    {link.label}
+                        </a>
+                            )
+                    ))}
+                </div>
+                <div className="flex flex-1 items-center justify-end gap-x-2">
+                    <a href="https://www.quicket.co.ug/events/254188-pycon-uganda-2024?preview=t#/tickets"
+                        className="hidden md:block rounded-lg border border-black px-3 py-2 font-semibold text-black text-center h-10 truncate ...">
+                        Get Early Bird Ticket
+                    </a>
                     <a
-                      href={path}
-                      className="block px-4 py-2 text-white hover:bg-pyconug-darkBlue"
+                        href="/2024/sponsors"
+                        className="rounded-lg bg-black px-3 py-2 font-semibold text-white inline-flex items-center"
                     >
-                      {label}
+                        Sponsor
+                        <HeartFilledIcon className="ml-1 animate-bounce" color="red" />
                     </a>
-                  )}
                 </div>
-              );
-            })}
-            <Link
-              href={SPONSOR_ACTION_LINK}
-              className="block px-4 py-2 text-white hover:bg-pyconug-darkBlue"
-            >
-              {SPONSOR_ACTION_LABEL}
-            </Link>
-            <Link
-              href={QUICKET_LINK}
-              className="block px-4 py-2 text-white hover:bg-pyconug-darkBlue"
-            >
-              {TICKET_BTN_LABEL}
-            </Link>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
+                <div className="flex lg:hidden">
+                    <button
+                        type="button"
+                        className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                        onClick={() => setMobileMenuOpen(true)}
+                    >
+                        <span className="sr-only">Open main menu</span>
+                        <HamburgerMenuIcon className="h-6 w-6" aria-hidden="true" />
+                    </button>
+                </div>
+            </nav>
+            <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+                <div className="fixed inset-0 z-10" />
+                <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+                    <div className="flex items-center justify-between">
+                        <Logo />
+                        <button
+                            type="button"
+                            className="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            onClick={() => setMobileMenuOpen(false)}
+                        >
+                            <span className="sr-only">Close menu</span>
+                            <Cross1Icon className="h-6 w-6" aria-hidden="true" />
+                        </button>
+                    </div>
+                    <div className="mt-6 flow-root">
+                        <div className="-my-6 divide-y divide-gray-500/10">
+                            <div className="space-y-2 py-6">
+                                {NavbarLinks.map((link, i) => (
+                                    link?.subLinks?.length ? (
+                                        <Disclosure as="div" className="-mx-3" key={i}>
+                                            {({ open }) => (
+                                                <>
+                                                    <Disclosure.Button className="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 hover:bg-gray-50">
+                                                        {link.label}
+                                                        <ChevronDownIcon
+                                                            className={`${open ? 'rotate-180' : ''} h-5 w-5 flex-none`}
+                                                            aria-hidden="true"
+                                                        />
+                                                    </Disclosure.Button>
+                                                    <Disclosure.Panel className="mt-2 space-y-2">
+                                                        {link.subLinks.map((subLink, j) => (
+                                                            <Disclosure.Button
+                                                                key={j}
+                                                                as="a"
+                                                                href={subLink.path}
+                                                                className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                                                            >
+                                                                <div
+                                                                    className="group -mx-3 flex items-center gap-x-6 rounded-lg p-3 text-base font-semibold leading-7 text-pyconug-lightBlue hover:bg-gray-50"
+                                                                >
+                                                                    <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                                                                        {subLink?.icon}
+                                                                    </div>
+                                                                {subLink.label}
+                                                                </div>
+                                                            </Disclosure.Button>
+                                                        ))}
+                                                    </Disclosure.Panel>
+                                                </>
+                                            )}
+                                        </Disclosure>
+                                    ) : (
+                                        <a
+                                            href={link.path}
+                                            key={i}
+                                            className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                                        >
+                                            {link.label}
+                                        </a>
+                                    )
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </Dialog.Panel>
+            </Dialog>
+        </header>
+    );
 }
diff --git a/package-lock.json b/package-lock.json
index b1f227c..6aabdc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "2024.0.0",
       "dependencies": {
         "@headlessui/react": "^1.7.15",
+        "@heroicons/react": "^2.1.3",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-slot": "^1.0.2",
         "eslint": "8.35.0",
@@ -85,6 +86,14 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",
+      "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -5940,6 +5949,12 @@
         "client-only": "^0.0.1"
       }
     },
+    "@heroicons/react": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",
+      "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index c15b0f2..574cf58 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
+    "@heroicons/react": "^2.1.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "eslint": "8.35.0",