diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 4f454a9..157c94c 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -1,15 +1,32 @@
-import { useEffect } from "react";
+import { FC } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
+import { defaultCategory } from "@utils/consts";
 
-const CategoryList = () => {
+interface CategoryListItemProps {
+  name: string;
+}
+
+const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
   const { category, setCategory } = useAppContext();
-  const { fetchedCategories, loading, error } = useCategories();
 
-  useEffect(() => {
-    setCategory(fetchedCategories[0]);
-  }, [setCategory, fetchedCategories]);
+  return (
+    <li className="category">
+      <button
+        className={`category__btn ${
+          name === category ? "category__btn--active" : ""
+        }`}
+        onClick={() => setCategory(name)}
+      >
+        {name}
+      </button>
+    </li>
+  );
+};
+
+const CategoryList = () => {
+  const { fetchedCategories, loading, error } = useCategories();
 
   if (loading) return <div>Loading...</div>;
 
@@ -17,17 +34,9 @@ const CategoryList = () => {
 
   return (
     <ul role="list" className="categories">
+      <CategoryListItem name={defaultCategory} />
       {fetchedCategories.map((name, idx) => (
-        <li key={idx} className="category">
-          <button
-            className={`category__btn ${
-              name === category ? "category__btn--active" : ""
-            }`}
-            onClick={() => setCategory(name)}
-          >
-            {name}
-          </button>
-        </li>
+        <CategoryListItem key={idx} name={name} />
       ))}
     </ul>
   );
diff --git a/src/App.tsx b/src/components/Container.tsx
similarity index 75%
rename from src/App.tsx
rename to src/components/Container.tsx
index d2ccddb..dc657b2 100644
--- a/src/App.tsx
+++ b/src/components/Container.tsx
@@ -1,11 +1,15 @@
-import SnippetList from "@components/SnippetList";
+import { FC } from "react";
+import { Outlet } from "react-router-dom";
+
 import { useAppContext } from "@contexts/AppContext";
 import Banner from "@layouts/Banner";
 import Footer from "@layouts/Footer";
 import Header from "@layouts/Header";
 import Sidebar from "@layouts/Sidebar";
 
-const App = () => {
+interface ContainerProps {}
+
+const Container: FC<ContainerProps> = () => {
   const { category } = useAppContext();
 
   return (
@@ -18,7 +22,7 @@ const App = () => {
           <h2 className="section-title">
             {category ? category : "Select a category"}
           </h2>
-          <SnippetList />
+          <Outlet />
         </section>
       </main>
       <Footer />
@@ -26,4 +30,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default Container;
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 03ed5f9..ebe8b09 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -1,17 +1,129 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { useAppContext } from "@contexts/AppContext";
+import { defaultCategory } from "@utils/consts";
+
 import { SearchIcon } from "./Icons";
 
 const SearchInput = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { searchText, setSearchText, setCategory } = useAppContext();
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const [inputVal, setInputVal] = useState<string>("");
+
+  const handleSearchFieldClick = () => {
+    inputRef.current?.focus();
+  };
+
+  const handleSearchKeyPress = (e: KeyboardEvent) => {
+    if (e.key === "/") {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+
+  const clearSearch = useCallback(() => {
+    setInputVal("");
+    setCategory(defaultCategory);
+    setSearchText("");
+    setSearchParams({});
+  }, [setCategory, setSearchParams, setSearchText]);
+
+  const handleEscapePress = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== "Escape") {
+        return;
+      }
+      // check if the input is focused
+      if (document.activeElement !== inputRef.current) {
+        return;
+      }
+
+      inputRef.current?.blur();
+
+      clearSearch();
+    },
+    [clearSearch]
+  );
+
+  const handleReturnPress = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== "Enter") {
+        return;
+      }
+      // check if the input is focused
+      if (document.activeElement !== inputRef.current) {
+        return;
+      }
+
+      const formattedVal = inputVal.trim().toLowerCase();
+
+      setCategory(defaultCategory);
+      setSearchText(formattedVal);
+      if (!formattedVal) {
+        setSearchParams({});
+      } else {
+        setSearchParams({ search: formattedVal });
+      }
+    },
+    [inputVal, setCategory, setSearchParams, setSearchText]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keyup", handleSearchKeyPress);
+    document.addEventListener("keyup", handleEscapePress);
+    document.addEventListener("keyup", handleReturnPress);
+
+    return () => {
+      document.removeEventListener("keyup", handleSearchKeyPress);
+      document.removeEventListener("keyup", handleEscapePress);
+      document.removeEventListener("keyup", handleReturnPress);
+    };
+  }, [handleEscapePress, handleReturnPress]);
+
+  /**
+   * Set the input value and search text to the search query from the URL
+   */
+  useEffect(() => {
+    const search = searchParams.get("search") || "";
+    setInputVal(search);
+    setSearchText(search);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <div className="search-field">
-      <label htmlFor="search">
-        <SearchIcon />
-      </label>
+    <div className="search-field" onClick={handleSearchFieldClick}>
+      <SearchIcon />
       <input
+        ref={inputRef}
         type="search"
         id="search"
-        placeholder="Search here..."
         autoComplete="off"
+        value={inputVal}
+        onChange={(e) => {
+          const newValue = e.target.value;
+          if (!newValue) {
+            clearSearch();
+            return;
+          }
+          setInputVal(newValue);
+        }}
+        onBlur={() => {
+          // ensure the input value is always in sync with the search text
+          if (inputVal !== searchText) {
+            setInputVal(searchText);
+          }
+        }}
       />
+      {!inputVal && !searchText && (
+        <label htmlFor="search">
+          Type <kbd>/</kbd> to search
+        </label>
+      )}
     </div>
   );
 };
diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index eb5ef79..ca9307b 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -11,14 +11,8 @@ import SnippetModal from "./SnippetModal";
 const SnippetList = () => {
   const { language, snippet, setSnippet } = useAppContext();
   const { fetchedSnippets } = useSnippets();
-  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  if (!fetchedSnippets)
-    return (
-      <div>
-        <LeftAngleArrowIcon />
-      </div>
-    );
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   const handleOpenModal = (activeSnippet: SnippetType) => {
     setIsModalOpen(true);
@@ -30,6 +24,14 @@ const SnippetList = () => {
     setSnippet(null);
   };
 
+  if (!fetchedSnippets) {
+    return (
+      <div>
+        <LeftAngleArrowIcon />
+      </div>
+    );
+  }
+
   return (
     <>
       <motion.ul role="list" className="snippets">
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index b5e2379..31fbebc 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
 
 import { useEscapeKey } from "@hooks/useEscapeKey";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
+import { slugify } from "@utils/helpers/slugify";
 
 import Button from "./Button";
 import CodePreview from "./CodePreview";
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index 78fc86e..212056f 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -1,21 +1,18 @@
 import { createContext, FC, useContext, useState } from "react";
 
 import { AppState, LanguageType, SnippetType } from "@types";
-
-// tokens
-const defaultLanguage: LanguageType = {
-  lang: "JAVASCRIPT",
-  icon: "/icons/javascript.svg",
-};
+import { defaultCategory, defaultLanguage } from "@utils/consts";
 
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
   language: defaultLanguage,
   setLanguage: () => {},
-  category: "",
+  category: defaultCategory,
   setCategory: () => {},
   snippet: null,
   setSnippet: () => {},
+  searchText: "",
+  setSearchText: () => {},
 };
 
 const AppContext = createContext<AppState>(defaultState);
@@ -24,8 +21,9 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [language, setLanguage] = useState<LanguageType>(defaultLanguage);
-  const [category, setCategory] = useState<string>("");
+  const [category, setCategory] = useState<string>(defaultCategory);
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
+  const [searchText, setSearchText] = useState<string>("");
 
   return (
     <AppContext.Provider
@@ -36,6 +34,8 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
         setCategory,
         snippet,
         setSnippet,
+        searchText,
+        setSearchText,
       }}
     >
       {children}
diff --git a/src/hooks/useCategories.ts b/src/hooks/useCategories.ts
index ac55a7d..f114b1d 100644
--- a/src/hooks/useCategories.ts
+++ b/src/hooks/useCategories.ts
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
+import { slugify } from "@utils/helpers/slugify";
 
 import { useFetch } from "./useFetch";
 
diff --git a/src/hooks/useSnippets.ts b/src/hooks/useSnippets.ts
index 1ceb0dd..6271fc5 100644
--- a/src/hooks/useSnippets.ts
+++ b/src/hooks/useSnippets.ts
@@ -1,6 +1,9 @@
+import { useMemo } from "react";
+
 import { useAppContext } from "@contexts/AppContext";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
+import { defaultCategory } from "@utils/consts";
+import { slugify } from "@utils/helpers/slugify";
 
 import { useFetch } from "./useFetch";
 
@@ -10,14 +13,36 @@ type CategoryData = {
 };
 
 export const useSnippets = () => {
-  const { language, category } = useAppContext();
+  const { language, category, searchText } = useAppContext();
   const { data, loading, error } = useFetch<CategoryData[]>(
     `/consolidated/${slugify(language.lang)}.json`
   );
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.categoryName === category)?.snippets
-    : [];
+  const fetchedSnippets = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    if (category === defaultCategory) {
+      if (searchText) {
+        return data
+          .flatMap((item) => item.snippets)
+          .filter((item) =>
+            item.title.toLowerCase().includes(searchText.toLowerCase())
+          );
+      }
+      return data.flatMap((item) => item.snippets);
+    }
+
+    if (searchText) {
+      return data
+        .find((item) => item.categoryName === category)
+        ?.snippets.filter((item) =>
+          item.title.toLowerCase().includes(searchText.toLowerCase())
+        );
+    }
+    return data.find((item) => item.categoryName === category)?.snippets;
+  }, [category, data, searchText]);
 
   return { fetchedSnippets, loading, error };
 };
