diff --git a/src/assets/Instagram.png b/src/assets/Instagram.png
new file mode 100644
index 0000000..0a45dc2
Binary files /dev/null and b/src/assets/Instagram.png differ
diff --git a/src/assets/YouTube.png b/src/assets/YouTube.png
new file mode 100644
index 0000000..440ff4e
Binary files /dev/null and b/src/assets/YouTube.png differ
diff --git a/src/assets/facebook.png b/src/assets/facebook.png
new file mode 100644
index 0000000..7b1971d
Binary files /dev/null and b/src/assets/facebook.png differ
diff --git a/src/components/descripcion.vue b/src/components/descripcion.vue
index 2d6ecb9..47c116e 100644
--- a/src/components/descripcion.vue
+++ b/src/components/descripcion.vue
@@ -3,6 +3,34 @@
     <div class="row ">
       <div class="col-md-6 col-sm-12 py-5">
         <img v-bind:src="rutaIm" class="libro" />
+        <button class="button pre">
+          Previsualizar</button
+        ><br /><br />
+        <div class="container">
+          <div class="row izq">
+            <b style="font-size: 18px;" class="izq">Compartir</b><br />
+          </div>
+          <div class="container izq">
+            <a href="https://www.facebook.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/facebook.png"
+                alt="Facebook"
+            /></a>
+            <a href="https://www.instagram.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/Instagram.png"
+                alt="Instagram"
+            /></a>
+            <a href="https://www.youtube.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/YouTube.png"
+                alt="Youtube"
+            /></a>
+          </div>
+        </div>
       </div>
       <div class="col-md-6 col-sm-12 py-5 titulo">
         <b>Titulo:</b>
@@ -17,15 +45,45 @@
         <p>{{ edicion }}</p>
         <b>Precio: </b>
         <p>{{ precio }}</p>
-
         <b>Versión:</b>
+        <p>{{ version }}</p>
+        <b>Descripción:</b>
+        <div class="overflow-auto">{{ desc }}</div>
+        <button class="button ">
+          {{ boton2 }}
+        </button>
+      </div>
+    </div>
+    <Title title="Similares" />
+    <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>
   </div>
 </template>
 
 <script>
+import Title from "../components/titulo.vue";
 export default {
+  components: {
+    Title
+  },
+
   data() {
     return {
       titulo: "Competitive programing",
@@ -34,21 +92,97 @@ export default {
       isbn: "POSF-12-43",
       edicion: "Primera edicion",
       precio: "$3232.00",
-      rutaIm: `./${__dirname}src/assets/as.jpg`
+      rutaIm:
+        "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg",
+      version: "Electronica",
+      desc: `En relación al estudio del álgebra, las expresiones algebraicas son el conjunto de números, y por símbolos representados por letras que manifiestan un valor desconocido, siendo llamado como incógnita o variable.\n\nLos símbolos se encuentran relacionados a través de signos que indican las operaciones que se necesitan efectuar, bien sea multiplicación, suma, resta, entre otros, con el objetivo de conseguir el resultado de las variables. En este sentido, los términos se distinguen o separan por medio de signos, y en el caso de estar separadas por el signo de igualdad se llama ecuación.`,
+      boton2: "Comprar",
+      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"
+        }
+      ]
     };
   }
 };
 </script>
 
 <style scoped>
+.divMaster {
+  height: auto;
+}
+.card {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+a {
+  text-decoration: none !important;
+  color: black;
+}
+.img {
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+.izq {
+  display: flex;
+  justify-content: flex-start;
+}
+.button {
+  background-color: rgb(187, 136, 0);
+  border: none;
+  color: white;
+  height: 4.5rem;
+  width: 15rem;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.5rem;
+  border-radius: 1rem;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin-top: 2rem;
+}
+.button:hover {
+  background-color: #46c200;
+  color: white;
+}
+.pre {
+  background-color: #1e3c70;
+}
+.pre:hover {
+  background-color: rgb(187, 136, 0);
+}
+
 .titulo {
-  font-size: 1.3rem;
+  font-size: 1rem;
   text-align: left;
   color: balck;
 }
+p {
+  margin-bottom: 0.5rem;
+}
 
 .libro {
-  width: 360px;
+  width: 320px;
   height: 480px;
   margin-right: auto;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
@@ -60,5 +194,16 @@ export default {
     margin-right: auto;
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
   }
+  .button {
+    text-align: center;
+    margin-top: 3rem;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .button {
+    text-align: center;
+    margin-top: 3rem;
+  }
 }
 </style>
diff --git a/src/components/footer.vue b/src/components/footer.vue
index cdfcc04..5071330 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -1,7 +1,7 @@
 <template>
   <footer class="container-fluid Azul-puma footer py-3 ">
     <container>
-      <div class="row">
+      <div row>
         <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
           Comité Editorial
         </button>
diff --git a/src/components/titulo.vue b/src/components/titulo.vue
index 9bbe8f2..f178a7b 100644
--- a/src/components/titulo.vue
+++ b/src/components/titulo.vue
@@ -33,7 +33,6 @@ export default {
   font-size: 30px;
 }
 
-
 @media screen and (max-width: 400px) {
   .pTitulo {
     font-size: 20px;
diff --git a/src/esteticas/nav.vue b/src/esteticas/nav.vue
index 3da5a02..38b047a 100644
--- a/src/esteticas/nav.vue
+++ b/src/esteticas/nav.vue
@@ -13,7 +13,6 @@
         >
           <span class="navbar-toggler-icon blanco"></span>
           <span class="mx-2">Menu</span>
-          
         </button>
 
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
@@ -134,18 +133,17 @@ nav {
 }
 .nav-link:focus {
   background-color: #1e3c70;
-  border-radius:  2rem;
+  border-radius: 2rem;
 }
 
-.nav-link{
+.nav-link {
   transition: 0.3s;
 }
 
-.dropdown-item{
+.dropdown-item {
   padding: 1rem;
 }
 
-
 .menuText {
   display: none;
 }
diff --git a/src/view/libroDescripcion.vue b/src/view/libroDescripcion.vue
index 1e0bac4..03b3afb 100644
--- a/src/view/libroDescripcion.vue
+++ b/src/view/libroDescripcion.vue
@@ -3,8 +3,8 @@
     <Header />
     <Nav />
 
-    <p>descripcion</p>
     <Descrip />
+
     <Footer />
   </div>
 </template>