diff --git a/src/components/Cart.vue b/src/components/Cart.vue
new file mode 100644
index 0000000..bc68127
--- /dev/null
+++ b/src/components/Cart.vue
@@ -0,0 +1,132 @@
+<template>
+    <div class="my-5">
+        <div class="container d-flex flex-wrap justify-content-between">
+            <div class="cont-resum-shop py-2 mb-4">
+                <h2 class="ml-3">Carrito</h2>
+                <hr>
+                
+                    <div class="d-flex justify-content-between mx-4 my-4">
+                        <div class="d-flex">
+                            <!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
+                            <img v-bind:src="infoResume[0].img" alt="Logo" style="height: 150px">
+                            <p class="mx-4">
+                                {{productInfo[0].descripcion}}<br><span class="price-style"><b>${{productInfo[0].precio}}</b></span>
+                            </p>
+                        </div>
+                        <div class="d-flex flex-wrap flex-column align-items-center">
+                            <div>
+                                <input type="number" class="inp-number p-1 d-inline-block" name="" id="" v-bind:value="infoResume[0].cantidad">
+                            </div>
+                            <span class="my-4"><b>${{infoResume[0].cantidad * productInfo[0].precio}}</b></span>
+                            <div>
+                                <a href="#" class="text-dark">
+                                    <font-awesome-icon icon="trash" class=""/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-flex justify-content-between mx-4 my-4">
+                        <div class="d-flex">
+                            <!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
+                            <img v-bind:src="infoResume[1].img" alt="Logo" style="height: 150px">
+                            <p class="mx-4">
+                                {{productInfo[1].descripcion}}<br><span class="price-style"><b>${{productInfo[1].precio}}</b></span>
+                            </p>
+                        </div>
+                        <div class="d-flex flex-wrap flex-column align-items-center">
+                            <div>
+                                <input type="number" class="inp-number p-1 d-inline-block" name="" id="" v-bind:value="infoResume[1].cantidad">
+                            </div>
+                            <span class="my-4"><b>${{infoResume[1].cantidad * productInfo[1].precio}}</b></span>
+                            <div>
+                                <a href="#" class="text-dark">
+                                    <font-awesome-icon icon="trash" class=""/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+
+            </div>
+            <div class="g-sec bg-light py-4 px-4 d-flex flex-column align-self-start align-items-center" style="">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">{{infoResume[0].cantidad}} Artículos<br>Envío</p>
+                    <p>${{infoResume[0].cantidad * productInfo[0].precio}}<br>{{infoResume[0].envioStatus}}</p>
+                </div>
+                <hr style="width:100%">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">Total(IVA incluido)<br>${{infoResume[0].cantidad * productInfo[0].precio}}</p>
+                </div>
+                <hr style="width:100%">
+                <button class="btn btn-primary mx-auto"><b>IR A LA CAJA</b></button>
+            </div>
+        </div>
+        <div class="container mt-3">
+            <div class="d-inline-block">
+                <a href="#">
+                    <p>
+                        Continuar la compra
+                    </p>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            productInfo: [
+                {
+                    id: 1,
+                    descripcion: 'Invitacion al psicoanálisis y lazos con la política, Lorem ipsum',
+                    precio: 10
+                },
+                 {
+                    id: 2,
+                    descripcion: 'Invitacion al derrocamiento de la burguesía, camarada.',
+                    precio: 2
+                }
+            ],
+            infoResume:[
+                    {
+                        cantidad: 4,
+                        envioStatus: 'pendiente',
+                        img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg',
+                    },
+                    {
+                        cantidad: 17,
+                        envioStatus: 'pendiente',
+                        img: 'https://images-na.ssl-images-amazon.com/images/I/51vHCno0a4L._SY291_BO1,204,203,200_QL40_ML2_.jpg',
+                    }
+                ],
+        }
+    }
+}
+</script>
+
+<style>
+.cont-resum-shop {
+    /* background-color: skyblue; */
+    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    /* border-radius: 5px; */
+    /* font-size: 15px; */
+}
+.inp-number {
+    width: 55px;
+    border-radius: 5px;
+    border: 0.3px solid lightgray;
+}
+.price-style {
+    color: #6C59FE;
+}
+.g-sec {
+    -webkit-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Directions.vue b/src/components/Directions.vue
new file mode 100644
index 0000000..1e9c6c3
--- /dev/null
+++ b/src/components/Directions.vue
@@ -0,0 +1,234 @@
+<template>
+  <div>
+
+<form class="mt-4" role="form" data-toggle="validator" >
+  
+  <div class="my-3">
+  
+  
+  <div class="row tipoComprobante">
+  <div class="form-check col-4 ">
+  <label class="form-check-label" >
+    Tipo de Comprobante:
+  </label>
+</div>
+<div class="form-check col-4">
+  <input class="form-check-input" type="radio"  id="exampleRadios1" v-model="select" value="ticket">
+  <label class="form-check-label" for="exampleRadios1">
+    Ticket
+  </label>
+</div>
+<div class="form-check col-4">
+  <input class="form-check-input" type="radio"  id="exampleRadios2" v-model="select" value="factura">
+  <label class="form-check-label" for="exampleRadios2">
+   Factura
+  </label>
+</div>
+</div>
+
+
+<div class=" datosFactura" v-if="select == 'factura'">
+    <h3 class="my-5">Direccion de Facturacion</h3>
+    <div class="form-group">
+    <label for="InputNombre1">RFC</label>
+    <input type="text" class="form-control" id="InputRFC"   v-model="Facturacion.RFC">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Nombres</label>
+    <input type="text" class="form-control" id="InputNombres"   v-model="Facturacion.nombres">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Apellidos</label>
+    <input type="email" class="form-control" id="InputApellidos"   v-model="Facturacion.apellidos">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Empresa</label>
+    <input type="text" class="form-control" id="InputEmpresa"   v-model="Facturacion.empresa">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">calle</label>
+    <input type="text" class="form-control" id="InputCalle"   v-model="Facturacion.calle">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Numero Exterior</label>
+    <input type="email" class="form-control" id="InputExterior"   v-model="Facturacion.exterior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Numero Interior</label>
+    <input type="text" class="form-control" id="InputInterior"   v-model="Facturacion.interior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Colonia</label>
+    <input type="text" class="form-control" id="InputColonia"   v-model="Facturacion.colonia">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Provincia o estado</label>
+    <input type="email" class="form-control" id="InputEstado"   v-model="Facturacion.estado">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Pais</label>
+    <input type="text" class="form-control" id="InputPais"   v-model="Facturacion.pais">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Telefono</label>
+    <input type="text" class="form-control" id="InputTelefono"   v-model="Facturacion.telefono">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Correo</label>
+    <input type="email" class="form-control" id="InputCorreo"   v-model="Facturacion.correo">
+  </div>
+</div>
+
+
+
+<div class="row direccionIgual" v-if="select == 'factura'">
+  <div class="form-check col-8 ">
+  <label class="form-check-label" >
+    ¿La direccion de facturacion es la misma a la de envio?
+  </label>
+</div>
+<div class="form-check col-2">
+  <input class="form-check-input" type="radio"  id="exampleRadios3" v-model="sameDirection" value="true">
+  <label class="form-check-label" for="exampleRadios3">
+    Si
+  </label>
+</div>
+<div class="form-check col-2">
+  <input class="form-check-input" type="radio"  id="exampleRadios4" v-model="sameDirection" value="false">
+  <label class="form-check-label" for="exampleRadios4">
+   No
+  </label>
+</div>
+</div>
+
+
+
+<div class=" datosEnvio" v-if="select == 'ticket' || (sameDirection == 'false' && select == 'factura')">
+    <h3 class="my-5">Direccion de Envio</h3>
+    
+
+  <div class="form-group">
+    <label for="InputApellido1">Nombres</label>
+    <input type="text" class="form-control" id="InputNombres2"   v-model="Envio.nombres">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Apellidos</label>
+    <input type="email" class="form-control" id="InputApellidos2"   v-model="Envio.apellidos">
+  </div>
+
+ <div class="form-group">
+    <label for="InputCorreo1">Correo</label>
+    <input type="email" class="form-control" id="InputCorreo2"   v-model="Envio.correo">
+  </div>
+
+
+  <div class="form-group">
+    <label for="InputApellido1">calle</label>
+    <input type="text" class="form-control" id="InputCalle2"   v-model="Envio.calle">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Numero Exterior</label>
+    <input type="email" class="form-control" id="InputExterior2"   v-model="Envio.exterior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Numero Interior</label>
+    <input type="text" class="form-control" id="InputInterior2"   v-model="Envio.interior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Colonia</label>
+    <input type="text" class="form-control" id="InputColonia2"   v-model="Envio.colonia">
+  </div>
+
+<div class="form-group">
+    <label for="InputApellido1">Codigo Postal</label>   
+    <input type="text" class="form-control" id="InputPostal"   v-model="Envio.postal">
+  </div>
+
+
+  <div class="form-group">
+    <label for="InputCorreo1">Provincia o estado</label>
+    <input type="email" class="form-control" id="InputEstado2"   v-model="Envio.estado">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Pais</label>
+    <input type="text" class="form-control" id="InputPais2"   v-model="Envio.pais">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Telefono</label>
+    <input type="text" class="form-control" id="InputTelefono2"   v-model="Envio.telefono">
+  </div>
+  
+</div>
+
+
+
+  </div>
+</form>
+</div>
+
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            sameDirection:'',
+            select:'',
+
+            Facturacion:
+                {
+                    RFC:'',
+                    nombres:'',
+                    apellidos:'',
+                    empresa:'',
+                    calle:'',
+                    exterior:'',
+                    interior:'',
+                    colonia:'',
+                    estado:'',
+                    pais:'',
+                    telefono:'',
+                    correo:''
+
+                },
+            Envio:{
+                RFC:'',
+                    nombres:'',
+                    apellidos:'',
+                    postal:'',
+                    calle:'',
+                    exterior:'',
+                    interior:'',
+                    colonia:'',
+                    estado:'',
+                    pais:'',
+                    telefono:'',
+                    correo:''
+            }    
+            
+        }
+    }
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f6edb79..e60b6bf 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -27,18 +27,7 @@
             </div>
             
         </header>