diff --git a/src/main.tsx b/src/main.tsx
index 1a01bb1..2263e70 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,15 +2,15 @@ import "@styles/main.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
 
 import { AppProvider } from "@contexts/AppContext";
-
-import App from "./App";
+import { router } from "@router";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <AppProvider>
-      <App />
+      <RouterProvider router={router} />
     </AppProvider>
   </StrictMode>
 );
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 0000000..bce12e1
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,16 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import Container from "@components/Container";
+import SnippetList from "@components/SnippetList";
+
+export const router = createBrowserRouter([
+  {
+    element: <Container />,
+    children: [
+      {
+        path: "/",
+        element: <SnippetList />,
+      },
+    ],
+  },
+]);
diff --git a/src/styles/main.css b/src/styles/main.css
index fb5afa9..8fdf95d 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -76,6 +76,7 @@
   --fw-normal: 400;
 
   /* Border radius */
+  --br-sm: 0.25rem;
   --br-md: 0.5rem;
   --br-lg: 0.75rem;
 }
@@ -300,12 +301,38 @@ abbr {
   border: 1px solid var(--clr-border-primary);
   border-radius: var(--br-md);
   padding: 0.75em 1.125em;
+  position: relative;
 
   &:is(:hover, :focus-within) {
     border-color: var(--clr-accent);
   }
 }
 
