diff --git a/src/assets/search.white.svg b/src/assets/search.white.svg
new file mode 100644
index 0000000..13dd458
--- /dev/null
+++ b/src/assets/search.white.svg
@@ -0,0 +1,4 @@
+<svg width="68" height="72" viewBox="0 0 68 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.3664 53.538C41.721 51.8927 41.721 49.225 43.3664 47.5796C45.0117 45.9342 47.6794 45.9342 49.3248 47.5796L66.1777 64.4326C67.8231 66.0779 67.8231 68.7456 66.1777 70.391C64.5323 72.0363 61.8647 72.0363 60.2193 70.391L43.3664 53.538Z" fill="#ffffff"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 29.4926C0 45.781 13.2043 58.9853 29.4926 58.9853C45.781 58.9853 58.9853 45.781 58.9853 29.4926C58.9853 13.2043 45.781 0 29.4926 0C13.2043 0 0 13.2043 0 29.4926ZM50.5588 29.4926C50.5588 41.1272 41.1272 50.5588 29.4926 50.5588C17.8581 50.5588 8.42647 41.1272 8.42647 29.4926C8.42647 17.8581 17.8581 8.42647 29.4926 8.42647C41.1272 8.42647 50.5588 17.8581 50.5588 29.4926Z" fill="#ffffff"/>
+</svg>
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 6c0812c..0bc0405 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -68,6 +68,7 @@ export default {
   margin-bottom: 3rem;
   display: inline-block;
   width: 100%;
+  z-index: 1;
 }
 
 @media (max-width: 1600px) {
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index bee8b31..d5c97f3 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Desktop Navigation -->
   <nav
-    class="hidden z-10 lg:flex justify-between text-black fixed xl:bottom-20 xl:left-24 xl:border-0 xl:w-full w-full bottom-16 left-4 rounded-sm"
+    class="hidden z-20 lg:flex justify-between text-black fixed xl:bottom-20 xl:left-24 xl:border-0 xl:w-full w-full bottom-16 left-4 rounded-sm"
   >
     <div class="bg-white flex shadow-lg">
       <a href="/">
@@ -26,17 +26,19 @@
     </div>
     <div class="flex">
       <div
-        class="w-full bg-white border-neutral-200 border justify-between mr-8 rounded-sm xl:mr-32 flex shadow-lg"
+        class="w-full bg-white border-neutral-200 hover:bg-neutral-200 transition-all border justify-between mr-8 rounded-sm xl:mr-32 flex shadow-lg"
       >
-        <a
-          class="my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 p-6 object-center xl:size-24 size-24 text-center flex content-center transition-all"
+        <button
+          @click="buttonClicked"
+          class="my-auto mx-auto font-semibold text-sm lg:text-lg p-6 object-center xl:size-24 size-24 text-center flex content-center"
           href="/about"
         >
           <img
             src="../assets/search-black.svg"
             alt="Art Institute Chicago"
             class="h-5 mx-auto my-auto object-contain rounded-l-sm"
-        /></a>
+          />
+        </button>
       </div>
     </div>
   </nav>
@@ -70,7 +72,8 @@
         >
       </div>
 
-      <a
+      <button
+        @click="buttonClicked"
         class="my-auto mx-auto font-semibold border-l-0 border border-neutral-200 h-full text-sm lg:text-lg object-center rounded-r-sm w-32 text-center flex content-center"
         href="/about"
       >
@@ -78,10 +81,21 @@
           src="../assets/search-black.svg"
           alt="Search"
           class="h-4 mx-auto my-auto object-contain rounded-l-sm"
-      /></a>
+        />
+      </button>
     </div>
     <!-- <div class="flex w-24 mr-8">
       
     </div> -->
   </nav>
 </template>
+
+<script>
+export default {
+  methods: {
+    buttonClicked() {
+      this.$emit("navigation-button-clicked");
+    },
+  },
+};
+</script>
diff --git a/src/components/SearchOverlay.vue b/src/components/SearchOverlay.vue
new file mode 100644
index 0000000..7b536ed
--- /dev/null
+++ b/src/components/SearchOverlay.vue
@@ -0,0 +1,62 @@
+<template>
+  <transition name="fade">
+    <div v-if="showSearchOverlay" class="search-overlay">
+      <div
+        class="bg-neutral-950/50 backdrop-blur-md fixed inset-0 flex items-center justify-center z-[9999]"
+      >
+        <form
+          class="flex gap-4 p-2 bg-white rounded-full shadow-lg border border-neutral-100 w-[900px]"
+        >
+          <div class="flex flex-col w-full pl-8">
+            <label for="search" class="text-sm text-neutral-500 font-semibold"
+              >Search</label
+            >
+            <input
+              type="text"
+              id="search"
+              name="search"
+              class="p-2 border-0 border-b focus:border-b-2 outline-none border-neutral-500 transition-all h-12"
+            />
+          </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>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    showSearchOverlay: Boolean,
+  },
+};
+</script>
+
+<style scoped>
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6080632..855bacc 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -25,10 +25,13 @@
           </div>
         </div>
       </div>
-      <div v-else key="loaded">
-        <Navigation />
+      <div v-else key="loaded" class="relative">
+        <Navigation
+          @navigation-button-clicked="showSearchOverlay = !showSearchOverlay"
+        />
 
         <Gallery :artworks="artworks" @load-more="loadMoreArtworks" />
+        <SearchOverlay :showSearchOverlay="showSearchOverlay" />
       </div>
     </transition>
   </div>
@@ -36,12 +39,18 @@
 
 <script>
 import Navigation from "../components/Navigation.vue";
+import SearchOverlay from "../components/SearchOverlay.vue";
 import Gallery from "../components/Gallery.vue";
 import axios from "axios";
 import { ref, onMounted, computed } from "vue";
 
 export default {
-  components: { Navigation, Gallery },
+  components: { Navigation, Gallery, SearchOverlay },
+  data() {
+    return {
+      showSearchOverlay: false,
+    };
+  },
   setup() {
     const number = ref(1);
     const loading = ref(true);