-        <div class="header-f" >
-            <div class="container d-flex py-2 align-items-center justify-content-between">
-                <div>
-                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
-                </div>
-                <div>
-                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
-                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
-                    </a>
-                </div>
-            </div>
-        </div>
+
     </div>
 </template>
 
@@ -63,9 +52,6 @@ export default {
     background: #1b3d70;
 }
 
-.header-f {
-    background-color: #bb8800;
-}
 .cart-icon-custom-properties {
     font-size: 20px;
 }
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
new file mode 100644
index 0000000..2bbde96
--- /dev/null
+++ b/src/components/MainMenu.vue
@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <div class="header-f" >
+            <div class="container d-flex py-2 align-items-center justify-content-between">
+                <div class="d-flex">
+                    <div>
+                        <b-button v-b-toggle.sidebar-backdrop class="mr-3 menu-toggle-sty"><font-awesome-icon icon="bars"/></b-button>
+
+                        <b-sidebar
+                        id="sidebar-backdrop"
+                        title="Menú"
+                        :backdrop-variant="variant"
+                        backdrop
+                        shadow
+                        >
+                            <div class="px-3 mt-3 py-2 d-flex align-items-center profi-main-text-sty">
+                                <font-awesome-icon icon="user" class="mr-2" />        
+                                <a href="#" class="text-decoration-none">
+                                    <h5 class="my-auto">Iniciar sesión</h5>
+                                </a>
+                            </div>
+                            
+                            <h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>
+
+                            <ul class="px-3">
+                                <li v-for="item in items" :key="item.mensaje">
+                                    <a href="#"> {{ item.mensaje }} </a>
+                                </li>
+                            </ul>
+
+                            <h6 class="px-3 my-4">CONFIGURACIÓN</h6>
+
+                            <ul class="px-3">
+                                <li v-for="item in configuracion" :key="item.mensaje">
+                                    <a href="#"> {{ item.mensaje }} </a>
+                                </li>
+                            </ul>
+                        </b-sidebar>
+                    </div>
+                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
+                </div>
+                <div>
+                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
+                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            items: [
+                { mensaje: 'Investigación Aplicada y Multidisciplinaria' },
+                { mensaje: 'Ciencias Socioeconómicas' }
+            ],
+            configuracion: [
+                { mensaje: 'Mi cuenta' },
+                { mensaje: 'Ayuda' },
+                { mensaje: 'Salir' },
+            ]
+        }
+    },
+    methods: {
+       
+    }
+}
+
+</script>
+<style scoped>
+
+.header-f {
+    background-color: #bb8800;
+}
+.cart-icon-custom-properties {
+    font-size: 20px;
+}
+.menu-toggle-sty {
+    background-color: transparent!important;
+    border: 1px solid white!important;
+    color: white!important;
+}
+.menu-toggle-sty:hover {
+    border: 1px solid rgba(255, 255, 255, 0.7)!important;
+    color: rgba(255, 255, 255, 0.7)!important;
+}
+.profi-main-text-sty, .profi-main-text-sty a {
+    color: black!important;
+}
+.profi-main-text-sty a:hover{
+    color:gray!important;
+    transition: 0.2s;
+}
+ul li {
+    list-style: none;
+    margin: 10px auto;
+}
+ul li a {
+    text-decoration: none;
+    color: black!important;
+}
+ul li a:hover {
+    color: rgba(0, 0, 0, 0.6)!important;
+    transition: 0.2s;
+}
+</style>
diff --git a/src/icons.js b/src/icons.js
index 1fcb93c..2d2c1a5 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -11,7 +11,8 @@ import {
     faShoppingCart,
     faTrash,
     faMapMarkerAlt,
-    faPhoneAlt
+    faPhoneAlt,
+    faBars
 } from '@fortawesome/free-solid-svg-icons'
 
 
