diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
index c0f5422..163155a 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
@@ -1,7 +1,9 @@
 <template>
   <v-app>
-      <NavBar />
-      <router-view />
+      <v-main>
+          <NavBar />
+          <router-view />
+      </v-main>
   </v-app>
 </template>
 
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
new file mode 100644
index 0000000..f84e6d8
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
@@ -0,0 +1,64 @@
+<template>
+    <v-main>
+    <v-card>
+        <v-layout>
+            <v-app-bar color="primary" prominent app>
+                <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+                <v-toolbar-title>My files</v-toolbar-title>
+                <v-spacer></v-spacer>
+
+                <template v-if="$vuetify.display.mdAndUp">
+                    <v-btn icon="mdi-magnify" variant="text"></v-btn>
+                    <v-btn icon="mdi-filter" variant="text"></v-btn>
+                </template>
+                <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
+            </v-app-bar>
+
+            <v-navigation-drawer
+                v-model="drawer"
+                :location="$vuetify.display.mobile ? 'bottom' : undefined"
+                temporary>
+                <v-list :items="items"></v-list>
+      </v-navigation-drawer>
+
+      <v-main style="height: 500px;">
+          <v-card-text>
+              The navigation drawer will appear from the bottom on smaller size screens.
+          </v-card-text>
+      </v-main>
+    </v-layout>
+    </v-card>
+    </v-main>
+</template>
+<script>
+ export default {
+     data: () => ({
+         drawer: false,
+         group: null,
+         items: [
+             {
+                 title: 'Foo',
+                 value: 'foo',
+             },
+             {
+                 title: 'Bar',
+                 value: 'bar',
+             },
+             {
+                 title: 'Fizz',
+                 value: 'fizz',
+             },
+             {
+                 title: 'Buzz',
+                 value: 'buzz',
+             },
+         ],
+     }),
+
+     watch: {
+         group () {
+             this.drawer = false
+         },
+     },
+ }
+</script>