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/components/descripcion.vue b/src/components/descripcion.vue
new file mode 100644
index 0000000..ef16b0e
--- /dev/null
+++ b/src/components/descripcion.vue
@@ -0,0 +1,62 @@
+<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/esteticas/footer.vue b/src/components/footer.vue
similarity index 100%
rename from src/esteticas/footer.vue
rename to src/components/footer.vue
diff --git a/src/esteticas/header.vue b/src/components/header.vue
similarity index 100%
rename from src/esteticas/header.vue
rename to src/components/header.vue
diff --git a/src/esteticas/navPrincipal.vue b/src/components/navPrincipal.vue
similarity index 100%
rename from src/esteticas/navPrincipal.vue
rename to src/components/navPrincipal.vue
diff --git a/src/main.js b/src/main.js
index 3b2b69a..dcbea63 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,11 +2,13 @@ import Vue from "vue";
 import App from "./App.vue";
 import "bootstrap/dist/css/bootstrap.css";
 
-Vue.config.productionTip = false;
 
 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/components/home.vue b/src/view/home.vue
similarity index 52%
rename from src/components/home.vue
rename to src/view/home.vue
index 9bb6044..ed818f8 100644
--- a/src/components/home.vue
+++ b/src/view/home.vue
@@ -2,15 +2,14 @@
   <div>
     <Header />
     <Nav />
-    <router-view></router-view>
     <Footer />
   </div>
 </template>
 
 <script>
-import Header from "./../esteticas/header.vue";
-import Nav from "./../esteticas/navPrincipal.vue";
-import Footer from "./../esteticas/footer.vue";
+import Header from "./../components/header.vue";
+import Nav from "./../components/navPrincipal.vue";
+import Footer from "./../components/footer.vue";
 
 export default {
   name: "App",
diff --git a/src/view/libroDescripcion.vue b/src/view/libroDescripcion.vue
new file mode 100644
index 0000000..ba4208b
--- /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