diff --git a/app/global_search/Search.module.css b/app/global_search/Search.module.css
index edf7cf6..a8cfc9a 100644
--- a/app/global_search/Search.module.css
+++ b/app/global_search/Search.module.css
@@ -1,17 +1,74 @@
-.filterText {
-  font-size: 3rem; /* Adjust the font size as needed */
-  color: #003c6c; /* Set the text color */
-  font-weight: 600; /* Set the font weight */
-  padding-top: 1.25rem; /* Match the py-5 padding top */
-  display: center; /* Match the flex display */
-  align-items: center; /* Match the items-center alignment */
-  justify-content: center; /* Match the justify-center alignment */
-}
-
-.filterTopLeft {
-  position: absolute;
+.container {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  top: 3rem; /* Adjust the top position as needed */
-  left: 80 rem; /* Adjust the left position as needed */
-  margin: 0; /* Remove the margin */
+}
+
+.title {
+  font-size: 60px;
+  margin-bottom: 20px;
+  color: #003c6c;
+  font-weight: 600;
+  text-align: center;
+}
+
+.searchBar {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.searchInput {
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+.searchButton {
+  padding: 10px 20px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.filterButton {
+  margin-left: 10px;
+  padding: 10px 20px;
+  background-color: #4caf50;
+  color: white;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.results {
+  margin-top: 20px;
+}
+
+.resultList {
+  list-style-type: none;
+  padding: 0;
+}
+
+.resultItem {
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+.restrictionIcons {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.restrictionIcon {
+  margin: 5px;
+}
+
+.noResults {
+  margin-top: 20px;
+  font-size: 18px;
+  color: red;
 }
diff --git a/app/global_search/page.tsx b/app/global_search/page.tsx
index da1dcab..0d5935e 100644
--- a/app/global_search/page.tsx
+++ b/app/global_search/page.tsx
@@ -3,9 +3,46 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import styles from "./Search.module.css";
 import Image from "next/image";
-
 import { Location, Food } from "@/interfaces/Location";
 
+
+
+
+
+interface subCategory {
+  name: string;
+  foods: Array<Food>;
+}
+
+interface Category {
+  name: string;
+  sub_categories: Array<subCategory>;
+}
+
+interface DiningHall {
+  name: string;
+  categories: Array<Category>;
+}
+
+const restrictionImageMap: { [key: string]: string } = {
+  eggs: "/Images/egg.jpg",
+  vegan: "/Images/vegan.jpg",
+  fish: "/Images/fish.jpg",
+  veggie: "/Images/veggie.jpg",
+  gluten: "/Images/gluten.jpg",
+  pork: "/Images/pork.jpg",
+  milk: "/Images/milk.jpg",
+  beef: "/Images/beef.jpg",
+  nuts: "/Images/nuts.jpg",
+  halal: "/Images/halal.jpg",
+  soy: "/Images/soy.jpg",
+  shellfish: "/Images/shellfish.jpg",
+  treenut: "/Images/treenut.jpg",
+  sesame: "/Images/sesame.jpg",
+  alcohol: "/Images/alcohol.jpg",
+};
+
+
 const BarebonesComponent = () => {
   const [dhs, setDhs] = useState<Location[]>([]);
   const [searchInput, setSearchInput] = useState<string>("");
@@ -85,8 +122,10 @@ const BarebonesComponent = () => {
           selectedShowAllergies.every((allergy) =>
             food.name.toLowerCase().includes(allergy.toLowerCase())
           );
-        const hasHideAllergy = selectedHideAllergies.some(
-          (allergy) => food.restrictions.includes(allergy.toLowerCase()) // Check if food's restrictions include the hide allergy
+
+        const hasHideAllergy = selectedHideAllergies.some((allergy) =>
+          food.restrictions.includes(allergy.toLowerCase())
+
         );
         return hasShowAllergy && !hasHideAllergy;
       });
@@ -98,64 +137,40 @@ const BarebonesComponent = () => {
   };
 
   return (
-    <div
-      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
-    >
-      {/* Title and Search bar */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          marginBottom: "20px",
-        }}
-      >
-        <h1 className={`${styles.filterText} ${styles.filterTopLeft}`}>
-          Global Search
-        </h1>
-        <div
-          className="search-bar"
-          style={{ marginTop: "100px", display: "flex", alignItems: "center" }}
-        >
-          <input
-            type="text"
-            placeholder="Search foods..."
-            value={searchInput}
-            onChange={handleSearchInputChange}
-          />
-          <button onClick={handleSearch}>Search</button>
-          {/* Filter button */}
-          <div
-            style={{
-              marginLeft: "10px",
-              padding: "10px 20px",
-              backgroundColor: "#4CAF50",
-              color: "white",
-              cursor: "pointer",
-              borderRadius: "5px",
-            }}
-            onClick={handleFilter}
-          >
-            Filter
-          </div>
+    <div className={styles.container}>
+      <h2 className={styles.title}>Global Search</h2>
+      <div className={styles.searchBar}>
+        <input
+          type="text"
+          placeholder="Search foods..."
+          value={searchInput}
+          onChange={handleSearchInputChange}
+          className={styles.searchInput}
+        />
+        <button onClick={handleSearch} className={styles.searchButton}>
+          Search
+        </button>
+        <div className={styles.filterButton} onClick={handleFilter}>
+          Filter
         </div>
       </div>
 
-      {/* Display search results if button clicked */}
       {showSearchResults && (
-        <div>
+        <div className={styles.results}>
           <h3>Search Results:</h3>
-          <ul>
+          <ul className={styles.resultList}>
             {filteredFoods.map(({ food, dhName, categoryName }, index) => (
-              <li key={index}>
+              <li key={index} className={styles.resultItem}>
                 {food.name} - {categoryName} ({dhName})
-                <div style={{ display: "flex", flexWrap: "nowrap" }}>
+                <div className={styles.restrictionIcons}>
                   {food.restrictions.map((restriction, index) => (
                     <Image
                       key={index}
                       src={`/images/restrictions/${restriction}.jpg`}
                       alt={restriction}
-                      style={{ width: "25px", height: "25px", margin: "5px" }}
+                      width={25}
+                      height={25}
+                      className={styles.restrictionIcon}
                     />
                   ))}
                 </div>
@@ -166,8 +181,8 @@ const BarebonesComponent = () => {
       )}
 
       {noFoodsFound && (
-        <div>
-          <h3>No foods found at this dining hall.</h3>
+        <div className={styles.noResults}>
+          <h3>No foods found.</h3>
         </div>
       )}
     </div>
diff --git a/app/locations/[location]/DH_Search/page.tsx b/app/locations/[location]/DH_Search/page.tsx
index aa39c05..66df13d 100644
--- a/app/locations/[location]/DH_Search/page.tsx
+++ b/app/locations/[location]/DH_Search/page.tsx
@@ -1,23 +1,53 @@
 "use client";
 import { useEffect, useState } from "react";
 import Image from "next/image";
+import Link from "next/link";
 
 import { fetchLocations } from "@/app/db";
-
 import { Location, Food } from "@/interfaces/Location";
-import Link from "next/link";
 
 interface FoodWithCategory {
   food: Food;
   category: string;
 }
 
+
+// Map of restriction images
+const restrictionImageMap: { [key: string]: string } = {
+  eggs: "/Images/egg.jpg",
+  vegan: "/Images/vegan.jpg",
+  fish: "/Images/fish.jpg",
+  veggie: "/Images/veggie.jpg",
+  gluten: "/Images/gluten.jpg",
+  pork: "/Images/pork.jpg",
+  milk: "/Images/milk.jpg",
+  beef: "/Images/beef.jpg",
+  nuts: "/Images/nuts.jpg",
+  halal: "/Images/halal.jpg",
+  soy: "/Images/soy.jpg",
+  shellfish: "/Images/shellfish.jpg",
+  treenut: "/Images/treenut.jpg",
+  sesame: "/Images/sesame.jpg",
+  alcohol: "/Images/alcohol.jpg",
+};
+
+
 export default function Page({ params }: { params: { location: number } }) {
   const [location, setLocation] = useState<Location | null>(null);
   const [foods, setFoods] = useState<FoodWithCategory[]>([]);
   const [searchInput, setSearchInput] = useState<string>("");
   const [foundFoods, setFoundFoods] = useState<FoodWithCategory[]>([]);
 
+  const [selectedRestrictions, setSelectedRestrictions] = useState<string[]>(
+    () => {
+      const storedRestrictions = localStorage.getItem("selectedRestrictions");
+      return storedRestrictions ? JSON.parse(storedRestrictions) : [];
+    }
+  );
+  const [isFilterPopupOpen, setIsFilterPopupOpen] = useState<boolean>(false);
+  const [filterApplied, setFilterApplied] = useState<boolean>(false);
+
+
   useEffect(() => {
     fetchLocations().then((locations: Location[]) => {
       if (params.location < 0 || params.location >= locations.length) {
@@ -42,49 +72,129 @@ export default function Page({ params }: { params: { location: number } }) {
     return <h1>Loading...</h1>;
   }
 
-  // const filterFoods = (foods: Food[], filters: IDK (a list of restriction that will be filtered) ) => {};
 
   const searchForFood = (food_name: string) => {
-    // search for food
-    let foundFoods = foods.filter((foodWithCategory) =>
-      foodWithCategory.food.name.toLowerCase().includes(food_name.toLowerCase())
+    const foundFoods = foods.filter((foodWithCategory) =>
+      foodWithCategory.food.name
+        .toLowerCase()
+        .includes(food_name.toLowerCase())
     );
 
-    // get the filters from local storage
-    // const filters = localStorage.getItem("filters"); // IDK or something like that
+    const filteredFoods = foundFoods.filter(({ food }) =>
+      selectedRestrictions.every((restriction) =>
+        food.restrictions.includes(restriction)
+      )
+    );
 
-    // apply filters
-    // foundFoods = filterFoods(foundFoods, filters);
+    setFoundFoods(filteredFoods);
+  };
+
+  const toggleFilterPopup = () => {
+    setIsFilterPopupOpen(!isFilterPopupOpen);
+  };
+
+  const handleRestrictionChange = (restriction: string, checked: boolean) => {
+    const newRestrictions = checked
+      ? [...selectedRestrictions, restriction]
+      : selectedRestrictions.filter((r) => r !== restriction);
+    setSelectedRestrictions(newRestrictions);
+    localStorage.setItem(
+      "selectedRestrictions",
+      JSON.stringify(newRestrictions)
+    );
+  };
+
+  const applyFilter = () => {
+    setFilterApplied(true);
+    searchForFood(searchInput);
+    toggleFilterPopup();
 
-    setFoundFoods(foundFoods);
   };
 
   return (
     <main>
       <div className="container mx-auto">
-        <div className="flex flex-row justify-between items-center">
+
+        <div className="flex flex-col items-center">
+
           <h1 className="font-semibold py-5 text-4xl text-[#003C6C]">
             {location.name}
           </h1>
         </div>
 
-        <div className="search-bar flex justify-center items-center mb-5">
-          <input
-            type="text"
-            placeholder="Search foods..."
-            className="border border-gray-400 p-2 rounded"
-            onChange={(e) => setSearchInput(e.target.value)}
-          />
+
+        <div className="flex flex-col items-center mb-5">
+          <div className="search-bar flex justify-center items-center mb-2">
+            <input
+              type="text"
+              placeholder="Search foods..."
+              className="border border-gray-400 p-2 rounded"
+              onChange={(e) => setSearchInput(e.target.value)}
+            />
+            <button
+              onClick={() => searchForFood(searchInput)}
+              className="ml-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+              Search
+            </button>
+          </div>
           <button
-            onClick={() => searchForFood(searchInput)}
-            className="ml-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            onClick={toggleFilterPopup}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
           >
-            Search
+            Filter
           </button>
         </div>
 
+        {isFilterPopupOpen && (
+          <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center">
+            <div className="bg-white p-5 rounded-lg shadow-lg">
+              <h2 className="font-semibold text-xl mb-4">Filter by Restrictions</h2>
+              <div className="flex flex-wrap">
+                {Object.keys(restrictionImageMap).map((restriction) => (
+                  <div key={restriction} className="flex items-center mr-4 mb-2">
+                    <input
+                      type="checkbox"
+                      id={restriction}
+                      className="mr-2"
+                      checked={selectedRestrictions.includes(restriction)}
+                      onChange={(e) =>
+                        handleRestrictionChange(restriction, e.target.checked)
+                      }
+                    />
+                    <label htmlFor={restriction} className="flex items-center">
+                      <Image
+                        src={restrictionImageMap[restriction]}
+                        alt={restriction}
+                        width={25}
+                        height={25}
+                      />
+                      <span className="ml-1">{restriction}</span>
+                    </label>
+                  </div>
+                ))}
+              </div>
+              <button
+                onClick={applyFilter}
+                className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+              >
+                Apply
+              </button>
+              <button
+                onClick={toggleFilterPopup}
+                className="mt-4 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+
         <div>
-          {foundFoods.length > 0 &&
+          {filterApplied && foundFoods.length === 0 ? (
+            <p>No foods found with the specified allergy constraints</p>
+          ) : (
+
             foundFoods.map((foodWithCategory, index) => (
               <div
                 key={index}
@@ -104,7 +214,10 @@ export default function Page({ params }: { params: { location: number } }) {
                     (restriction, index) => (
                       <li key={index} className="px-2">
                         <Image
-                          src={`/images/restrictions/${restriction}.jpg`}
+
+                          src={restrictionImageMap[restriction]}
+
+                          
                           alt={restriction}
                           width={25}
                           height={25}
@@ -114,9 +227,355 @@ export default function Page({ params }: { params: { location: number } }) {
                   )}
                 </ul>
               </div>
-            ))}
+
+            ))
+          )}
+
         </div>
       </div>
     </main>
   );
 }
+
+
+
+
+
+
+
+
+
+//
+
+
+// const HelloWorld: React.FC = () => {
+//   const [filteredFoods, setFilteredFoods] = useState<
+//     { food: Food; dhName: string; categoryName: string }[]
+//   >([]);
+//   const [showSearchResults, setShowSearchResults] = useState<boolean>(false);
+//   const [noFoodsFound, setNoFoodsFound] = useState<boolean>(false);
+//   const [diningHall, setDiningHall] = useState<string | null>(null);
+//   const [searchInput, setSearchInput] = useState<string>("");
+//   const [searchResults, setSearchResults] = useState<any[]>([]);
+
+//   // Retrieve the dining hall name from localStorage when the component mounts
+//   useEffect(() => {
+//     const storedDiningHall = localStorage.getItem("diningHall");
+//     setDiningHall(storedDiningHall);
+//   }, []);
+
+//   // Handle search logic
+//   const handleSearch = () => {
+//     const currentDiningHallName = localStorage.getItem("diningHall");
+
+//     // Filter the dining halls to find the current one
+//     const currentDiningHall = dhs.find(
+//       (dh) => dh.name === currentDiningHallName
+//     );
+
+//     if (currentDiningHall) {
+//       const allFoods: { food: Food; dhName: string; categoryName: string }[] =
+//         [];
+
+//       // Collect all foods from the current dining hall only
+//       currentDiningHall.categories.forEach((category) => {
+//         category.sub_categories.forEach((subCategory) => {
+//           subCategory.foods.forEach((food) => {
+//             allFoods.push({
+//               food,
+//               dhName: currentDiningHall.name,
+//               categoryName: category.name,
+//             });
+//           });
+//         });
+//       });
+
+//       // Filter the collected foods based on the search input
+//       const filtered = allFoods.filter(({ food }) =>
+//         food.name.toLowerCase().includes(searchInput.toLowerCase())
+//       );
+
+//       // Check if all boxes are unchecked
+//       const allBoxesUnchecked =
+//         selectedShowAllergies.length === 0 &&
+//         selectedHideAllergies.length === 0;
+
+//       let finalFilteredFoods = filtered;
+//       if (!allBoxesUnchecked) {
+//         // Filter foods based on selectedShowAllergies and selectedHideAllergies
+//         finalFilteredFoods = filtered.filter(({ food }) => {
+//           const hasShowAllergy =
+//             selectedShowAllergies.length === 0 ||
+//             selectedShowAllergies.every((allergy) =>
+//               food.name.toLowerCase().includes(allergy.toLowerCase())
+//             );
+//           const hasHideAllergy = selectedHideAllergies.some(
+//             (allergy) => food.restrictions.includes(allergy.toLowerCase()) // Check if food's restrictions include the hide allergy
+//           );
+//           return hasShowAllergy && !hasHideAllergy;
+//         });
+//       }
+
+//       // Update the state based on the search results
+//       setNoFoodsFound(finalFilteredFoods.length === 0);
+//       setFilteredFoods(finalFilteredFoods);
+//       setShowSearchResults(true);
+//     } else {
+//       // Handle case where the current dining hall is not found
+//       setFilteredFoods([]);
+//       setShowSearchResults(false);
+//       setNoFoodsFound(true);
+//     }
+//   };
+
+//   return (
+//     <div className="container mx-auto">
+//       <h1 className="font-semibold py-5 text-4xl text-[#003C6C]">
+//         {diningHall ? diningHall : "Dining Hall not found"}
+//       </h1>
+//       <div className="search-bar flex justify-center items-center mb-5">
+//         <input
+//           type="text"
+//           placeholder="Search dining halls..."
+//           value={searchInput}
+//           onChange={(e) => setSearchInput(e.target.value)}
+//           className="border border-gray-400 p-2 rounded"
+//         />
+//         <button
+//           onClick={handleSearch}
+//           className="ml-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+//         >
+//           Search
+//         </button>
+//       </div>
+//       {searchResults.length > 0 && (
+//         <div className="search-results">
+//           <h2>{searchResults[0].categoryName}:</h2>
+//           <ul>
+//             {searchResults.map((food: any, index: number) => (
+//               <li key={index}>
+//                 <div style={{ display: "flex", alignItems: "center" }}>
+//                   <span>
+//                     {food.name} - {food.categoryName} ({diningHall})
+//                   </span>
+//                   <div
+//                     style={{
+//                       display: "flex",
+//                       flexWrap: "nowrap",
+//                       marginLeft: "10px",
+//                     }}
+//                   >
+//                     {food.restrictions.map(
+//                       (restriction: string, index: number) => (
+//                         <Image
+//                           key={index}
+//                           src={restrictionImageMap[restriction]}
+//                           alt={restriction}
+//                           style={{
+//                             width: "25px",
+//                             height: "25px",
+//                             margin: "5px",
+//                           }}
+//                         />
+//                       )
+//                     )}
+//                   </div>
+//                 </div>
+//               </li>
+//             ))}
+//           </ul>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// const BarebonesComponent: React.FC = () => {
+//   const [dhs, setDhs] = useState<Location[]>([]);
+//   const [searchInput, setSearchInput] = useState<string>("");
+//   const [filteredFoods, setFilteredFoods] = useState<
+//     { food: Food; dhName: string; categoryName: string }[]
+//   >([]);
+//   const [showSearchResults, setShowSearchResults] = useState<boolean>(false);
+//   const [noFoodsFound, setNoFoodsFound] = useState<boolean>(false);
+
+//   // Retrieve hide and show allergies from local storage
+//   const [selectedHideAllergies, setSelectedHideAllergies] = useState<string[]>(
+//     () => {
+//       const storedHideAllergies = localStorage.getItem("hideAllergies");
+//       return storedHideAllergies ? JSON.parse(storedHideAllergies) : [];
+//     }
+//   );
+
+//   const [selectedShowAllergies, setSelectedShowAllergies] = useState<string[]>(
+//     () => {
+//       const storedShowAllergies = localStorage.getItem("showAllergies");
+//       return storedShowAllergies ? JSON.parse(storedShowAllergies) : [];
+//     }
+//   );
+
+//   // Fetch dining hall data from the API when the component mounts
+//   useInsertionEffect(() => {
+//     fetchLocations().then((locations: Location[]) => {
+//       setDhs(locations);
+//     });
+//   }, []);
+
+//   // Handle search input change
+//   const handleSearchInputChange = (
+//     event: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     setSearchInput(event.target.value);
+//   };
+
+//   // Handle filter button click
+//   const handleFilter = () => {
+//     window.location.href = "Filter-Window";
+//   };
+
+//   // Handle search logic
+//   const handleSearch = () => {
+//     const currentDiningHallName = localStorage.getItem("diningHall");
+
+//     // Filter the dining halls to find the current one
+//     const currentDiningHall = dhs.find(
+//       (dh) => dh.name === currentDiningHallName
+//     );
+
+//     if (currentDiningHall) {
+//       const allFoods: { food: Food; dhName: string; categoryName: string }[] =
+//         [];
+
+//       // Collect all foods from the current dining hall only
+//       currentDiningHall.categories.forEach((category) => {
+//         category.sub_categories.forEach((subCategory) => {
+//           subCategory.foods.forEach((food) => {
+//             allFoods.push({
+//               food,
+//               dhName: currentDiningHall.name,
+//               categoryName: category.name,
+//             });
+//           });
+//         });
+//       });
+
+//       // Filter the collected foods based on the search input
+//       const filtered = allFoods.filter(({ food }) =>
+//         food.name.toLowerCase().includes(searchInput.toLowerCase())
+//       );
+
+//       // Check if all boxes are unchecked
+//       const allBoxesUnchecked =
+//         selectedShowAllergies.length === 0 &&
+//         selectedHideAllergies.length === 0;
+
+//       let finalFilteredFoods = filtered;
+//       if (!allBoxesUnchecked) {
+//         // Filter foods based on selectedShowAllergies and selectedHideAllergies
+//         finalFilteredFoods = filtered.filter(({ food }) => {
+//           const hasShowAllergy =
+//             selectedShowAllergies.length === 0 ||
+//             selectedShowAllergies.every((allergy) =>
+//               food.name.toLowerCase().includes(allergy.toLowerCase())
+//             );
+//           const hasHideAllergy = selectedHideAllergies.some(
+//             (allergy) => food.restrictions.includes(allergy.toLowerCase()) // Check if food's restrictions include the hide allergy
+//           );
+//           return hasShowAllergy && !hasHideAllergy;
+//         });
+//       }
+
+//       // Update the state based on the search results
+//       setNoFoodsFound(finalFilteredFoods.length === 0);
+//       setFilteredFoods(finalFilteredFoods);
+//       setShowSearchResults(true);
+//     } else {
+//       // Handle case where the current dining hall is not found
+//       setFilteredFoods([]);
+//       setShowSearchResults(false);
+//       setNoFoodsFound(true);
+//     }
+//   };
+
+//   return (
+//     <div
+//       style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+//     >
+//       {/* Title and Search bar */}
+//       <div
+//         style={{
+//           display: "flex",
+//           flexDirection: "column",
+//           alignItems: "center",
+//           marginBottom: "20px",
+//         }}
+//       >
+//         <h1 className={`${styles.filterText} ${styles.filterTopLeft}`}>
+//           {localStorage.getItem("diningHall")}
+//         </h1>
+
+//         <div
+//           className="search-bar"
+//           style={{ marginTop: "100px", display: "flex", alignItems: "center" }}
+//         >
+//           <input
+//             type="text"
+//             placeholder="Search foods..."
+//             value={searchInput}
+//             onChange={handleSearchInputChange}
+//           />
+//           <button onClick={handleSearch}>Search</button>
+//           {/* Filter button */}
+//           <div
+//             style={{
+//               marginLeft: "10px",
+//               padding: "10px 20px",
+//               backgroundColor: "#4CAF50",
+//               color: "white",
+//               cursor: "pointer",
+//               borderRadius: "5px",
+//             }}
+//             onClick={handleFilter}
+//           >
+//             Filter
+//           </div>
+//         </div>
+//       </div>
+
+//       {/* Display search results if button clicked */}
+//       {showSearchResults && (
+//         <div>
+//           <h3>Search Results:</h3>
+//           <ul>
+//             {filteredFoods.map(({ food, dhName, categoryName }, index) => (
+//               <li key={index}>
+//                 {food.name} - {categoryName} ({dhName})
+//                 <div style={{ display: "flex", flexWrap: "nowrap" }}>
+//                   {food.restrictions.map((restriction, index) => (
+//                     <Image
+//                       key={index}
+//                       src={restrictionImageMap[restriction]}
+//                       alt={restriction}
+//                       style={{ width: "25px", height: "25px", margin: "5px" }}
+//                     />
+//                   ))}
+//                 </div>
+//               </li>
+//             ))}
+//           </ul>
+//         </div>
+//       )}
+
+//       {noFoodsFound && (
+//         <div>
+//           <h3>No foods found at this dining hall.</h3>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default BarebonesComponent;
+
+// import Link from "next/link";
+
diff --git a/db.sqlite3 b/db.sqlite3
index 01261e4..21e0d33 100644
Binary files a/db.sqlite3 and b/db.sqlite3 differ