diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
index 49901fc..5d28f51 100644
--- a/app/components/NavBar.vue
+++ b/app/components/NavBar.vue
@@ -1,15 +1,21 @@
 <template>
     <!-- Toolbar at the top of the screen -->
     <v-app-bar
-        color="rgba(27, 94, 32, 0.8)"
+        app
+        color="primary-darken-1"
+        class="text-white"
         height="48"
         v-if="status !== 'unauthenticated'"
     >
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
-            <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
+            <v-icon
+                color="info"
+                icon="mdi-apps"
+                @click="drawer = !drawer"
+            ></v-icon>
 
-            <span class="ms-1 text-white"
+            <span class="ms-1 text-warning"
                 >Listas de Front - {{ capitalize($route.name) }}</span
             >
         </v-app-bar-title>
@@ -20,13 +26,11 @@
         <!-- Menu icons on the right side of the toolbar -->
         <template v-slot:append>
             <v-btn
-                class="text-orange"
+                color="info"
                 @click="theme.toggle()"
                 text="Light / Dark"
             ></v-btn>
-            <small class="text-white"> Logout </small>
-            <v-btn icon="mdi-account" class="text-white" @click="logout">
-            </v-btn>
+            <v-btn icon="mdi-logout" color="warning" @click="logout"> </v-btn>
         </template>
     </v-app-bar>