@@ -27,4 +28,5 @@ library.add(faShoppingCart)
 library.add(faTrash)
 library.add(faMapMarkerAlt)
 library.add(faPhoneAlt)
+library.add(faBars)
 
diff --git a/src/routes.js b/src/routes.js
index dbc3878..a97f97a 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -3,7 +3,6 @@ import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
 import PersonalData from './view/PersonalData.vue'
-import Cart from './view/Cart.vue'
 
 import Descrip from './view/Descrip.vue'
 const routes = [
@@ -21,16 +20,6 @@ const routes = [
         path: '/datosPersonales',
         component: PersonalData,
         name: 'personalData'
-    },
-    {
-        path: '/cart',
-        component: Cart,
-        name: 'cart'
-    },
-    {
-        path: '/descripcion',
-        component: Descrip,
-        name: 'descripcion'
     }
 ]
 
diff --git a/src/view/Cart.vue b/src/view/Cart.vue
deleted file mode 100644
index a855054..0000000
--- a/src/view/Cart.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <div class="my-5">
-        <div class="container d-flex flex-wrap justify-content-between">
-            <div class="cont-resum-shop py-2 mb-4">
-                <h2 class="ml-3">Carrito</h2>
-                <hr>
-                <div class="d-flex justify-content-between mx-4 my-4">
-                    <div class="d-flex">
-                        <img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
-                        <p class="mx-4">
-        Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</b></span>
-                        </p>
-                    </div>
-                    <div class="d-flex flex-wrap flex-column align-items-center">
-                        <div>
-                            <input type="number" class="inp-number p-1 d-inline-block" name="" id="">
-                        </div>
-                        <span class="my-4"><b>$180</b></span>
-                        <div>
-                            <a href="#" class="text-dark">
-                                <font-awesome-icon icon="trash" class=""/>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="d-flex justify-content-between mx-4 my-4">
-                    <div class="d-flex">
-                        <img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
-                        <p class="mx-4">
-        Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</b></span>
-                        </p>
-                    </div>
-                    <div class="d-flex flex-wrap flex-column align-items-center">
-                        <div>
-                            <input type="number" class="inp-number p-1 d-inline-block" name="" id="">
-                        </div>
-                        <span class="my-4"><b>$180</b></span>
-                        <div>
-                            <a href="#" class="text-dark">
-                                <font-awesome-icon icon="trash" class=""/>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="g-sec bg-light py-4 px-4 d-flex flex-column align-self-start align-items-center" style="">
-                <div class="d-flex justify-content-between">
-                    <p class="mr-5">2 Artículos<br>Envío</p>
-                    <p>$980<br>Pendiente</p>
-                </div>
-                <hr style="width:100%">
-                <div class="d-flex justify-content-between">
-                    <p class="mr-5">Total(IVA incluido)<br>$980</p>
-                </div>
-                <hr style="width:100%">
-                <button class="btn btn-primary mx-auto"><b>IR A LA CAJA</b></button>
-            </div>
-        </div>
-        <div class="container mt-3">
-            <div class="d-inline-block">
-                <a href="#">
-                    <p>
-                        Continuar la compra
-                    </p>
-                </a>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.cont-resum-shop {
-    /* background-color: skyblue; */
-    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    /* border-radius: 5px; */
-    /* font-size: 15px; */
-}
-.inp-number {
-    width: 55px;
-    border-radius: 5px;
-    border: 0.3px solid lightgray;
-}
-.price-style {
-    color: #6C59FE;
-}
-.g-sec {
-    -webkit-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    -moz-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
-}
-</style>
\ No newline at end of file
diff --git a/src/view/Home.vue b/src/view/Home.vue
index 28106e5..8794aef 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -9,14 +9,15 @@
 </template>
 
 <script>
+
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-
-
+        
 export default {
 components: {
         Header,
-        Footer
+        Footer,
+
     }
 }
 </script>