diff --git a/app/db.ts b/app/db.ts
index 3e77c80..10a6525 100644
--- a/app/db.ts
+++ b/app/db.ts
@@ -1,41 +1,21 @@
+import axios from "axios";
+
 import { Location } from "@/interfaces/Location";
 import { FrontEndReviews } from "@/interfaces/Review";
 
 const backend = "http://localhost:8000";
 
 export async function fetchLocations(): Promise<Location[]> {
-  const res = await fetch("http://localhost:8000/api/locations", {
-    method: "GET",
-    next: {
-      revalidate: 1800, // every 30 minutes
-    },
-    mode: "cors",
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-  });
-  const data: { locations: Location[] } = await res.json();
-  return data.locations;
+  const res = await axios.get(`${backend}/api/locations`);
+  return res.data.locations;
 }
 
 export async function fetchFoodReviewsBulk(data: {
   food_names: string[];
   user_id: string | null;
 }): Promise<FrontEndReviews> {
-  const res = await fetch("http://localhost:8000/api/get_ratings_bulk/", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "Access-Control-Allow-Origin": "*",
-    },
-    body: JSON.stringify(data),
-    next: {
-      revalidate: 5, // every 5 seconds
-    },
-    mode: "cors",
-  });
-  const response_json = await res.json();
-  return response_json;
+  const res = await axios.post(`${backend}/api/get_ratings_bulk/`, data);
+  return res.data;
 }
 
 export async function updateReview(data: {
@@ -43,15 +23,6 @@ export async function updateReview(data: {
   user_id: string;
   food_rating: number;
 }): Promise<{ average: number | null }> {
-  const res = await fetch("http://localhost:8000/api/rating_update/", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "Access-Control-Allow-Origin": "*",
-    },
-    body: JSON.stringify(data),
-    mode: "cors",
-  });
-  const response_json = await res.json();
-  return response_json;
+  const res = await axios.post(`${backend}/api/rating_update/`, data);
+  return res.data;
 }
diff --git a/app/locations/[location]/DH_Search/page.tsx b/app/locations/[location]/DH_Search/page.tsx
index 600ba3f..6ebff92 100644
--- a/app/locations/[location]/DH_Search/page.tsx
+++ b/app/locations/[location]/DH_Search/page.tsx
@@ -1,31 +1,15 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import styles from "../Search.module.css";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 
-// Define the Food interface
-interface Food {
-  name: string;
-  restrictions: string[];
-}
-
-// Define the subCategory interface
-interface subCategory {
-  name: string;
-  foods: Array<Food>;
-}
+import { fetchLocations } from "@/app/db";
 
-// Define the Category interface
-interface Category {
-  name: string;
-  sub_categories: Array<subCategory>;
-}
+import { Location, Food } from "@/interfaces/Location";
+import Link from "next/link";
 
-// Define the DiningHall interface
-interface DiningHall {
-  name: string;
-  categories: Array<Category>;
+interface FoodWithCategory {
+  food: Food;
+  category: string;
 }
 
 // Map of restriction images
@@ -47,337 +31,438 @@ const restrictionImageMap: { [key: string]: string } = {
   alcohol: "/Images/alcohol.jpg",
 };
 
-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 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";
+
+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 [searchResults, setSearchResults] = useState<any[]>([]);
+  const [foundFoods, setFoundFoods] = useState<FoodWithCategory[]>([]);
 
-  // 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;
-        });
+    fetchLocations().then((locations: Location[]) => {
+      if (params.location < 0 || params.location >= locations.length) {
+        return <h1>Location not found</h1>;
       }
+      const location: Location = locations[params.location];
+      setLocation(location);
+
+      const foods_db = location.categories.flatMap((category) =>
+        category.sub_categories.flatMap((sub_category) =>
+          sub_category.foods.map((food) => ({
+            food: food,
+            category: category.name,
+          }))
+        )
+      );
+      setFoods(foods_db);
+    });
+  }, [params.location]);
 
-      // 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<DiningHall[]>([]);
-  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) : [];
-    },
-  );
+  if (!location || !foods) {
+    return <h1>Loading...</h1>;
+  }
 
