diff --git a/package-lock.json b/package-lock.json
index d455939..1d99bc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2456,9 +2456,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
+      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -6459,6 +6459,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
@@ -7862,6 +7867,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
diff --git a/package.json b/package.json
index 8724d1d..5590231 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.5.2",
     "core-js": "^3.6.5",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
     "vue": "^2.6.11",
     "vue-router": "^3.3.4"
   },
diff --git a/public/index.html b/public/index.html
index 0a49dc9..4123528 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,8 +13,5 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index 4ad6674..34ed2b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,29 @@
-<template>
-  <div id="app">
-    <Header />
-    <Nav />
-    <router-view></router-view>
-    <Footer />
-  </div>
-</template>
-
-<script>
-import Header from "./esteticas/header.vue";
-import Footer from "./esteticas/footer.vue";
-import Nav from "./esteticas/nav.vue";
-
-export default {
-  name: "App",
-  components: {
-    Header,
-    Footer,
-    Nav
-  }
-};
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-
-  padding: 0;
-  margin: 0;
-}
-
-.row {
-  margin: 0 !important;
-}
-</style>
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App"
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+
+  padding: 0;
+  margin: 0;
+}
+
+.row {
+  margin: 0 !important;
+}
+</style>
diff --git a/src/assets/FES-editoriales.png b/src/assets/FES-editoriales.png
new file mode 100644
index 0000000..dc4fe88
Binary files /dev/null and b/src/assets/FES-editoriales.png differ
diff --git a/src/assets/FESAcatlan.png b/src/assets/FESAcatlan.png
deleted file mode 100644
index 11e39c2..0000000
Binary files a/src/assets/FESAcatlan.png and /dev/null differ
diff --git a/src/assets/UNAM.png b/src/assets/Logo-UNAM.png
similarity index 100%
rename from src/assets/UNAM.png
rename to src/assets/Logo-UNAM.png
diff --git a/src/assets/as.jpg b/src/assets/as.jpg
new file mode 100644
index 0000000..5f5affb
Binary files /dev/null and b/src/assets/as.jpg differ
diff --git a/src/assets/halim.jpg b/src/assets/halim.jpg
new file mode 100644
index 0000000..eaa5405
Binary files /dev/null and b/src/assets/halim.jpg differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/carrusel.vue b/src/components/carrusel.vue
new file mode 100644
index 0000000..9faf0ba
--- /dev/null
+++ b/src/components/carrusel.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="divMaster row my-5">
+    <div
+      id="carouselExampleControls"
+      class="carousel slide col-10 offset-1"
+      data-ride="carousel"
+    >
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <img
+            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
+            class="d-block w-100 img-fluid"
+            alt="img"
+          />
+        </div>
+        <div class="carousel-item">
+          <img
+            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
+            class="d-block w-100 img-fluid"
+            alt="img"
+          />
+        </div>
+        <div class="carousel-item">
+          <img
+            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
+            class="d-block w-100 img-fluid"
+            alt="img"
+          />
+        </div>
+      </div>
+      <a
+        class="carousel-control-prev"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="prev"
+      >
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a
+        class="carousel-control-next"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="next"
+      >
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>
diff --git a/src/components/cartLibro.vue b/src/components/cartLibro.vue
new file mode 100644
index 0000000..0426e05
--- /dev/null
+++ b/src/components/cartLibro.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="divMaster row mb-5">
+    <div class="col-10 offset-1 d-flex flex-wrap justify-content-center">
+      <div
+        class="card m-3"
+        style="width: 12rem;"
+        v-bind:key="libro.id"
+        v-for="libro in Libros"
+      >
+        <router-link :to="{ path: 'home' }" class="textt">
+          <img :src="libro.img" class="card-img-top rounded" alt="libro" />
+          <div class="card-body cd textt">
+            <p class="card-text textt">
+              {{ libro.title }}
+            </p>
+          </div>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      Libros: [
+        {
+          id: 0,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 0,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        },
+        {
+          id: 1,
+          title:
+            "Some quick example text to build on the card title and make up the bulk of the cards content.",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+.card {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+a {
+  text-decoration: none !important;
+  color: black;
+}
+</style>
diff --git a/src/components/descripcion.vue b/src/components/descripcion.vue
new file mode 100644
index 0000000..2d6ecb9
--- /dev/null
+++ b/src/components/descripcion.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="container">
+    <div class="row ">
+      <div class="col-md-6 col-sm-12 py-5">
+        <img v-bind:src="rutaIm" class="libro" />
+      </div>
+      <div class="col-md-6 col-sm-12 py-5 titulo">
+        <b>Titulo:</b>
+        <p>{{ titulo }}</p>
+        <b>Autor: </b>
+        <p>{{ autor }}</p>
+        <b>Paginas: </b>
+        <p>{{ paginas }}</p>
+        <b>ISBN: </b>
+        <p>{{ isbn }}</p>
+        <b>Año de Impresión: </b>
+        <p>{{ edicion }}</p>
+        <b>Precio: </b>
+        <p>{{ precio }}</p>
+
+        <b>Versión:</b>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      titulo: "Competitive programing",
+      autor: "HALIM",
+      paginas: "300",
+      isbn: "POSF-12-43",
+      edicion: "Primera edicion",
+      precio: "$3232.00",
+      rutaIm: `./${__dirname}src/assets/as.jpg`
+    };
+  }
+};
+</script>
+
+<style scoped>
+.titulo {
+  font-size: 1.3rem;
+  text-align: left;
+  color: balck;
+}
+
+.libro {
+  width: 360px;
+  height: 480px;
+  margin-right: auto;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
+}
+@media (max-width: 450px) {
+  .libro {
+    width: 270px;
+    height: 380px;
+    margin-right: auto;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
+  }
+}
+</style>
diff --git a/src/components/footer.vue b/src/components/footer.vue
new file mode 100644
index 0000000..cdfcc04
--- /dev/null
+++ b/src/components/footer.vue
@@ -0,0 +1,89 @@
+<template>
+  <footer class="container-fluid Azul-puma footer py-3 ">
+    <container>
+      <div class="row">
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
+          Comité Editorial
+        </button>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
+          Política Editorial y Lineamentos
+        </button>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer tres">
+          Proceso Editorial y Organismos
+        </button>
+        <button
+          type="button"
+          class="col-md-6 col-sm-12 btn boton-footer cuatro"
+        >
+          Puntos de Venta
+        </button>
+      </div>
+    </container>
+    <div row>
+      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
+      <p class="my-0 ">
+        Esta página puede ser reproducida con fines no lucrativos, siempre y
+        cuando no se mutile, se cite la fuente
+      </p>
+      <p>
+        completa y su dirección electrónica. De otra forma, requiere permiso
+        previo por escrito de la institución.
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.boton-footer {
+  background-color: rgb(187, 136, 0);
+  color: white;
+  width: 14rem;
+  font-size: 0.8rem;
+}
+.uno,
+.dos,
+.tres {
+  margin-right: 1rem;
+}
+.btn {
+  margin-bottom: 1rem;
+}
+
+.Azul-puma {
+  background-color: #1e3c70;
+}
+
+.footer {
+  text-align: center;
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .uno,
+  .tres {
+    margin-right: 4rem;
+  }
+  .dos {
+    margin-right: 0rem;
+  }
+  .footer {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 970px) {
+  .uno,
+  .dos,
+  .tres {
+    margin-right: 0.5rem;
+  }
+
+  .footer {
+    font-size: 0.7rem;
+  }
+}
+</style>
diff --git a/src/components/header.vue b/src/components/header.vue
new file mode 100644
index 0000000..7c3dc1b
--- /dev/null
+++ b/src/components/header.vue
@@ -0,0 +1,67 @@
+<template>
+  <container>
+    <div class="row divMaster header cl-12 azulUnam">
+      <div
+        class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
+      >
+        <a href="https://www.unam.mx/" target="_blank">
+          <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
+        </a>
+      </div>
+
+      <div
+        class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
+      >
+        <a href="https://www.acatlan.unam.mx/" target="_blank">
+          <img
+            class="sizeImg"
+            src="../assets/FES-editoriales.png"
+            alt="logo unam"
+          />
+        </a>
+      </div>
+
+      <div
+        class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
+      >
+        <a href="https://www.acatlan.unam.mx/" target="_blank">
+          <img
+            class="sizeImg"
+            src="../assets/FES-editoriales.png"
+            alt="logo unam"
+          />
+        </a>
+      </div>
+    </div>
+  </container>
+</template>
+
+<style>
+.divMaster {
+  height: 7em;
+  margin: 0 auto;
+}
+
+.azulUnam {
+  background-color: #1e3c70;
+}
+.sizeImg {
+  height: 5rem;
+}
+.logo_acatlan_resp {
+  display: none !important;
+}
+
+@media (max-width: 450px) {
+  .logo_acatlan,
+  .logo_unam {
+    display: none !important;
+  }
+  .logo_acatlan_resp {
+    display: block !important;
+  }
+  .logo_acatlan_resp a img {
+    height: 5rem;
+  }
+}
+</style>
diff --git a/src/components/home.vue b/src/components/home.vue
deleted file mode 100644
index 98cde7d..0000000
--- a/src/components/home.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>esta es la pagina home</h1>
-  </div>
-</template>
diff --git a/src/components/navPrincipal.vue b/src/components/navPrincipal.vue
new file mode 100644
index 0000000..f3c8850
--- /dev/null
+++ b/src/components/navPrincipal.vue
@@ -0,0 +1,174 @@
+<template>
+  <nav
+    class="navbar navbar-expand-md navbar-light "
+    style="background-color:#BB8800;"
+  >
+    <div class="container">
+      <nav class=" ">
+        <button
+          class=" navbar-toggler van text-whitee btn-sm"
+          type="button"
+          id="toggle-menu"
+          data-toggle="collapse"
+          data-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+          v-on:click="toggle()"
+        >
+          <span
+            class=" navbar-toggler-icon x m-1 text-white"
+            style="color:white !important;"
+          ></span>
+          Menú
+        </button>
+      </nav>
+
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link text-white "
+              ><a> Inicio</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link text-white"
+              ><a>Presentacion</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link text-white"
+              ><a>Libros</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link text-white"
+              ><a>Difusión Editorial</a></router-link
+            >
+          </li>
+        </ul>
+        <form class="form-inline  my-0 my-lg-0">
+          <div class="input-group input-group-sm mb-0">
+            <input
+              type="text"
+              class="form-control reIzq "
+              placeholder="Buscar"
+              aria-label="Recipient's username"
+              aria-describedby="basic-addon2"
+            />
+            <div class="input-group-append reDer bg-white">
+              <button class="btn  my-0" type="submit">
+                <svg
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  class="bi bi-search"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggle: function() {
+      let element = document.getElementById("navbarNav");
+      element.classList.toggle("block");
+      element.classList.add("mystyle");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.reDer {
+  border-top-right-radius: 20px 20px !important;
+  border-bottom-right-radius: 20px 20px !important;
+}
+.reIzq {
+  border-top-left-radius: 20px 20px !important;
+  border-bottom-left-radius: 20px 20px !important;
+}
+body {
+  overflow-x: hidden;
+}
+.mystyle {
+  text-align: left;
+}
+
+.block {
+  display: block;
+}
+a {
+  max-height: 100%;
+}
+.menu {
+  background-color: #bb8800;
+}
+
+.menu nav ul {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0rem;
+}
+
+.menu nav ul div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.menu nav ul li {
+  list-style: none;
+}
+
+.menu nav ul li a {
+  display: block;
+}
+
+a {
+  color: white;
+  transition: 0.5s;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+}
+
+a:hover {
+  background-color: #1e3c70;
+  color: white;
+}
+
+.active {
+  background-color: #936900;
+}
+
+.van {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.x {
+  color: white;
+}
+
+@media (min-width: 768px) {
+  .van {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/titulo.vue b/src/components/titulo.vue
new file mode 100644
index 0000000..9bbe8f2
--- /dev/null
+++ b/src/components/titulo.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="divMaster">
+    <div class="row">
+      <div class="col-10 offset-1 bor d-flex justify-content-center">
+        <div class="bgAzul">
+          <p class="text-white pTitulo">{{ title }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["title"]
+};
+</script>
+
+<style>
+.bor {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+.bgAzul {
+  background-color: #1b3d70;
+  width: 40%;
+
+  border-top-right-radius: 20px 20px !important;
+  border-top-left-radius: 20px 20px !important;
+}
+.pTitulo {
+  margin: 0;
+  font-size: 30px;
+}
+
+
+@media screen and (max-width: 400px) {
+  .pTitulo {
+    font-size: 20px;
+  }
+  .bgAzul {
+    width: 60%;
+  }
+}
+</style>
diff --git a/src/esteticas/footer.vue b/src/esteticas/footer.vue
deleted file mode 100644
index d69a1f0..0000000
--- a/src/esteticas/footer.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="divMaster">
-    <div class="footer cl-12 azulUnam">
-      <div class="row d-flex justify-content-center ">
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >Comite Editorial</a
-          >
-        </div>
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >Politica Editorial y Lineamietos</a
-          >
-        </div>
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >Libreria</a
-          >
-        </div>
-        <div class="  col-5 col-lg-3 my-3  text-center btn-foo  ">
-          <a
-            href="#"
-            class="btn rounded-pill doradoUnam text-white btn-sm active"
-            role="button"
-            aria-pressed="true"
-            >contactanos</a
-          >
-        </div>
-      </div>
-      <div class="row">
-        <p class="text-white px-3">
-          Hecho en México, todos los derechos reservados 2020. Esta página puede
-          ser reproducida con fines no lucrativos, siempre y cuando no se
-          mutile, se cite la fuente completa y su dirección electrónica. De otra
-          forma, requiere permiso previo por escrito de la institución
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
-
-.divMaster {
-  /* max-width: 1280px; */
-  height: auto;
-  margin: 0 auto;
-}
-
-.azulUnam {
-  background-color: #1e3c70;
-}
-.doradoUnam {
-  background-color: #bb8800;
-}
-
-/* .footer{
-    height: 100px;
-} */
-</style>
diff --git a/src/esteticas/header.vue b/src/esteticas/header.vue
deleted file mode 100644
index cac2d3d..0000000
--- a/src/esteticas/header.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="divMaster">
-    <div class="header cl-12 azulUnam">
-      <div class="row">
-        <div
-          class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
-        >
-          <a href="https://www.unam.mx/" target="_blank">
-            <img
-              class="sizeImg"
-              src="https://www.c3.unam.mx/image/logoUnam.png"
-              alt="logo unam"
-            />
-          </a>
-        </div>
-
-        <div
-          class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
-        >
-          <a href="https://www.acatlan.unam.mx/" target="_blank">
-            <img
-              class="sizeImg"
-              src="https://flisol.acatlan.unam.mx/img/logo-acatlan.png"
-              alt="logo unam"
-            />
-          </a>
-        </div>
-
-        <div
-          class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
-        >
-          <a href="https://www.acatlan.unam.mx/" target="_blank">
-            <img
-              class="sizeImg"
-              src="../assets/FESAcatlan.png"
-              alt="logo unam"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
-
-.divMaster {
-  /* max-width: 1280px; */
-  height: auto;
-  margin: 0 auto;
-}
-
-.azulUnam {
-  background-color: #1e3c70;
-}
-
-/* .header{
-  height: 100px;
-} */
-
-.sizeImg {
-  height: 5rem;
-}
-.logo_acatlan_resp {
-  display: none !important;
-}
-
-@media (max-width: 450px) {
-  .logo_acatlan,
-  .logo_unam {
-    display: none !important;
-  }
-  .logo_acatlan_resp {
-    display: block !important;
-  }
-  .logo_acatlan_resp a img {
-    height: 3rem;
-  }
-}
-</style>
diff --git a/src/esteticas/nav.vue b/src/esteticas/nav.vue
index f41673c..3da5a02 100644
--- a/src/esteticas/nav.vue
+++ b/src/esteticas/nav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="divMaster doradoUnam row">
+  <div class="divMaster doradoUnam row d-flex justify-content-center">
     <div class="col-10 offset-1">
       <nav class="navbar navbar-expand-sm navbar-light  ">
         <button
@@ -12,6 +12,8 @@
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon blanco"></span>
+          <span class="mx-2">Menu</span>
+          
         </button>
 
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
@@ -52,8 +54,8 @@
                 <a class="dropdown-item text-white" href="#"
                   >Estudios de Posgrado</a
                 >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#">Humanidades</a>
+                <div class="dropdown-divider "></div>
+                <a class="dropdown-item text-white " href="#">Humanidades</a>
                 <div class="dropdown-divider"></div>
                 <a class="dropdown-item text-white" href="#"
                   >Matematicas e Ingenieria</a
@@ -132,8 +134,18 @@ nav {
 }
 .nav-link:focus {
   background-color: #1e3c70;
+  border-radius:  2rem;
 }
 
+.nav-link{
+  transition: 0.3s;
+}
+
+.dropdown-item{
+  padding: 1rem;
+}
+
+
 .menuText {
   display: none;
 }
diff --git a/src/main.js b/src/main.js
index 3b2b69a..cada31b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,13 @@
 import Vue from "vue";
 import App from "./App.vue";
-import "bootstrap/dist/css/bootstrap.css";
-
-Vue.config.productionTip = false;
+import "bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 import VueRouter from "vue-router";
 import { routes } from "./routes";
 
+Vue.config.productionTip = false;
+
 Vue.use(VueRouter);
 const router = new VueRouter({
   routes
diff --git a/src/routes.js b/src/routes.js
index ce67b37..a764054 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,6 +1,9 @@
-import Form from "./components/home.vue";
-import Login from "./components/login.vue";
+import home from "./view/home.vue";
+import login from "./view/login.vue";
+import libroDescripcion from "./view/libroDescripcion.vue";
+
 export const routes = [
-  { path: "/", component: Form, name: "form" },
-  { path: "/panelAdmin", component: Login, name: "Login" }
+  { path: "/", component: home, name: "form" },
+  { path: "/panelAdmin", component: login, name: "Login" },
+  { path: "/desc", component: libroDescripcion, name: "LibroDesc" }
 ];
diff --git a/src/view/home.vue b/src/view/home.vue
new file mode 100644
index 0000000..fc31da4
--- /dev/null
+++ b/src/view/home.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Header />
+    <Nav />
+    <Carr />
+    <Title title="Recientes" />
+    <Cart />
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import Nav from "./../esteticas/nav.vue";
+import Footer from "./../components/footer.vue";
+import Carr from "../components/carrusel.vue";
+import Cart from "../components/cartLibro.vue";
+import Title from "../components/titulo.vue";
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    Nav,
+    Footer,
+    Carr,
+    Cart,
+    Title
+  }
+};
+</script>
diff --git a/src/view/libroDescripcion.vue b/src/view/libroDescripcion.vue
new file mode 100644
index 0000000..1e0bac4
--- /dev/null
+++ b/src/view/libroDescripcion.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <Header />
+    <Nav />
+
+    <p>descripcion</p>
+    <Descrip />
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import Nav from "./../components/navPrincipal.vue";
+import Descrip from "./../components/descripcion.vue";
+import Footer from "./../components/footer.vue";
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    Nav,
+    Descrip,
+    Footer
+  }
+};
+</script>
diff --git a/src/components/login.vue b/src/view/login.vue
similarity index 100%
rename from src/components/login.vue
rename to src/view/login.vue