diff --git a/public/index.html b/public/index.html
index 4123528..0a49dc9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,5 +13,8 @@
     </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 358b130..4ad6674 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <Header />
+    <Nav />
     <router-view></router-view>
     <Footer />
   </div>
@@ -9,12 +10,14 @@
 <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
+    Footer,
+    Nav
   }
 };
 </script>
diff --git a/src/esteticas/footer.vue b/src/esteticas/footer.vue
index e3312b2..d69a1f0 100644
--- a/src/esteticas/footer.vue
+++ b/src/esteticas/footer.vue
@@ -58,7 +58,7 @@
 }
 
 .divMaster {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   height: auto;
   margin: 0 auto;
 }
diff --git a/src/esteticas/header.vue b/src/esteticas/header.vue
index 474ad60..cac2d3d 100644
--- a/src/esteticas/header.vue
+++ b/src/esteticas/header.vue
@@ -49,7 +49,7 @@
 }
 
 .divMaster {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   height: auto;
   margin: 0 auto;
 }
diff --git a/src/esteticas/nav.vue b/src/esteticas/nav.vue
new file mode 100644
index 0000000..f41673c
--- /dev/null
+++ b/src/esteticas/nav.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="divMaster doradoUnam row">
+    <div class="col-10 offset-1">
+      <nav class="navbar navbar-expand-sm navbar-light  ">
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarTogglerDemo02"
+          aria-controls="navbarTogglerDemo02"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon blanco"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+          <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">Inicio</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">Presentacion</a>
+            </li>
+            <li class="nav-item ">
+              <a
+                class="nav-link dropdown-toggle text-white "
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                href="#"
+                >Libros</a
+              >
+              <div
+                class="dropdown-menu azulUnam"
+                aria-labelledby="navbarDropdown"
+              >
+                <a class="dropdown-item text-white" href="#"
+                  >Ciencias Socioeconomicas</a
+                >
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#"
+                  >Diseño y Edificacion</a
+                >
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#"
+                  >Enseñanza de Idiomas</a
+                >
+                <div class="dropdown-divider"></div>
+                <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="#"
+                  >Matematicas e Ingenieria</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">Difusion Editorial</a>
+            </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>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.divMaster {
+  /* max-width: 1280px; */
+  height: auto;
+  margin: 0 auto;
+}
+nav {
+  padding: 0.5rem 0;
+}
+
+.azulUnam {
+  background-color: #1e3c70;
+}
+.doradoUnam {
+  background-color: #bb8800;
+}
+.blanco {
+  color: white !important;
+}
+
+.dropdown-item:hover {
+  background-color: #bb8800;
+}
+.nav-link:focus {
+  background-color: #1e3c70;
+}
+
+.menuText {
+  display: none;
+}
+
+.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;
+}
+
+@media (max-width: 450px) {
+  .menuText {
+    display: block;
+  }
+}
+</style>