diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 49ab392..6dc97b1 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -1,46 +1,32 @@
-<template >
-  <v-row justify="end" class="header-component">
-    <v-col cols="auto">
-      <v-app-bar :elevation="0" color="main">
-        <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
-        <!-- <LogoSVG id="placeholderIcon"/> -->
-        <v-text-field
-          class="compact-form"
+<template>
+  <div>
+    <v-toolbar
+      color="main"
+      dark
+      prominent
+    >
+     <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" /> 
+      <v-toolbar-title>Vuetify</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-text-field
+          class="compact-form mr-2"
           label="Search"
           variant="solo"
+          density="compact"
           prepend-inner-icon="mdi-magnify"
           hide-details
           single-line
           clearable
           rounded="pill"
         ></v-text-field>
-        <!-- <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-        </v-btn> -->
-        <CircleUser id="userIcon"/>
-      </v-app-bar>
-    </v-col>
-  </v-row>
+    </v-toolbar>
+  </div>
+  
 </template>
 
 <script setup lang="ts">
-
-
 </script>
 
 <style scoped>
 
-.compact-form {
-    transform: scale(0.7);
-    transform-origin: left;
-}
-
-#placeholderIcon {
-  margin-right: 20%;
-  margin-left: 10px;
-}
-
-#userIcon {
-  margin-right: 15px;
-}
 </style>