diff --git a/frontend/my-react-app/package-lock.json b/frontend/my-react-app/package-lock.json
index c6f9148..aed88a4 100644
--- a/frontend/my-react-app/package-lock.json
+++ b/frontend/my-react-app/package-lock.json
@@ -141,7 +141,6 @@
             "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.27.1",
                 "@babel/generator": "^7.28.3",
@@ -481,7 +480,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=18"
             },
@@ -525,7 +523,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=18"
             }
@@ -594,7 +591,6 @@
             "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
             "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.18.3",
                 "@emotion/babel-plugin": "^11.13.5",
@@ -638,7 +634,6 @@
             "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
             "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.18.3",
                 "@emotion/babel-plugin": "^11.13.5",
@@ -1419,7 +1414,6 @@
             "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.4.tgz",
             "integrity": "sha512-gEQL9pbJZZHT7lYJBKQCS723v1MGys2IFc94COXbUIyCTWa+qC77a7hUax4Yjd5ggEm35dk4AyYABpKKWC4MLw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.28.4",
                 "@mui/core-downloads-tracker": "^7.3.4",
@@ -2070,7 +2064,8 @@
             "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
             "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/@types/babel__core": {
             "version": "7.20.5",
@@ -2173,7 +2168,6 @@
             "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
             "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "csstype": "^3.0.2"
             }
@@ -2184,7 +2178,6 @@
             "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "peerDependencies": {
                 "@types/react": "^19.2.0"
             }
@@ -2267,7 +2260,6 @@
             "integrity": "sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.44.0",
                 "@typescript-eslint/types": "8.44.0",
@@ -2617,7 +2609,6 @@
             "integrity": "sha512-6HV2HHl9aRJ09TlYj/WAQxaa797Ezb5u0LpgabthlASAUAWKgw/W1DSPX7t848mMZmIUvzZgnUHGIylAoYHP0w==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@vitest/utils": "4.0.9",
                 "fflate": "^0.8.2",
@@ -2654,7 +2645,6 @@
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -2705,6 +2695,7 @@
             "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -2855,7 +2846,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.8.3",
                 "caniuse-lite": "^1.0.30001741",
@@ -3084,8 +3074,7 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/data-urls": {
             "version": "6.0.0",
@@ -3156,7 +3145,8 @@
             "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
             "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/dom-helpers": {
             "version": "5.2.1",
@@ -3333,7 +3323,6 @@
             "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
                 "@eslint-community/regexpp": "^4.12.1",
@@ -4082,7 +4071,6 @@
             "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@acemir/cssom": "^0.9.23",
                 "@asamuzakjp/dom-selector": "^6.7.4",
@@ -4256,6 +4244,7 @@
             "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "lz-string": "bin/bin.js"
             }
@@ -4642,6 +4631,7 @@
             "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "ansi-regex": "^5.0.1",
                 "ansi-styles": "^5.0.0",
@@ -4657,6 +4647,7 @@
             "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -4669,7 +4660,8 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
             "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/prop-types": {
             "version": "15.8.1",
@@ -4739,7 +4731,6 @@
             "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
             "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -4749,7 +4740,6 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
             "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "scheduler": "^0.26.0"
             },
@@ -5195,7 +5185,6 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -5314,7 +5303,6 @@
             "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -5394,7 +5382,6 @@
             "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "esbuild": "^0.25.0",
                 "fdir": "^6.5.0",
@@ -5488,7 +5475,6 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=12"
             },
