diff --git a/frontend/my-react-app/src/components/Header.tsx b/frontend/my-react-app/src/components/Header.tsx
index 8d13af8..379029c 100644
--- a/frontend/my-react-app/src/components/Header.tsx
+++ b/frontend/my-react-app/src/components/Header.tsx
@@ -21,6 +21,7 @@ const Header: React.FC = () => {
   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>) => {
@@ -109,34 +110,60 @@ const Header: React.FC = () => {
 
         {/* Search Bar */}
         <Box sx={{ flexGrow: 1, maxWidth: "600px", mx: 4 }}>
-          <TextField
-            fullWidth
-            placeholder="Search for events..."
-            variant="outlined"
-            size="small"
-            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">
-                  <SearchIcon sx={{ color: "var(--charcoal-50)" }} />
-                </InputAdornment>
-              ),
+          <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 */}
diff --git a/frontend/my-react-app/src/pages/EventsPage.tsx b/frontend/my-react-app/src/pages/EventsPage.tsx
index c5752ce..d58222e 100644
--- a/frontend/my-react-app/src/pages/EventsPage.tsx
+++ b/frontend/my-react-app/src/pages/EventsPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   Box,
   Container,
@@ -122,6 +122,13 @@ function EventsPage() {
   const [sortBy, setSortBy] = useState<string>('date');
   const [filterCategory, setFilterCategory] = useState<string>('all');
   const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Initialize search query from URL param on mount / param change
+  useEffect(() => {
+    const qp = searchParams.get('search') || '';
+    setSearchQuery(qp);
+  }, [searchParams]);
 
   // Get min and max prices from events
   const { minPrice, maxPrice } = useMemo(() => {
@@ -262,7 +269,17 @@ function EventsPage() {
               label="Search events"
               variant="outlined"
               value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+              onChange={(e) => {
+                const val = e.target.value;
+                setSearchQuery(val);
+                if (val.trim().length > 0) {
+                  setSearchParams({ search: val });
+                } else {
+                  // Remove param if empty
+                  searchParams.delete('search');
+                  setSearchParams(searchParams);
+                }
+              }}
               placeholder="Search by title, description, or location..."
             />
           </Grid>