diff --git a/src/assets/Angle-left.svg b/src/assets/Angle-left.svg
new file mode 100644
index 0000000..18c3146
--- /dev/null
+++ b/src/assets/Angle-left.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.4142 13.4142C32.1953 12.6332 32.1953 11.3668 31.4142 10.5858C30.6332 9.80474 29.3668 9.80474 28.5858 10.5858L16.5858 22.5858C15.8286 23.3429 15.8021 24.5621 16.5257 25.3514L27.5257 37.3514C28.2721 38.1657 29.5372 38.2207 30.3515 37.4743C31.1657 36.7279 31.2207 35.4628 30.4743 34.6486L20.7683 24.0602L31.4142 13.4142Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index a46a259..63d360e 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -31,7 +31,6 @@ export default {
     const router = useRouter();
 
     const navigateToArtDetail = (artworkId) => {
-      console.log(artworkId);
       router.push({ name: "ArtDetail", params: { id: artworkId } });
     };
 
diff --git a/src/components/SearchOverlay.vue b/src/components/SearchOverlay.vue
index ae4c4e9..759e534 100644
--- a/src/components/SearchOverlay.vue
+++ b/src/components/SearchOverlay.vue
@@ -4,16 +4,29 @@
       <div
         class="bg-neutral-950/50 backdrop fixed inset-0 flex flex-col gap-8 items-center justify-center z-[10] sm:px-8 px-8 md:px-16 lg:px-32 xl:px-64"
       >
+        <button
+          alt="Close"
+          @click="closeButtonClicked"
+          class="bg-[#b50938] text-white hover:bg-[#810032] absolute top-4 right-4 size-14 my-auto rounded-full transition-all p-4"
+        >
+          <img
+            src="../assets/close-menu.svg"
+            alt="Search"
+            class="h-full mx-auto my-auto object-contain rounded-l-sm"
+          />
+        </button>
         <!-- SEARCH -->
         <form
+          @submit.prevent="navigateToSearchResults"
           class="flex gap-4 p-2 bg-white rounded-full glass-shadow border border-neutral-100 w-full"
         >
           <div class="flex flex-col w-full pl-8">
             <label for="search" class="text-sm text-neutral-950 font-semibold"
-              >Artwork</label
+              >Search Artworks</label
             >
             <input
-              placeholder="Search by name"
+              v-model="searchQuery"
+              placeholder="Search by name, artist, year, medium, or style"
               type="text"
               id="search"
               name="search"
@@ -32,19 +45,10 @@
             />
           </button>
         </form>
-        <!-- SEARCH -->
         <!-- EXHIBITIONS -->
         <div class="px-2 w-full">
           <ExhibitionBar :exhibitions="exhibitions" />
-          <!-- <div
-            class="flex gap-4 p-2 bg-white rounded-full glass-shadow border border-neutral-100 w-full"
-          >
-            <p for="search" class="text-sm text-neutral-950 font-semibold">
-              Current Exhibitions
-            </p>
-          </div> -->
         </div>
-        <!-- EXHIBITIONS -->
       </div>
     </div>
   </transition>
@@ -56,6 +60,7 @@ import axios from "axios";
 import ExhibitionBar from "./ExhibitionBar.vue";
 import "vue3-carousel/dist/carousel.css";
 import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
+import { useRouter } from "vue-router";
 
 export default {
   components: {
@@ -68,10 +73,18 @@ export default {
   props: {
     showSearchOverlay: Boolean,
   },
+  methods: {
+    closeButtonClicked() {
+      this.$emit("close-button-clicked");
+    },
+  },
+
   setup(props) {
+    const router = useRouter();
     const exhibitionPage = ref(1);
     const loadingExhibitions = ref(true);
     const exhibitions = ref([]);
+    const searchQuery = ref("");
     const fetchExhibitions = async () => {
       loadingExhibitions.value = true;
       try {
@@ -117,6 +130,13 @@ export default {
       }
     };
 
+    const navigateToSearchResults = () => {
+      console.log("searchQuery.value", searchQuery.value);
+      if (searchQuery.value.trim()) {
+        router.push({ name: "SearchResults", query: { q: searchQuery.value } });
+      }
+    };
+
     watchEffect(() => {
       if (props.showSearchOverlay && exhibitions.value.length === 0) {
         fetchExhibitions();
@@ -127,6 +147,8 @@ export default {
     return {
       loadingExhibitions,
       exhibitions,
+      navigateToSearchResults,
+      searchQuery,
     };
   },
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index 5c85a54..f1d96ee 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import ArtDetail from "@/views/ArtDetail.vue";
+
+import SearchResults from "../views/SearchResults.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -23,6 +24,11 @@ const router = createRouter({
       name: "ArtDetail",
       component: () => import("@/views/ArtDetail.vue"),
     },
+    {
+      path: "/search",
+      name: "SearchResults",
+      component: SearchResults,
+    },
   ],
 });
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e76986e..1897275 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -36,7 +36,10 @@
         />
 
         <Gallery :artworks="artworks" @load-more="loadMoreArtworks" />
-        <SearchOverlay :showSearchOverlay="showSearchOverlay" />
+        <SearchOverlay
+          :showSearchOverlay="showSearchOverlay"
+          @close-button-clicked="showSearchOverlay = !showSearchOverlay"
+        />
         <AboutOverlay
           @close-button-clicked="showAboutOverlay = !showAboutOverlay"
           :showAboutOverlay="showAboutOverlay"
diff --git a/src/views/SearchResults.vue b/src/views/SearchResults.vue
new file mode 100644
index 0000000..bb3b599
--- /dev/null
+++ b/src/views/SearchResults.vue
@@ -0,0 +1,303 @@
+<template>
+  <div
+    class="backdrop absolute w-full mt-8 flex gap-8 items-center justify-center z-[10] sm:px-8 px-8 md:px-16 lg:px-32 xl:px-64"
+  >
+    <button
+      alt="Close"
+      @click="goBackToHome"
+      class="bg-white text-black hover:bg-neutral-200 glass-effect py-4 px-8 flex my-auto rounded-full transition-all p-4"
+    >
+      <img
+        src="../assets/Angle-left.svg"
+        alt="Search"
+        class="h-full size-6 mx-auto my-auto text-black object-contain rounded-l-sm"
+      />
+      <span class="my-auto"> Back </span>
+    </button>
+    <!-- SEARCH -->
+    <form
+      @submit.prevent="performNewSearch"
+      class="flex gap-4 p-2 bg-white rounded-full glass-effect w-full"
+    >
+      <div class="flex flex-col w-full pl-8">
+        <label for="search" class="text-sm text-neutral-950 font-semibold"
+          >Search Artworks</label
+        >
+        <input
+          v-model="newSearchQuery"
+          placeholder="Search by name, artist, year, medium, or style"
+          type="text"
+          id="search"
+          name="search"
+          class="border-0 border-b focus:border-b-2 outline-none border-neutral-500 transition-all h-10"
+        />
+      </div>
+      <button
+        alt="Search"
+        type="submit"
+        class="bg-[#b50938] text-white hover:bg-[#810032] size-14 my-auto rounded-full transition-all p-4"
+      >
+        <img
+          src="../assets/search.svg"
+          alt="Search"
+          class="h-5 mx-auto my-auto object-contain rounded-l-sm"
+        />
+      </button>
+    </form>
+  </div>
+  <div class="masonry-container bg-neutral-100 pt-32">
+    <div class="masonry-column" v-for="i in columnCount" :key="i">
+      <transition-group name="fade-slide-up" tag="div">
+        <div
+          v-for="artwork in getColumnArtworks(i)"
+          :key="artwork.id"
+          class="masonry-item hover:shadow-lg transition-all cursor-pointer"
+          @click="navigateToArtDetail(artwork.id)"
+        >
+          <img
+            :src="artwork.image_url"
+            :alt="artwork.title"
+            v-if="artwork.image_url"
+          />
+          <div class="artwork-info">
+            <h2>{{ artwork.title }}</h2>
+            <p>Artist: {{ artwork.artist_title }}</p>
+          </div>
+        </div>
+      </transition-group>
+    </div>
+    <div ref="bottom" class="bottom-detector"></div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed, watch, onBeforeUnmount } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import axios from "axios";
+
+export default {
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const artworks = ref([]);
+    const page = ref(1);
+    const loading = ref(false);
+    const uniqueArtworkIds = new Set();
+    const columnCount = ref(3);
+    const observer = ref(null);
+    const newSearchQuery = ref("");
+
+    const searchQuery = computed(() => route.query.q || "");
+
+    const performSearch = async () => {
+      if (loading.value) return;
+      loading.value = true;
+      try {
+        const response = await axios.get(
+          "https://api.artic.edu/api/v1/artworks/search",
+          {
+            params: {
+              q: searchQuery.value,
+              fields:
+                "id,title,artist_title,image_id,date_display,medium_display,style_titles",
+              limit: 20,
+              page: page.value,
+            },
+          }
+        );
+
+        const newArtworks = response.data.data
+          .filter(
+            (artwork) => !uniqueArtworkIds.has(artwork.id) && artwork.image_id
+          )
+          .map((artwork) => {
+            uniqueArtworkIds.add(artwork.id);
+            return {
+              ...artwork,
+              image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
+            };
+          });
+
+        artworks.value = [...artworks.value, ...newArtworks];
+        page.value++;
+      } catch (error) {
+        console.error("Error performing search:", error);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    const performNewSearch = () => {
+      if (newSearchQuery.value.trim()) {
+        router.push({
+          name: "SearchResults",
+          query: { q: newSearchQuery.value },
+        });
+      }
+    };
+
+    const goBackToHome = () => {
+      router.push({ name: "home" }); // Assuming 'Home' is the name of your root route
+    };
+
+    const getColumnArtworks = (columnIndex) => {
+      return artworks.value.filter(
+        (_, index) => index % columnCount.value === columnIndex - 1
+      );
+    };
+
+    const navigateToArtDetail = (artworkId) => {
+      router.push({ name: "ArtDetail", params: { id: artworkId } });
+    };
+
+    const setupInfiniteScroll = () => {
+      observer.value = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && !loading.value) {
+            performSearch();
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      if (document.querySelector(".bottom-detector")) {
+        observer.value.observe(document.querySelector(".bottom-detector"));
+      }
+    };
+
+    const updateColumnCount = () => {
+      if (window.innerWidth >= 1200) {
+        columnCount.value = 3;
+      } else if (window.innerWidth >= 768) {
+        columnCount.value = 2;
+      } else {
+        columnCount.value = 1;
+      }
+    };
+
+    onMounted(() => {
+      performSearch();
+      updateColumnCount();
+      window.addEventListener("resize", updateColumnCount);
+      setupInfiniteScroll();
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", updateColumnCount);
+      if (observer.value) {
+        observer.value.disconnect();
+      }
+    });
+
+    watch(searchQuery, () => {
+      artworks.value = [];
+      uniqueArtworkIds.clear();
+      page.value = 1;
+      newSearchQuery.value = searchQuery.value;
+      performSearch();
+    });
+    return {
+      artworks,
+      columnCount,
+      getColumnArtworks,
+      navigateToArtDetail,
+      newSearchQuery,
+      performNewSearch,
+      goBackToHome,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.masonry-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -10px;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.masonry-column {
+  flex: 1;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  .masonry-column {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .masonry-column {
+    flex-basis: 33.333%;
+  }
+}
+
+.masonry-item {
+  break-inside: avoid;
+  background: white;
+  padding-left: 4rem;
+  padding-top: 4rem;
+  padding-right: 4rem;
+  padding-bottom: 1rem;
+  border-radius: 0px;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.masonry-item img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.artwork-info {
+  padding: 1rem;
+}
+
+.masonry-item h2 {
+  font-size: 1em;
+  margin: 0 0 5px;
+}
+
+.masonry-item p {
+  font-size: 0.8em;
+  margin: 0;
+}
+
+.bottom-detector {
+  width: 100%;
+  height: 20px;
+  clear: both;
+}
+
+@keyframes fadeSlideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-slide-up-enter-active,
+.fade-slide-up-leave-active {
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+}
+
+.fade-slide-up-enter-from,
+.fade-slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-slide-up-move {
+  transition: transform 0.5s ease;
+}
+</style>