diff --git a/package.json b/package.json
index 548b55ed..5e3d64ea 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "redis": "^4.6.13",
     "square": "^34.0.1",
     "swr": "^2.2.5",
+    "usehooks-ts": "^2.14.0",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa25db9c..560a906d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ dependencies:
   swr:
     specifier: ^2.2.5
     version: 2.2.5(react@18.2.0)
+  usehooks-ts:
+    specifier: ^2.14.0
+    version: 2.14.0(react@18.2.0)
   zod:
     specifier: ^3.22.4
     version: 3.22.4
@@ -4255,6 +4258,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: false
+
   /lodash.flatmap@4.5.0:
     resolution: {integrity: sha512-/OcpcAGWlrZyoHGeHh3cAoa6nGdX6QYtmzNP84Jqol6UEQQ2gIaU3H+0eICcjcKGl0/XF8LWOujNn9lffsnaOg==}
     dev: false
@@ -6134,6 +6141,16 @@ packages:
       react: 18.2.0
     dev: false
 
+  /usehooks-ts@2.14.0(react@18.2.0):
+    resolution: {integrity: sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==}
+    engines: {node: '>=16.15.0'}
+    peerDependencies:
+      react: ^16.8.0  || ^17 || ^18
+    dependencies:
+      lodash.debounce: 4.0.8
+      react: 18.2.0
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index ea3e8824..00000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-'use client';
-
-import FancyRectangle from '@/components/FancyRectangle';
-import { BREAKPOINTS } from '@/constants/breakpoints';
-import { useMount } from '@/hooks/use-mount';
-import { fetcher } from '@/lib/fetcher';
-import { useUser } from '@clerk/nextjs';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import { IoMdClose, IoMdMenu } from 'react-icons/io';
-import useSWR from 'swr';
-import Button from './Button';
-import UserButton from './UserButton';
-
-export default function Header() {
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const toggleMenu = () => {
-        setIsMenuOpen(!isMenuOpen);
-    };
-    const closeMenu = () => {
-        setIsMenuOpen(false);
-    };
-
-    const clerkUser = useUser();
-    const checkUserExists = useSWR<{ exists: boolean }>(['user-existence'], fetcher.get.query, {
-        isPaused: () => clerkUser.isLoaded && !clerkUser.isSignedIn,
-    });
-
-    const checkUserPaid = useSWR<{ paid: boolean }>(['payment'], fetcher.get.query, {
-        isPaused: () => clerkUser.isLoaded && !clerkUser.isSignedIn,
-    });
-
-    const [isScrolled, setIsScrolled] = useState(false);
-    useMount(() => {
-        window.addEventListener('scroll', handleScroll);
-        window.addEventListener('resize', handleResize);
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            window.removeEventListener('resize', handleResize);
-        };
-    });
-    const handleResize = () => {
-        if (window.innerWidth >= BREAKPOINTS.md) {
-            setIsMenuOpen(false);
-        }
-    };
-    const handleScroll = () => {
-        const scrollPosition = window.scrollY;
-        setIsScrolled(scrollPosition > 0);
-    };
-
-    const isLoading = !clerkUser.isLoaded || checkUserExists.isLoading;
-    return (
-        <header className="z-[9999] w-full">
-            <div
-                className={`fixed z-20 h-40 w-full transition-all duration-500 ${
-                    isScrolled ? 'bg-gradient-to-b from-black from-10% to-transparent to-100%' : ''
-                } `}
-            ></div>
-
-            <div className="flex w-full justify-center">
-                <div
-                    className={`fixed z-[9999] md:left-auto ${
-                        isMenuOpen
-                            ? 'h-full w-full  flex-col bg-white'
-                            : 'mt-8 w-responsive flex-row'
-                    } flex items-center text-sm text-grey transition-all duration-500 md:mr-4 md:justify-between md:border-4 md:border-black md:bg-white md:px-4 md:py-2 lg:px-8 lg:py-4 lg:text-base`}
-                >
-                    <div className={`flex w-full flex-col ${isMenuOpen ? 'px-8 py-8' : ''}`}>
-                        <div className="flex flex-row items-center">
-                            <Link href="/" className="flex flex-row items-center">
-                                <Image
-                                    src="/images/logos/logo.svg"
-                                    alt="Computer Science Club Logo"
-                                    className="h-full w-[3rem] md:w-[2rem] lg:w-[2.5rem]"
-                                    width={100}
-                                    height={100}
-                                />
-                                <h1
-                                    className={`ml-2 text-3xl md:text-xl lg:text-2xl ${
-                                        isMenuOpen ? 'text-grey' : 'text-white'
-                                    } font-bold md:text-grey`}
-                                >
-                                    CS CLUB
-                                </h1>
-                            </Link>
-
-                            <div
-                                className={`absolute md:hidden ${
-                                    isMenuOpen ? 'right-8' : 'right-0'
-                                }`}
-                            >
-                                <FancyRectangle colour="black" offset="4" filled={true}>
-                                    <button
-                                        onClick={toggleMenu}
-                                        className={`${
-                                            isMenuOpen ? 'bg-orange' : 'bg-white'
-                                        } flex h-16 w-16 items-center justify-center border-4 border-black transition-all duration-300`}
-                                    >
-                                        <IoMdMenu
-                                            className={`text-4xl text-black ${
-                                                isMenuOpen ? 'hidden' : ''
-                                            }`}
-                                            aria-label="Menu"
-                                        />
-                                        <IoMdClose
-                                            className={`text-4xl text-black ${
-                                                isMenuOpen ? '' : 'hidden'
-                                            }`}
-                                            aria-label="Close"
-                                        />
-                                    </button>
-                                </FancyRectangle>
-                            </div>
-                        </div>
-                        <div
-                            className={`mt-8 h-0.5 w-full bg-grey md:hidden ${
-                                isMenuOpen ? '' : 'hidden'
-                            }`}
-                        ></div>
-                    </div>
-
-                    <nav
-                        className={`flex flex-col items-center whitespace-nowrap ${
-                            isMenuOpen ? 'mt-12 space-y-8' : 'hidden'
-                        } mb-4 text-4xl md:mb-0 md:flex md:flex-row md:space-x-4 md:space-y-0 md:text-base lg:space-x-8`}
-                    >
-                        <Link href="/about" className="hover:underline" onClick={closeMenu}>
-                            About
-                        </Link>
-                        <Link href="/events" className="hover:underline" onClick={closeMenu}>
-                            Events
-                        </Link>
-                        <Link href="/sponsors" className="hover:underline" onClick={closeMenu}>
-                            Sponsors
-                        </Link>
-                        <Link href="/contact" className="hover:underline" onClick={closeMenu}>
-                            Contact
-                        </Link>
-                        <div
-                            className={`flex flex-col items-center md:flex-row ${
-                                isMenuOpen ? '' : 'hidden'
-                            } space-y-8 md:flex md:space-x-4 md:space-y-0 lg:space-x-8`}
-                        >
-                            {!isLoading &&
-                                (clerkUser.isSignedIn ? (
-                                    <>
-                                        {!checkUserExists.data?.exists && (
-                                            <Button
-                                                colour="purple"
-                                                href="/join"
-                                                onClick={closeMenu}
-                                            >
-                                                Continue Signing Up
-                                            </Button>
-                                        )}
-                                        {checkUserExists.data?.exists &&
-                                            !checkUserPaid.data?.paid && (
-                                                <Button
-                                                    colour="orange"
-                                                    href="/settings"
-                                                    onClick={closeMenu}
-                                                >
-                                                    Continue to payment
-                                                </Button>
-                                            )}
-                                        <UserButton
-                                            userExists={Boolean(checkUserExists.data?.exists)}
-                                            userPaid={Boolean(checkUserPaid.data?.paid)}
-                                        />
-                                    </>
-                                ) : (
-                                    <>
-                                        <Button colour="orange" href="/signin" onClick={closeMenu}>
-                                            Sign In
-                                        </Button>
-                                        <Button colour="purple" href="/join" onClick={closeMenu}>
-                                            Join Us
-                                        </Button>
-                                    </>
-                                ))}
-                        </div>
-                    </nav>
-                </div>
-
-                <div
-                    className={`fixed z-[9998] mt-9 h-[3.75em] w-responsive transition-all duration-500 md:mt-11 md:h-14 md:border-4 md:border-black md:bg-white md:px-4 md:py-2 lg:mt-10 lg:h-[5.25em] lg:px-8 lg:py-4`}
-                ></div>
-            </div>
-        </header>
-    );
-}
diff --git a/src/components/Header/HeaderClient.tsx b/src/components/Header/HeaderClient.tsx
new file mode 100644
index 00000000..552cdb6d
--- /dev/null
+++ b/src/components/Header/HeaderClient.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { useClerk } from '@clerk/clerk-react';
+import { Transition } from '@headlessui/react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useRef, useState } from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import type { HeaderData } from '.';
+import Button from '../Button';
+import FancyRectangle from '../FancyRectangle';
+import { Links, MenuLinks } from './components/Links';
+import LogoTitle from './components/LogoTitle';
+import ScrollShader from './components/ScrollShader';
+import SignInJoin from './components/SignInJoin';
+
+function UserButton({ data }: { data: HeaderData }) {
+    const [isMenuOpen, setMenuOpen] = useState(false);
+    const ref = useRef(null);
+    const closeMenu = () => {
+        setMenuOpen(false);
+    };
+    useOnClickOutside(ref, closeMenu);
+    const handleButtonClick = () => {
+        setMenuOpen(!isMenuOpen);
+    };
+
+    const { signOut } = useClerk();
+    const router = useRouter();
+    const handleSignOut = async () => {
+        await signOut();
+        router.push('/');
+        router.refresh();
+    };
+
+    const userExists = data.nextStep !== 'signup';
+    return (
+        <FancyRectangle colour="black" offset="4" filled>
+            <div className="relative flex w-11 gap-y-2 border-2 border-black" ref={ref}>
+                <button onClick={handleButtonClick}>
+                    <Image src={data.avatar!} alt="Profile" width={100} height={100} />
+                </button>
+                <Transition
+                    show={isMenuOpen}
+                    enter="transition ease-out duration-100"
+                    enterFrom="opacity-0 scale-90"
+                    enterTo="opacity-100 scale-100"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-90"
+                >
+                    <div className="absolute right-0 top-10 z-50 w-44 space-y-4 border-4 border-black bg-white p-4">
+                        {userExists && <MenuLinks data={data} onClick={closeMenu} />}
+                        <Button onClick={handleSignOut} colour="orange" width="w-40 md:w-32">
+                            Sign Out
+                        </Button>
+                    </div>
+                </Transition>
+            </div>
+        </FancyRectangle>
+    );
+}
+
+export default function HeaderClient({
+    data,
+    className,
+}: {
+    data: HeaderData;
+    className?: string;
+}) {
+    return (
+        <header className={`${className} fixed z-[9999] w-full`}>
+            <ScrollShader />
+            <div className="mx-auto mt-8 w-responsive">
+                <div className="flex items-center gap-8 border-4 border-black bg-white px-8 py-4 text-grey">
+                    <LogoTitle titleColor="text-grey" className="grow" />
+                    <Links />
+                    {data.nextStep === 'signup' && (
+                        <Button colour="purple" href="/join">
+                            Continue Signing Up
+                        </Button>
+                    )}
+                    {data.nextStep === 'payment' && (
+                        <Button colour="orange" href="/settings">
+                            Continue to payment
+                        </Button>
+                    )}
+                    {data.isSignedIn ? <UserButton data={data} /> : <SignInJoin />}
+                </div>
+                <div className="relative -right-[0.5rem] -top-[4.75rem] -z-10 h-[5.25rem] w-responsive border-4 border-black bg-white" />
+            </div>
+        </header>
+    );
+}
diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx
new file mode 100644
index 00000000..64d1dd33
--- /dev/null
+++ b/src/components/Header/HeaderMobileClient.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { IoMdClose, IoMdMenu } from 'react-icons/io';
+import type { HeaderData } from '.';
+import FancyRectangle from '../FancyRectangle';
+import { Links, MenuLinks } from './components/Links';
+import LogoTitle from './components/LogoTitle';
+import ScrollShader from './components/ScrollShader';
+
+export default function HeaderMobileClient({
+    data,
+    className,
+}: {
+    data: HeaderData;
+    className?: string;
+}) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+    const closeMenu = () => {
+        setIsMenuOpen(false);
+    };
+
+    return (
+        <div
+            className={`${className} fixed z-[9999] w-full transition-all ${isMenuOpen ? 'h-full bg-white/95' : ''}`}
+        >
+            <ScrollShader className={isMenuOpen ? 'hidden' : ''} />
+            <div
+                className={`mx-auto mt-8 transition-all ${isMenuOpen ? 'w-[90vw]' : 'w-responsive'}`}
+            >
+                <div className="flex">
+                    <LogoTitle
+                        titleColor={isMenuOpen ? 'text-grey' : 'text-white'}
+                        className="grow"
+                        onClick={closeMenu}
+                    />
+                    <FancyRectangle colour="black" offset="4" filled>
+                        <button
+                            onClick={toggleMenu}
+                            className={`${
+                                isMenuOpen ? 'bg-orange' : 'bg-white'
+                            } relative flex h-16 w-16 items-center justify-center border-4 border-black text-4xl text-black transition-all duration-300`}
+                        >
+                            {isMenuOpen ? (
+                                <IoMdClose aria-label="Close" />
+                            ) : (
+                                <IoMdMenu aria-label="Menu" />
+                            )}
+                            {data.nextStep !== null && !isMenuOpen && (
+                                <span className="absolute -right-2 -top-2 z-50 flex h-3 w-3">
+                                    <div className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
+                                    <div className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
+                                </span>
+                            )}
+                        </button>
+                    </FancyRectangle>
+                </div>
+                {isMenuOpen && (
+                    <>
+                        <div className="mt-8 h-0.5 w-full bg-grey" />
+                        <div className="mt-12 flex flex-col items-center gap-8 text-4xl text-grey">
+                            <Links onClick={closeMenu} />
+                            <div className="mt-4 h-0.5 w-full bg-grey" />
+                            {data.nextStep === 'signup' && (
+                                <Link
+                                    href="/join"
+                                    className="block font-bold underline"
+                                    onClick={closeMenu}
+                                >
+                                    Continue Signing Up
+                                </Link>
+                            )}
+                            {data.nextStep === 'payment' && (
+                                <Link
+                                    href="/settings"
+                                    className="block font-bold underline"
+                                    onClick={closeMenu}
+                                >
+                                    Continue to payment
+                                </Link>
+                            )}
+                            <MenuLinks data={data} onClick={closeMenu} />
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/Header/components/Links.tsx b/src/components/Header/components/Links.tsx
new file mode 100644
index 00000000..232cde8f
--- /dev/null
+++ b/src/components/Header/components/Links.tsx
@@ -0,0 +1,48 @@
+import { env } from '@/env.mjs';
+import Link from 'next/link';
+import type { HeaderData } from '..';
+
+export function MenuLinks({ data, onClick }: { data: HeaderData; onClick?: () => void }) {
+    const isMember = data.nextStep === null;
+    return (
+        <>
+            {isMember && (
+                <Link
+                    href={env.NEXT_PUBLIC_DRIVE_LINK}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block hover:underline"
+                    onClick={onClick}
+                >
+                    CS Club Drive
+                </Link>
+            )}
+            <Link href="/settings" className="block hover:underline" onClick={onClick}>
+                Settings
+            </Link>
+            {data.isAdmin && (
+                <Link href="/admin" className="block hover:underline" onClick={onClick}>
+                    Admin Panel
+                </Link>
+            )}
+        </>
+    );
+}
+
+const LINKS = ['about', 'events', 'sponsors', 'contact'];
+export function Links({ onClick }: { onClick?: () => void }) {
+    return (
+        <>
+            {LINKS.map((link, i) => (
+                <Link
+                    href={`/${link}`}
+                    className="block capitalize hover:underline"
+                    onClick={onClick}
+                    key={i}
+                >
+                    {link}
+                </Link>
+            ))}
+        </>
+    );
+}
diff --git a/src/components/Header/components/LogoTitle.tsx b/src/components/Header/components/LogoTitle.tsx
new file mode 100644
index 00000000..c669daca
--- /dev/null
+++ b/src/components/Header/components/LogoTitle.tsx
@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function LogoTitle({
+    titleColor,
+    className,
+    onClick,
+}: {
+    titleColor: 'text-grey' | 'text-white';
+    className?: string;
+    onClick?: () => void;
+}) {
+    return (
+        <Link href="/" className={`${className} flex flex-row items-center`} onClick={onClick}>
+            <Image
+                src="/images/logos/logo.svg"
+                alt="Computer Science Club Logo"
+                className="h-full w-[3rem] md:w-[2rem] lg:w-[2.5rem]"
+                width={100}
+                height={100}
+            />
+            <h1 className={`${titleColor} ml-2 text-3xl font-bold md:text-xl lg:text-2xl`}>
+                CS CLUB
+            </h1>
+        </Link>
+    );
+}
diff --git a/src/components/Header/components/ScrollShader.tsx b/src/components/Header/components/ScrollShader.tsx
new file mode 100644
index 00000000..463984fe
--- /dev/null
+++ b/src/components/Header/components/ScrollShader.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { useState } from 'react';
+import { useEventListener } from 'usehooks-ts';
+
+export default function ScrollShader({ className }: { className?: string }) {
+    const [isScrolled, setIsScrolled] = useState(false);
+    useEventListener('scroll', () => {
+        const scrollPosition = window.scrollY;
+        setIsScrolled(scrollPosition > 0);
+    });
+
+    return (
+        <div
+            className={`absolute -z-20 h-40 w-full transition-all duration-500 ${
+                isScrolled ? 'bg-gradient-to-b from-black from-10% to-transparent to-100%' : ''
+            } ${className}`}
+        />
+    );
+}
diff --git a/src/components/Header/components/SignInJoin.tsx b/src/components/Header/components/SignInJoin.tsx
new file mode 100644
index 00000000..51daa3f2
--- /dev/null
+++ b/src/components/Header/components/SignInJoin.tsx
@@ -0,0 +1,14 @@
+import Button from '../../Button';
+
+export default function SignInJoin() {
+    return (
+        <>
+            <Button colour="orange" href="/signin">
+                Sign In
+            </Button>
+            <Button colour="purple" href="/join">
+                Join Us
+            </Button>
+        </>
+    );
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 00000000..5b96a22e
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,43 @@
+import { checkUserExists } from '@/server/check-user-exists';
+import { verifyMembershipPayment } from '@/server/verify-membership-payment';
+import { currentUser } from '@clerk/nextjs';
+import HeaderClient from './HeaderClient';
+import HeaderMobileClient from './HeaderMobileClient';
+
+const getHeaderData = async () => {
+    const user = await currentUser();
+    if (!user) {
+        return { isSignedIn: false as const };
+    }
+
+    let nextStep: 'signup' | 'payment' | null = null;
+    const exists = await checkUserExists(user.id);
+    if (exists) {
+        const membershipPayment = await verifyMembershipPayment(user.id);
+        if (!membershipPayment.paid) {
+            nextStep = 'payment';
+        }
+    } else {
+        nextStep = 'signup';
+    }
+
+    return {
+        isSignedIn: true as const,
+        avatar: user.imageUrl,
+        isAdmin: (user.publicMetadata.isAdmin as boolean | undefined) ?? false,
+        nextStep,
+        isMember: nextStep === null,
+    };
+};
+export type HeaderData = Awaited<ReturnType<typeof getHeaderData>>;
+
+export default async function Header() {
+    const headerData = await getHeaderData();
+
+    return (
+        <>
+            <HeaderClient data={headerData} className="hidden md:block" />
+            <HeaderMobileClient data={headerData} className="md:hidden" />
+        </>
+    );
+}
diff --git a/src/components/UserButton.tsx b/src/components/UserButton.tsx
deleted file mode 100644
index e5c80281..00000000
--- a/src/components/UserButton.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Button from '@/components/Button';
-import { env } from '@/env.mjs';
-import { useClerk, useUser } from '@clerk/clerk-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import FancyRectangle from './FancyRectangle';
-
-export default function UserButton({
-    userExists,
-    userPaid,
-}: {
-    userExists: boolean;
-    userPaid: boolean;
-}) {
-    const { user } = useUser();
-    const [isPopupOpen, setPopupOpen] = useState(false);
-    const { signOut } = useClerk();
-
-    const handleButtonClick = () => {
-        setPopupOpen(!isPopupOpen);
-    };
-
-    const handleSignOut = async () => {
-        await signOut();
-    };
-
-    if (!user) return <></>;
-
-    return (
-        <FancyRectangle colour="black" offset="4" filled={true}>
-            <div className="relative flex w-11 gap-y-2 border-2 border-black">
-                <button onClick={handleButtonClick}>
-                    <Image src={user.imageUrl} alt="Profile" width={100} height={100} />
-                </button>
-
-                {/* Popup menu */}
-                {isPopupOpen && (
-                    <div className="absolute right-0 top-10 z-10 flex w-52 flex-col gap-y-4 border-4 border-black bg-white p-4 text-xl md:w-44 md:text-base">
-                        {/* Only show settings if finished sign up and show drive link if membership paid */}
-                        {userExists && (
-                            <>
-                                {userPaid && (
-                                    <Link
-                                        href={env.NEXT_PUBLIC_DRIVE_LINK}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="hover:underline"
-                                    >
-                                        CS Club Drive
-                                    </Link>
-                                )}
-                                <Link href="/settings" className="hover:underline">
-                                    Settings
-                                </Link>
-                                {user.publicMetadata.isAdmin && (
-                                    <Link href="/admin" className="hover:underline">
-                                        Admin Panel
-                                    </Link>
-                                )}
-                            </>
-                        )}
-                        {/* Sign Out */}
-                        <Button onClick={handleSignOut} colour="orange" width="w-40 md:w-32">
-                            Sign Out
-                        </Button>
-                    </div>
-                )}
-            </div>
-        </FancyRectangle>
-    );
-}