diff --git a/client/app/components/checkbox.tsx b/client/app/components/checkbox.tsx
new file mode 100644
index 00000000..ca3873dc
--- /dev/null
+++ b/client/app/components/checkbox.tsx
@@ -0,0 +1,23 @@
+const Checkbox = ({
+  label,
+  onChange,
+  checked,
+}: {
+  label: string;
+  onChange: () => void;
+  checked: boolean;
+}) => {
+  return (
+    <div className="col-lg-2 col-xl-2" role="category-group">
+      <input
+        type="checkbox"
+        onChange={() => onChange()}
+        checked={checked}
+        id={`check-${label.toLowerCase()}`}
+      />
+      <label htmlFor={`check-${label.toLowerCase()}`}></label> {label}
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/client/app/components/header.tsx b/client/app/components/header.tsx
index c5b90346..97109d4d 100644
--- a/client/app/components/header.tsx
+++ b/client/app/components/header.tsx
@@ -90,7 +90,9 @@ const Header: React.FC<HeaderProps> = ({
                     id="userDropdown"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
-                  >{loginForm?.username}</a>
+                  >
+                    {loginForm?.username}
+                  </a>
                   <ul className="dropdown-menu" aria-labelledby="userDropdown">
                     <li>
                       <a
diff --git a/client/app/context/action.ts b/client/app/context/action.ts
index 55b6b2d3..4ddadd3c 100644
--- a/client/app/context/action.ts
+++ b/client/app/context/action.ts
@@ -6,7 +6,7 @@ export type LoginState = {
   error?: string | null;
 };
 
-export const submitAction = async (
+export const submitLoginAction = async (
   prevState: LoginState,
   formData: FormData
 ): Promise<LoginState> => {
@@ -55,3 +55,23 @@ export const submitAction = async (
     };
   }
 };
+
+export const submitSearchAction = async ({ categories, query }: { categories: string[], query: string }) => {
+  const params = new URLSearchParams({ query });
+  categories.forEach((category) => params.append("category", category));
+
+  try {
+    const response = await tekdbApi.get("/api/search/", {
+      params,
+    });
+
+    if (response.status === 200) {
+      return response.data;
+    }
+
+    throw new Error("Search failed");
+  } catch (error) {
+    console.error("Search error", error);
+    throw error;
+  }
+};
\ No newline at end of file
diff --git a/client/app/context/loginContext.tsx b/client/app/context/loginContext.tsx
index 3d1ebd13..23998dcd 100644
--- a/client/app/context/loginContext.tsx
+++ b/client/app/context/loginContext.tsx
@@ -1,10 +1,11 @@
 import React, {
   useEffect,
   createContext,
-  useContext,
+  use,
   useCallback,
 } from "react";
-import { submitAction } from "./action";
+import type { ReactNode } from "react";
+import { submitLoginAction } from "./action";
 import { getAuthSession } from "../api/tekdbApi";
 
 type UseLoginFormReturn = {
@@ -24,7 +25,11 @@ type useLogin = {
 
 const LoginContext = createContext<useLogin | null>(null);
 
-export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
+interface LoginProviderProps {
+  children: ReactNode;
+}
+
+export const LoginProvider: React.FC<LoginProviderProps> = ({
   children,
 }) => {
   const [showLoginModal, setShowLoginModal] = React.useState(false);
@@ -66,7 +71,7 @@ export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
   const formAction = useCallback(async (formData: FormData) => {
     setIsPending(true);
     try {
-      const loginState = await submitAction(
+      const loginState = await submitLoginAction(
         {
           success: false,
           error: null,
@@ -77,7 +82,7 @@ export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
       if (loginState.success) {
         setIsAuthenticated(true);
         setError(null);
-        setShowLoginModal(false);
+        setShowLoginModal(false); 
         return;
       }
 
@@ -104,12 +109,12 @@ export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
   };
 
   return (
-    <LoginContext.Provider value={value}>{children}</LoginContext.Provider>
+    <LoginContext value={value}>{children}</LoginContext>
   );
 };
 
 export const useLogin = () => {
-  const context = useContext(LoginContext);
+  const context = use(LoginContext);
   if (!context) {
     throw new Error("useLogin must be used within a LoginProvider");
   }
diff --git a/client/app/context/searchContext.tsx b/client/app/context/searchContext.tsx
new file mode 100644
index 00000000..6d634690
--- /dev/null
+++ b/client/app/context/searchContext.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback, use } from "react";
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router";
+import { submitSearchAction } from "./action";
+
+type useSearch = {
+  categories: string[];
+  results: any[];
+  query: string;
+  handleCategoryTypeChange: (type: string) => void;
+  handleSearch: (formData: FormData) => Promise<void>;
+  handleQueryChange: (query: string) => void;
+};
+
+const SearchContext = React.createContext<useSearch | null>(null);
+
+interface SearchProviderProps {
+  children: ReactNode;
+}
+
+export const SearchProvider: React.FC<SearchProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const [categories, setCategories] = React.useState<string[]>([]);
+  const [results, setResults] = React.useState<any[]>([]);
+  const [query, setQuery] = React.useState<string>("");
+
+  const handleCategoryTypeChange = useCallback(
+    (type: string) => {
+      if (categories.includes(type)) {
+        setCategories(
+          categories.filter((category: string) => category !== type),
+        );
+      } else {
+        setCategories([...categories, type]);
+      }
+    },
+    [categories],
+  );
+
+  const handleQueryChange = useCallback((query: string) => {
+    setQuery(query);
+  }, []);
+
+  const handleSearch = useCallback(async () => {
+    try {
+      const response = await submitSearchAction({ categories, query });
+      const { results } = response;
+      setResults(results);
+      await navigate("/search");
+    } catch (error) {
+      console.error("Search failed", error);
+    }
+  }, [categories, query, navigate]);
+
+  const value = {
+    categories,
+    results,
+    query,
+    handleCategoryTypeChange,
+    handleSearch,
+    handleQueryChange,
+  };
+  return <SearchContext value={value}>{children}</SearchContext>;
+};
+
+export const useSearch = () => {
+  const context = use(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+};
diff --git a/client/app/layouts/private-route.tsx b/client/app/layouts/private-route.tsx
index a8ec258f..dd387228 100644
--- a/client/app/layouts/private-route.tsx
+++ b/client/app/layouts/private-route.tsx
@@ -5,7 +5,6 @@ import { useLogin } from "../context/loginContext";
 /** Return a 404 if the user is not authenticated */
 const PrivateRoute: React.FC = () => {
   const { loginForm } = useLogin();
-  console.log("PrivateRoute", loginForm);
   if (loginForm.isCheckingAuth) {
     return <></>;
   }
diff --git a/client/app/root.tsx b/client/app/root.tsx
index cd512e7a..ca40ed00 100644
--- a/client/app/root.tsx
+++ b/client/app/root.tsx
@@ -7,6 +7,7 @@ import {
   ScrollRestoration,
   useLoaderData,
 } from "react-router";
+import type { ReactNode } from "react";
 
 import type { Route } from "./+types/root";
 import "./App.css";
@@ -16,8 +17,10 @@ import {
   type PageContentAndSiteInfo,
 } from "./api/pageContent";
 import { LoginProvider } from "./context/loginContext";
+import { SearchProvider } from "./context/searchContext";
 
-export function Layout({ children }: { children: React.ReactNode }) {
+
+export function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -77,9 +80,11 @@ export default function Root() {
         }}
       />
       <LoginProvider>
+        <SearchProvider>
         <Outlet
           context={{ pageContent, siteInfo } satisfies PageContentAndSiteInfo}
         />
+      </SearchProvider>
       </LoginProvider>
     </>
   );
diff --git a/client/app/routes/explore.tsx b/client/app/routes/explore.tsx
index 0af58c8b..8dbee053 100644
--- a/client/app/routes/explore.tsx
+++ b/client/app/routes/explore.tsx
@@ -1,17 +1,24 @@
-import React, { useState } from "react";
+import React from "react";
+import { useSearch } from "../context/searchContext";
+import Checkbox from "../components/checkbox";
+import { CATEGORIES } from "../utils/constants";
+
 import "./explore.css";
 
 const ExploreRoute: React.FC = () => {
-  const [categories, setCategories] = useState<string[]>([]);
+  const {
+    handleCategoryTypeChange,
+    handleSearch,
+    handleQueryChange,
+    categories,
+    query,
+  } = useSearch();
 
-  const handleCategoryTypeChange = (type: string) => {
-    if (categories.includes(type)) {
-      setCategories(categories.filter((category) => category !== type));
-    } else {
-      setCategories([...categories, type]);
-    }
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleSearch(new FormData(e.currentTarget));
   };
-  console.log("Selected categories:", categories);
+
   return (
     <div className="container-fluid content-container">
       <div className="row content-row">
@@ -19,7 +26,7 @@ const ExploreRoute: React.FC = () => {
           <section className="container">
             <div className="explore-form-row row min-full-height">
               <div className="col form-wrapper">
-                <form className="explore-form" method="post" action="/api/search/">
+                <form className="explore-form" onSubmit={onSubmit}>
                   <h1>Search &amp; Browse</h1>
                   <p>
                     You can search by term alone and/or add category filters
@@ -65,6 +72,7 @@ const ExploreRoute: React.FC = () => {
                       name="query"
                       placeholder="Search"
                       aria-describedby="search-icon-label"
+                      onChange={(e) => handleQueryChange(e.target.value)}
                     />
                     <input type="submit" id="query-form-submit" value="GO" />
                   </div>
@@ -73,7 +81,7 @@ const ExploreRoute: React.FC = () => {
                     type="text"
                     id="search-category-type"
                     name="category"
-                    value=""
+                    value={categories.join(",")}
                     hidden
                   />
                   <div
@@ -84,46 +92,14 @@ const ExploreRoute: React.FC = () => {
                     <div className="col-12 col-xl-2" role="category-group">
                       <p>Categories:</p>
                     </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("places")}
-                        id="check-places"
-                      />
-                      <label htmlFor="check-places"></label> Places
-                    </div>
-                    <div className="col-lg-3 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("resources")}
-                        id="check-resources"
-                      />
-                      <label htmlFor="check-resources"></label> Resources
-                    </div>
-                    <div className="col-lg-3 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("activities")}
-                        id="check-activities"
+                    {CATEGORIES.map((category) => (
+                      <Checkbox
+                        key={category}
+                        label={category}
+                        checked={categories.includes(category)}
+                        onChange={() => handleCategoryTypeChange(category)}
                       />
-                      <label htmlFor="check-activities"></label> Activity
-                    </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("sources")}
-                        id="check-sources"
-                      />
-                      <label htmlFor="check-sources"></label> Source
-                    </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("media")}
-                        id="check-media"
-                      />
-                      <label htmlFor="check-media"></label> Media
-                    </div>
+                    ))}
                   </div>
 
                   <div className="button-wrapper">
diff --git a/client/app/routes/search.tsx b/client/app/routes/search.tsx
index 2d1e023e..28ff8191 100644
--- a/client/app/routes/search.tsx
+++ b/client/app/routes/search.tsx
@@ -1,107 +1,81 @@
-import React, { useState } from "react";
-
+import React from "react";
+import { useSearch } from "../context/searchContext";
+import Checkbox from "../components/checkbox";
+import { CATEGORIES } from "../utils/constants";
 
 const SearchRoute: React.FC = () => {
-const [categories, setCategories] = useState<string[]>([]);
+  const {
+    handleCategoryTypeChange,
+    handleSearch,
+    handleQueryChange,
+    categories,
+    results,
+    query,
+  } = useSearch();
 
-  const handleCategoryTypeChange = (type: string) => {
-    if (categories.includes(type)) {
-      setCategories(categories.filter((category) => category !== type));
-    } else {
-      setCategories([...categories, type]);
-    }
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleSearch(new FormData(e.currentTarget));
   };
   return (
     <div>
-      <form className="query-form" method='post' action='/search/' id="filter-form">
-    <div className="form-group row">
-      <div className="col col-md-2"></div>
-                  <div className="input-group explore-input-group">
-                    <span className="input-group-text" id="search-icon-label">
-                      <svg
-                        id="Symbol_62_2"
-                        data-name="Symbol 62 – 2"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                      >
-                        <rect
-                          id="Rectangle_176"
-                          data-name="Rectangle 176"
-                          width="16"
-                          height="16"
-                          fill="none"
-                        />
-                        <path
-                          id="Path_99"
-                          data-name="Path 99"
-                          d="M15.9,14.5l-3.3-3.3A6.847,6.847,0,0,0,14,7,6.957,6.957,0,0,0,7,0,6.957,6.957,0,0,0,0,7a6.957,6.957,0,0,0,7,7,6.847,6.847,0,0,0,4.2-1.4l3.3,3.3ZM2,7A4.951,4.951,0,0,1,7,2a4.951,4.951,0,0,1,5,5,4.951,4.951,0,0,1-5,5A4.951,4.951,0,0,1,2,7Z"
-                        />
-                      </svg>
-                    </span>
-                    <input
-                      type="search"
-                      className="form-control"
-                      id="search-text"
-                      name="query"
-                      placeholder="Search"
-                      aria-describedby="search-icon-label"
-                    />
-                    <input type="submit" id="query-form-submit" value="GO" />
-                  </div>
-      <div className="col col-md-2"></div>
-    </div>
-    <div className="row content-row"  id="filter-checkboxes">
-      <div className="col col-md-2">
-        <p>
-          Filter By: 
-        </p>
-      </div>
-      <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("places")}
-                        id="check-places"
-                      />
-                      <label htmlFor="check-places"></label> Places
-                    </div>
-                    <div className="col-lg-3 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("resources")}
-                        id="check-resources"
-                      />
-                      <label htmlFor="check-resources"></label> Resources
-                    </div>
-                    <div className="col-lg-3 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("activities")}
-                        id="check-activities"
-                      />
-                      <label htmlFor="check-activities"></label> Activity
-                    </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("sources")}
-                        id="check-sources"
-                      />
-                      <label htmlFor="check-sources"></label> Source
-                    </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("media")}
-                        id="check-media"
-                      />
-                      <label htmlFor="check-media"></label> Media
-                    </div>
-    </div>
-  </form>
+      <form className="query-form" onSubmit={onSubmit} id="filter-form">
+        <div className="form-group row">
+          <div className="col col-md-2"></div>
+          <div className="input-group explore-input-group">
+            <span className="input-group-text" id="search-icon-label">
+              <svg
+                id="Symbol_62_2"
+                data-name="Symbol 62 – 2"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+              >
+                <rect
+                  id="Rectangle_176"
+                  data-name="Rectangle 176"
+                  width="16"
+                  height="16"
+                  fill="none"
+                />
+                <path
+                  id="Path_99"
+                  data-name="Path 99"
+                  d="M15.9,14.5l-3.3-3.3A6.847,6.847,0,0,0,14,7,6.957,6.957,0,0,0,7,0,6.957,6.957,0,0,0,0,7a6.957,6.957,0,0,0,7,7,6.847,6.847,0,0,0,4.2-1.4l3.3,3.3ZM2,7A4.951,4.951,0,0,1,7,2a4.951,4.951,0,0,1,5,5,4.951,4.951,0,0,1-5,5A4.951,4.951,0,0,1,2,7Z"
+                />
+              </svg>
+            </span>
+            <input
+              type="search"
+              className="form-control"
+              id="search-text"
+              name="query"
+              placeholder="Search"
+              aria-describedby="search-icon-label"
+              onChange={(e) => handleQueryChange(e.target.value)}
+              value={query}
+            />
+            <input type="submit" id="query-form-submit" value="GO" />
+          </div>
+          <div className="col col-md-2"></div>
+        </div>
+        <div className="row content-row" id="filter-checkboxes">
+          <div className="col col-md-2">
+            <p>Filter By:</p>
+          </div>
+          {CATEGORIES.map((category) => (
+            <Checkbox
+              key={category}
+              label={category}
+              checked={categories.includes(category)}
+              onChange={() => handleCategoryTypeChange(category)}
+            />
+          ))}
+        </div>
+      </form>
     </div>
   );
 };
 
-export default SearchRoute;
\ No newline at end of file
+export default SearchRoute;
diff --git a/client/app/utils/constants.ts b/client/app/utils/constants.ts
new file mode 100644
index 00000000..bc1e3b89
--- /dev/null
+++ b/client/app/utils/constants.ts
@@ -0,0 +1 @@
+export const CATEGORIES = ["places", "resources", "activities", "sources", "media"];
\ No newline at end of file