diff --git a/frontend/my-react-app/src/App.tsx b/frontend/my-react-app/src/App.tsx
index 05e9b6d..bbbc709 100644
--- a/frontend/my-react-app/src/App.tsx
+++ b/frontend/my-react-app/src/App.tsx
@@ -42,7 +42,6 @@ function MainLayout() {
     return (
         <>
             <Header/>
-            <Toolbar/>
 
             <Outlet />
             <Footer />
diff --git a/frontend/my-react-app/src/components/Header.tsx b/frontend/my-react-app/src/components/Header.tsx
index 379029c..76e2a1f 100644
--- a/frontend/my-react-app/src/components/Header.tsx
+++ b/frontend/my-react-app/src/components/Header.tsx
@@ -9,6 +9,7 @@ import {
   Menu,
   MenuItem,
   Avatar,
+  Button,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import PersonIcon from "@mui/icons-material/Person";
@@ -23,7 +24,6 @@ const Header: React.FC = () => {
   const { isAuthenticated, logout, user } = useAuth();
   const [headerSearch, setHeaderSearch] = useState<string>("");
 
-  {/* Gotta handle functions at the start! */}
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -85,6 +85,7 @@ const Header: React.FC = () => {
 
   return (
     <AppBar
+      position="static"
       sx={{
         backgroundColor: "var(--charcoal)",
         boxShadow: "none",
@@ -93,23 +94,123 @@ const Header: React.FC = () => {
     >
       <Toolbar sx={{ justifyContent: "space-between", px: 3 }}>
         {/* Logo */}
-        {/* sx = applies CUSTOM STYLES to stuff */}
         <Box
           sx={{
             display: "flex",
             alignItems: "center",
             cursor: "pointer"
           }}
-          onClick={() => navigate("/")
-
-          }
+          onClick={() => navigate("/")}
         >
-          <img src={logo} alt="Logo" style={{ height: "90px", width: "auto" }}
-          />
+          <img src={logo} alt="Logo" style={{ height: "90px", width: "auto" }} />
+        </Box>
+
+        {/* Buttons from SubHeader */}
+        <Box sx={{ display: "flex", justifyContent: "flex-start", ml: 2, gap: '8px' }}>
+          {isAuthenticated && user?.userType === 'organizer' && (
+            <Button
+              variant="contained"
+              onClick={() => navigate('/CreateData')}
+              sx={{
+                bgcolor: 'var(--fluorescent-cyan)',
+                color: 'var(--charcoal)',
+                border: '2px solid transparent',
+                '&:hover': {
+                  bgcolor: 'var(--fluorescent-cyan)',
+                  border: '2px solid white',
+                }
+              }}
+            >
+              Create an Event!
+            </Button>
+          )}
+          {isAuthenticated && user?.userType === 'administrator' && (
+            <Button
+              variant="contained"
+              onClick={() => navigate('/admin/dashboard')}
+              sx={{
+                bgcolor: 'var(--fluorescent-cyan)',
+                color: 'var(--charcoal)',
+                border: '2px solid transparent',
+                '&:hover': {
+                  bgcolor: 'var(--fluorescent-cyan)',
+                  border: '2px solid white',
+                }
+              }}
+            >
+              Admin Dashboard
+            </Button>
+          )}
+          <Button
+            variant="contained"
+            onClick={() => navigate('/events')}
+            sx={{
+              bgcolor: 'var(--fluorescent-cyan)',
+              color: 'var(--charcoal)',
+              border: '2px solid transparent',
+              '&:hover': {
+                bgcolor: 'var(--fluorescent-cyan)',
+                border: '2px solid white',
+              }
+            }}
+          >
+            Browse Events
+          </Button>
+          {isAuthenticated && user?.userType === 'student' && (
+            <Button
+              variant="contained"
+              onClick={() => navigate('/savedtickets')}
+              sx={{
+                bgcolor: 'var(--fluorescent-cyan)',
+                color: 'var(--charcoal)',
+                border: '2px solid transparent',
+                '&:hover': {
+                  bgcolor: 'var(--fluorescent-cyan)',
+                  border: '2px solid white',
+                }
+              }}
+            >
+              Saved Tickets
+            </Button>
+          )}
+          {!isAuthenticated && (
+            <Button
+              variant="contained"
+              onClick={() => navigate('/signup')}
+              sx={{
+                bgcolor: 'var(--fluorescent-cyan)',
+                color: 'var(--charcoal)',
+                border: '2px solid transparent',
+                '&:hover': {
+                  bgcolor: 'var(--fluorescent-cyan)',
+                  border: '2px solid white',
+                }
+              }}
+            >
+              Sign Up
+            </Button>
+          )}
+          {!isAuthenticated && (
+            <Button
+              variant="contained"
+              onClick={() => navigate('/login')}
+              sx={{
+                bgcolor: 'var(--fluorescent-cyan)',
+                color: 'var(--charcoal)',
+                border: '2px solid transparent',
+                '&:hover': {
+                  bgcolor: 'var(--fluorescent-cyan)',
+                  border: '2px solid white',
+                }
+              }}
+            >
+              Login
+            </Button>
+          )}
         </Box>
 
         {/* Search Bar */}
-        <Box sx={{ flexGrow: 1, maxWidth: "600px", mx: 4 }}>
+        <Box sx={{ flexGrow: 1, maxWidth: "600px", ml: 2, mr: 4 }}>
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -166,7 +267,7 @@ const Header: React.FC = () => {
           </form>
         </Box>
 
-        {/* User Menu */}
+        {/* User Menu (Dropdown) */}
         <Box>
           <IconButton
             onClick={handleClick}
@@ -210,8 +311,6 @@ const Header: React.FC = () => {
             }}
           >
             {isAuthenticated ? [
-
-
               user && (user.userType === 'student' || user.userType === 'organizer') && (
                 <MenuItem
                   key="tickets"
@@ -225,8 +324,6 @@ const Header: React.FC = () => {
                   My Tickets
                 </MenuItem>
               ),
-
-
               user && (user.userType === 'student' || user.userType === 'organizer') && (
                 <MenuItem
                   key="saved-events"
@@ -240,7 +337,6 @@ const Header: React.FC = () => {
                   Saved Events
                 </MenuItem>
               ),
-
               user && user.userType === 'organizer' && (
                 <MenuItem
                   key="my-events"
@@ -254,7 +350,6 @@ const Header: React.FC = () => {
                   My Events
                 </MenuItem>
               ),
-
               user && user.userType === 'administrator' && (
                 <MenuItem
                   key="admin-dashboard"
@@ -268,7 +363,6 @@ const Header: React.FC = () => {
                   Admin Dashboard
                 </MenuItem>
               ),
-
               user && user.userType === 'administrator' && (
                 <MenuItem
                   key="admin"
@@ -282,7 +376,6 @@ const Header: React.FC = () => {
                   Approve Organizers
                 </MenuItem>
               ),
-
               user && user.userType === 'administrator' && (
                 <MenuItem
                   key="approve-events"
@@ -296,10 +389,6 @@ const Header: React.FC = () => {
                   Approve Events
                 </MenuItem>
               ),
-
-
-
-
               <MenuItem
                 key="settings"
                 onClick={handleSettings}
@@ -311,8 +400,6 @@ const Header: React.FC = () => {
               >
                 Settings
               </MenuItem>,
-
-
               <MenuItem
                 key="logout"
                 onClick={handleLogout}
@@ -325,10 +412,6 @@ const Header: React.FC = () => {
                 Log Out
               </MenuItem>
             ] : [
-
-
-
-              // No user logged in
               <MenuItem
                 key="login"
                 onClick={handleLogin}
diff --git a/frontend/my-react-app/src/components/Header.tsx.bak b/frontend/my-react-app/src/components/Header.tsx.bak
new file mode 100644
index 0000000..379029c
--- /dev/null
+++ b/frontend/my-react-app/src/components/Header.tsx.bak
@@ -0,0 +1,362 @@
+import React, { useState } from "react";
+import {
+  AppBar,
+  Toolbar,
+  Box,
+  TextField,
+  InputAdornment,
+  IconButton,
+  Menu,
+  MenuItem,
+  Avatar,
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import PersonIcon from "@mui/icons-material/Person";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+import logo from "../assets/logo.png";
+
+const Header: React.FC = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const navigate = useNavigate();
+  const { isAuthenticated, logout, user } = useAuth();
+  const [headerSearch, setHeaderSearch] = useState<string>("");
+
+  {/* Gotta handle functions at the start! */}
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSettings = () => {
+    navigate('/settings');
+    handleClose();
+  };
+
+  const handleMyTickets = () => {
+    navigate('/mytickets');
+    handleClose();
+  };
+
+  const handleSavedEvents = () => {
+    navigate('/savedtickets');
+    handleClose();
+  };
+
+  const handleMyEvents = () => {
+    navigate('/my-events');
+    handleClose();
+  };
+
+  const handleAdmin = () => {
+    navigate('/admin/approve-organizer');
+    handleClose();
+  };
+
+  const handleAdminApproveEvents = () => {
+    navigate('/admin/approve-events');
+    handleClose();
+  };
+
+  const handleAdminDashboard = () => {
+    navigate('/admin/dashboard');
+    handleClose();
+  };
+
+  const handleLogout = () => {
+    logout();
+    handleClose();
+    navigate('/');
+  };
+
+  const handleLogin = () => {
+    navigate('/login');
+    handleClose();
+  };
+
+  const handleSignUp = () => {
+    navigate('/signup');
+    handleClose();
+  };
+
+  return (
+    <AppBar
+      sx={{
+        backgroundColor: "var(--charcoal)",
+        boxShadow: "none",
+        borderBottom: "1px solid var(--charcoal-25)",
+      }}
+    >
+      <Toolbar sx={{ justifyContent: "space-between", px: 3 }}>
+        {/* Logo */}
+        {/* sx = applies CUSTOM STYLES to stuff */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer"
+          }}
+          onClick={() => navigate("/")
+
+          }
+        >
+          <img src={logo} alt="Logo" style={{ height: "90px", width: "auto" }}
+          />
+        </Box>
+
+        {/* Search Bar */}
+        <Box sx={{ flexGrow: 1, maxWidth: "600px", mx: 4 }}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const trimmed = headerSearch.trim();
+              if (trimmed.length === 0) {
+                navigate('/events');
+              } else {
+                navigate(`/events?search=${encodeURIComponent(trimmed)}`);
+              }
+            }}
+          >
+            <TextField
+              fullWidth
+              placeholder="Search for events..."
+              variant="outlined"
+              size="small"
+              value={headerSearch}
+              onChange={(e) => setHeaderSearch(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  setHeaderSearch('');
+                }
+              }}
+              sx={{
+                "& .MuiOutlinedInput-root": {
+                  backgroundColor: "white",
+                  borderRadius: "25px",
+                  "& fieldset": {
+                    borderColor: "var(--charcoal-25)",
+                  },
+                  "&:hover fieldset": {
+                    borderColor: "var(--fluorescent-cyan)",
+                  },
+                  "&.Mui-focused fieldset": {
+                    borderColor: "var(--fluorescent-cyan)",
+                  },
+                },
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <IconButton
+                      type="submit"
+                      size="small"
+                      sx={{ p: 0, mr: 0.5 }}
+                      aria-label="search events"
+                    >
+                      <SearchIcon sx={{ color: "var(--charcoal-50)" }} />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </form>
+        </Box>
+
+        {/* User Menu */}
+        <Box>
+          <IconButton
+            onClick={handleClick}
+            sx={{
+              color: "white",
+              "&:hover": {
+                backgroundColor: "var(--charcoal-25)",
+              },
+            }}
+          >
+            <Avatar
+              sx={{
+                width: 32,
+                height: 32,
+                backgroundColor: "var(--fluorescent-cyan)",
+                color: "var(--charcoal)",
+              }}
+            >
+              <PersonIcon />
+            </Avatar>
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "right",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+            sx={{
+              "& .MuiPaper-root": {
+                backgroundColor: "white",
+                borderRadius: "8px",
+                boxShadow: "0 4px 12px var(--charcoal-25)",
+                border: "1px solid var(--charcoal-10)",
+              },
+            }}
+          >
+            {isAuthenticated ? [
+
+
+              user && (user.userType === 'student' || user.userType === 'organizer') && (
+                <MenuItem
+                  key="tickets"
+                  onClick={handleMyTickets}
+                  sx={{
+                    "&:hover": {
+                      backgroundColor: "var(--fluorescent-cyan-10)",
+                    },
+                  }}
+                >
+                  My Tickets
+                </MenuItem>
+              ),
+
+
+              user && (user.userType === 'student' || user.userType === 'organizer') && (
+                <MenuItem
+                  key="saved-events"
+                  onClick={handleSavedEvents}
+                  sx={{
+                    "&:hover": {
+                      backgroundColor: "var(--fluorescent-cyan-10)",
+                    },
+                  }}
+                >
+                  Saved Events
+                </MenuItem>
+              ),
+
+              user && user.userType === 'organizer' && (
+                <MenuItem
+                  key="my-events"
+                  onClick={handleMyEvents}
+                  sx={{
+                    "&:hover": {
+                      backgroundColor: "var(--fluorescent-cyan-10)",
+                    },
+                  }}
+                >
+                  My Events
+                </MenuItem>
+              ),
+
+              user && user.userType === 'administrator' && (
+                <MenuItem
+                  key="admin-dashboard"
+                  onClick={handleAdminDashboard}
+                  sx={{
+                    "&:hover": {
+                      backgroundColor: "var(--fluorescent-cyan-10)",
+                    },
+                  }}
+                >
+                  Admin Dashboard
+                </MenuItem>
+              ),
+
+              user && user.userType === 'administrator' && (
+                <MenuItem
+                  key="admin"
+                  onClick={handleAdmin}
+                  sx={{
+                    "&:hover": {
+                      backgroundColor: "var(--fluorescent-cyan-10)",
+                    },
+                  }}
+                >
+                  Approve Organizers
+                </MenuItem>
+              ),
+
+              user && user.userType === 'administrator' && (
+                <MenuItem
+                  key="approve-events"
+                  onClick={handleAdminApproveEvents}
+                  sx={{
+                    "&:hover": {
+                      backgroundColor: "var(--fluorescent-cyan-10)",
+                    },
+                  }}
+                >
+                  Approve Events
+                </MenuItem>
+              ),
+
+
+
+
+              <MenuItem
+                key="settings"
+                onClick={handleSettings}
+                sx={{
+                  "&:hover": {
+                    backgroundColor: "var(--fluorescent-cyan-10)",
+                  },
+                }}
+              >
+                Settings
+              </MenuItem>,
+
+
+              <MenuItem
+                key="logout"
+                onClick={handleLogout}
+                sx={{
+                  "&:hover": {
+                    backgroundColor: "var(--amaranth-purple-10)",
+                  },
+                }}
+              >
+                Log Out
+              </MenuItem>
+            ] : [
+
+
+
+              // No user logged in
+              <MenuItem
+                key="login"
+                onClick={handleLogin}
+                sx={{
+                  "&:hover": {
+                    backgroundColor: "var(--fluorescent-cyan-10)",
+                  },
+                }}
+              >
+                Login
+              </MenuItem>,
+              <MenuItem
+                key="signup"
+                onClick={handleSignUp}
+                sx={{
+                  "&:hover": {
+                    backgroundColor: "var(--fluorescent-cyan-10)",
+                  },
+                }}
+              >
+                Sign Up
+              </MenuItem>
+            ]}
+          </Menu>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;