diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index ef67fc7..d4f7ff8 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -2,10 +2,6 @@
 import { ref } from "vue";
 
 const showSearch = ref(false);
-
-const toggleSearch = () => {
-  showSearch.value = !showSearch.value;
-};
 </script>
 
 <template>
@@ -22,13 +18,16 @@ const toggleSearch = () => {
       <template v-slot:append class="align-center justify-center">
         <v-btn icon="mdi-heart"></v-btn>
 
-        <v-btn icon="mdi-magnify" @click="toggleSearch"> </v-btn>
+        <!---------------->
+        <!-- Search Bar -->
+        <!---------------->
+        <v-btn icon="mdi-magnify" @click="showSearch = !showSearch"> </v-btn>
 
         <v-slide-x-reverse-transition hide-on-leave>
           <v-responsive v-show="showSearch" min-width="20vw">
             <v-text-field
               variant="solo-filled"
-              class="search-bar w-100 justify-center align-center"
+              class="w-100 justify-center align-center"
               label="Search"
               clearable
             ></v-text-field>