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 2caa78e..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,11 +1,42 @@
 <template>
   <v-app>
-    <v-main>
-      <router-view />
-    </v-main>
+      <v-main>
+          <NavBar />
+          <router-view />
+      </v-main>
   </v-app>
 </template>
 
-<script setup>
-  //
+<script>
+ import NavBar from './components/NavBar.vue';
+
+ export default {
+   name: 'App',
+   components: {
+     NavBar,
+   },
+ }
 </script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+nav {
+  padding: 30px;
+}
+
+nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
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>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
index df7005c..e8566c7 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
@@ -1,17 +1,4 @@
 <template>
-  <v-app>
-    <v-navigation-drawer app>
-      <v-list>
-        <v-list-item v-for="item in menuItems" :key="item.title" @click="navigate(item.route)">
-          <v-list-item-title>{{ item.title }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-app-bar app>
-      <v-toolbar-title>Compra</v-toolbar-title>
-    </v-app-bar>
-    <v-main>
     <v-container>
       <v-form ref="form" v-model="valid">
         <div class="d-flex mb-4">
@@ -109,8 +96,6 @@
         <v-btn @click="submit" color="green">Comprar</v-btn>
       </v-form>
     </v-container>
-    </v-main>
-  </v-app>
 </template>
 
 <script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue
index b0efda0..124c4fe 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-  //
+//
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js
index 5d4b8bc..4e2db62 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js
@@ -1,3 +1,4 @@
+
 /**
  * router/index.ts
  *