diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 7a4398e..ef67fc7 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,4 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const showSearch = ref(false);
+
+const toggleSearch = () => {
+  showSearch.value = !showSearch.value;
+};
+</script>
 
 <template>
   <v-app class="mx-5 my-3">
@@ -7,14 +15,27 @@
         <v-app-bar-nav-icon></v-app-bar-nav-icon>
       </template>
 
-      <v-app-bar-title>Application Bar</v-app-bar-title>
+      <template v-slot:default>
+        <v-app-bar-title>DocuSphere</v-app-bar-title>
+      </template>
 
-      <template v-slot:append>
+      <template v-slot:append class="align-center justify-center">
         <v-btn icon="mdi-heart"></v-btn>
 
-        <v-btn icon="mdi-magnify"></v-btn>
+        <v-btn icon="mdi-magnify" @click="toggleSearch"> </v-btn>
 
-        <v-btn icon="mdi-dots-vertical"></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"
+              label="Search"
+              clearable
+            ></v-text-field>
+          </v-responsive>
+        </v-slide-x-reverse-transition>
+
+        <v-btn icon="mdi-account" class="ml-3 mr-2"></v-btn>
       </template>
     </v-app-bar>
   </v-app>