-  // Fetch dining hall data from the API when the component mounts
-  useEffect(() => {
-    axios
-      .get("http://localhost:8000/myapi/locations/")
-      .then((response) => {
-        const dhsData: DiningHall[] = response.data.locations;
-        setDhs(dhsData);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }, []);
-
-  // 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";
-  };
+  // const filterFoods;
 
-  // 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,
+  const searchForFood = (food_name: string) => {
+    // search for food
+    const foundFoods = foods.filter((foodWithCategory) =>
+      foodWithCategory.food.name.toLowerCase().includes(food_name.toLowerCase())
     );
 
-    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;
-        });
-      }
+    // apply filters
 
-      // 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);
-    }
+    setFoundFoods(foundFoods);
   };
 
   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" }}
-        >
+    <main>
+      <div className="container mx-auto">
+        <div className="flex flex-row justify-between 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..."
-            value={searchInput}
-            onChange={handleSearchInputChange}
+            className="border border-gray-400 p-2 rounded"
+            onChange={(e) => setSearchInput(e.target.value)}
           />
-          <button onClick={handleSearch}>Search</button>
-          {/* Filter button */}
-          <div
-            style={{
-              marginLeft: "10px",
-              padding: "10px 20px",
-              backgroundColor: "#4CAF50",
-              color: "white",
-              cursor: "pointer",
-              borderRadius: "5px",
-            }}
-            onClick={handleFilter}
+          <button
+            onClick={() => searchForFood(searchInput)}
+            className="ml-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
           >
-            Filter
-          </div>
+            Search
+          </button>
         </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) => (
-                    <img
-                      key={index}
-                      src={restrictionImageMap[restriction]}
-                      alt={restriction}
-                      style={{ width: "25px", height: "25px", margin: "5px" }}
-                    />
-                  ))}
-                </div>
-              </li>
+          {foundFoods.length > 0 &&
+            foundFoods.map((foodWithCategory, index) => (
+              <div
+                key={index}
+                className="flex flex-row justify-between hover:border-gray-300 hover:rounded-[2px] border-white border bg-[#F9F9F9] font-medium text-gray-700 py-1 my-1 text-sm"
+              >
+                <Link
+                  className="flex flex-row ml-3"
+                  href={`/foods/${encodeURIComponent(foodWithCategory.food.name)}`}
+                >
+                  <h4 className="px-2">{foodWithCategory.food.name}</h4>
+                  <h5 className="font-normal text-gray-400 px-2">
+                    {foodWithCategory.category}
+                  </h5>
+                </Link>
+                <ul className="flex flex-row mr-3">
+                  {foodWithCategory.food.restrictions.map(
+                    (restriction, index) => (
+                      <li key={index} className="px-2">
+                        <Image
+                          src={restrictionImageMap[restriction]}
+                          alt={restriction}
+                          width={25}
+                          height={25}
+                        />
+                      </li>
+                    )
+                  )}
+                </ul>
+              </div>
             ))}
-          </ul>
-        </div>
-      )}
-
-      {noFoodsFound && (
-        <div>
-          <h3>No foods found at this dining hall.</h3>
         </div>
-      )}
-    </div>
+      </div>
+    </main>
   );
-};
-
-export default BarebonesComponent;
+}
diff --git a/interfaces/Location.ts b/interfaces/Location.ts
index 54a1da2..5d2fa41 100644
--- a/interfaces/Location.ts
+++ b/interfaces/Location.ts
@@ -1,14 +1,14 @@
-interface Food {
+export interface Food {
   name: string;
   restrictions: Array<string>;
 }
 
-interface subCategory {
+export interface subCategory {
   name: string;
   foods: Array<Food>;
 }
 
-interface Category {
+export interface Category {
   name: string;
   sub_categories: Array<subCategory>;
 }
diff --git a/package.json b/package.json
index 4836101..7b064da 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "prettier": "^3.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-router-dom": "^6.23.0"
+    "react-router-dom": "^6.23.0",
+    "supports-color": "8.1.1"
   },
   "devDependencies": {
     "@types/node": "^20",