+.search-field label {
+  position: absolute;
+  margin-left: 2.25em;
+}
+
+.search-field:hover, .search-field:hover * {
+  cursor: pointer;
+}
+
+/* hide the label when the search field input element is focused */
+.search-field input:focus + label {
+  display: none;
+}
+
+.search-field label kbd {
+  background-color: var(--clr-bg-secondary);
+  border: 1px solid var(--clr-border-primary);
+  border-radius: var(--br-sm);
+  padding: 0.25em 0.5em;
+  margin: 0 0.25em;
+  font-family: var(--ff-mono);
+  font-weight: var(--fw-bold);
+  color: var(--clr-text-primary);
+}
+
 .search-field > input {
   background-color: transparent;
   border: none;
diff --git a/src/types/index.ts b/src/types/index.ts
index b4eac55..78f85de 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,4 +23,6 @@ export type AppState = {
   setCategory: React.Dispatch<React.SetStateAction<string>>;
   snippet: SnippetType | null;
   setSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>;
+  searchText: string;
+  setSearchText: React.Dispatch<React.SetStateAction<string>>;
 };
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
new file mode 100644
index 0000000..ea778bd
--- /dev/null
+++ b/src/utils/consts.ts
@@ -0,0 +1,8 @@
+import { LanguageType } from "@types";
+
+export const defaultLanguage: LanguageType = {
+  lang: "JAVASCRIPT",
+  icon: "/icons/javascript.svg",
+};
+
+export const defaultCategory = "All Snippets";
diff --git a/src/utils/slugify.ts b/src/utils/helpers/slugify.ts
similarity index 100%
rename from src/utils/slugify.ts
rename to src/utils/helpers/slugify.ts