diff --git a/package-lock.json b/package-lock.json
index 3771bbc..0e6a9d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1122,6 +1122,61 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@nuxt/opencollective": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.2.tgz",
+      "integrity": "sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==",
+      "requires": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.0",
+        "node-fetch": "^2.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2491,6 +2546,25 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
       "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
     },
+    "bootstrap-vue": {
+      "version": "2.21.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.21.2.tgz",
+      "integrity": "sha512-0Exe+4MZysqhZNXIKf4TzkvXaupxh9EHsoCRez0o5Dc0J7rlafayOEwql63qXv74CgZO8E4U8ugRNJko1vMvNw==",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.2",
+        "bootstrap": ">=4.5.3 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      },
+      "dependencies": {
+        "bootstrap": {
+          "version": "4.5.3",
+          "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+          "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+        }
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3338,6 +3412,11 @@
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
+    "consola": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.0.tgz",
+      "integrity": "sha512-vlcSGgdYS26mPf7qNi+dCisbhiyDnrN1zaRbw3CSuc2wGOMEGGPsp46PdRG5gqXwgtJfjxDkxRNAgRPr1B77vQ=="
+    },
     "console-browserify": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@@ -7265,6 +7344,11 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -7906,6 +7990,11 @@
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
     },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10673,6 +10762,11 @@
         }
       }
     },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index df20252..182da44 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "bootstrap": "^4.5.2",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
     "jquery": "^3.5.1",
     "popper.js": "^1.16.1",
diff --git a/src/components/editarLibro.vue b/src/components/editarLibro.vue
new file mode 100644
index 0000000..67fc37a
--- /dev/null
+++ b/src/components/editarLibro.vue
@@ -0,0 +1,87 @@
+<template>
+    <div>
+         <div class=" divMaster row  row d-flex flex-wrap justify-content-center">
+                <b-input-group  class="mb-2">
+                    <b-input-group-prepend is-text>
+                        <b-icon icon="search"></b-icon>
+                    </b-input-group-prepend>
+                    <b-form-input type="search" placeholder="Buscar" ></b-form-input>
+                </b-input-group>
+        </div>
+        <div class="divMaster row ">
+            <div class="  d-flex flex-wrap  " style="justify-content: space-between;">
+                <div v-bind:key="libro.id"  v-for="(libro, idx) in Libros"  :class="{ active: idx == 0 }">
+                    <b-card  class="mb-3" style="width: 14rem; height: 22rem;"> 
+                        <b-card-img :src="libro.img" alt="Image"  style="max-width: 20rem; height: 15rem;" no-body ></b-card-img>
+                            <template #footer>
+                                <b-button variant="outline-warning" class="float-left">Editar</b-button>
+                                <b-button variant="outline-danger" class="float-right">Eliminar</b-button>
+                            </template>
+                        
+                    </b-card>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+export default {
+  data() {
+    return {
+      Libros: []
+    };
+  },
+  methods: {
+    async descripcion(idLibro) {
+      //console.log(` Este es el id del libro ${idLibro}`);
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      this.$router.push("/desc");
+    }
+  },
+  async created() {
+    try {
+      let novedades = await axios.get(`${config.api}/librosNovedades`);
+      let path = `${config.api}/libroImagen?idLibro=`;
+      novedades = novedades.data.data;
+      //console.log(`${novedades}`);
+      for (let i = 0; i < novedades.length; i++) {
+        //alert(novedades[i].titulo);
+        //this.Libros[i].title = novedades[i].titulo;
+        let config = {
+          // example url
+          url: `${path}${novedades[i].idLibro}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        try {
+          await axios(config).then(response => {
+            let reader = new FileReader();
+            reader.readAsDataURL(response.data);
+            reader.onload = () => {
+              this.Libros.push({
+                id: novedades[i].idLibro,
+                title: novedades[i].titulo,
+                img: reader.result
+              });
+            };
+          });
+        } catch (error) {
+          console.log(`No existe esa imagen`);
+        }
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error ${error}`);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index cada31b..85e2dc9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,11 +3,15 @@ import App from "./App.vue";
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
 import VueRouter from "vue-router";
 import { routes } from "./routes";
 
 Vue.config.productionTip = false;
 
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
 Vue.use(VueRouter);
 const router = new VueRouter({
   routes
diff --git a/src/routes.js b/src/routes.js
index b10c29b..3102272 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -9,6 +9,7 @@ import presentacion from "./view/presentacion.vue";
 import proceso from "./view/proceso.vue";
 import puntos from "./view/puntos.vue";
 import contacto from "./view/contacto.vue";
+import panelAdmin from "./view/panelAdmin.vue";
 
 export const routes = [
   { path: "/", component: home, name: "/" },
@@ -22,5 +23,6 @@ export const routes = [
   { path: "/presentacion", component: presentacion, name: "presentacion" },
   { path: "/proceso", component: proceso, name: "proceso" },
   { path: "/puntos", component: puntos, name: "puntos" },
-  { path: "/contacto", component: contacto, name: "contacto" }
+  { path: "/contacto", component: contacto, name: "contacto" },
+  { path: "/panelAdmin", component: panelAdmin, name: "panelAdmin" }
 ];
diff --git a/src/view/panelAdmin.vue b/src/view/panelAdmin.vue
new file mode 100644
index 0000000..2316a8e
--- /dev/null
+++ b/src/view/panelAdmin.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <Header />
+    <b-container fluid class="bv-example-row ml-0">
+        <b-row>
+            <b-col cols="3" style="background:red;">
+                <div>
+                    <b-nav vertical class="w-25">
+                        <b-nav-item active>Active</b-nav-item>
+                        <b-nav-item>Link</b-nav-item>
+                        <b-nav-item>Another Link</b-nav-item>
+                        <b-nav-item disabled>Disabled</b-nav-item>
+                    </b-nav>
+                </div>
+            </b-col>
+            <b-col  cols="9">
+                <b-row>
+                    <div>
+                        <b-nav tabs fill>
+                            <b-nav-item active>Editar</b-nav-item>
+                            <b-nav-item>Agregar</b-nav-item>
+                            
+                        </b-nav>
+                    </div>
+                </b-row>
+                 <b-row>
+                    <div class="divMaster row ">
+                        <div class="  d-flex flex-wrap  " style="justify-content: space-between;">
+                            <div v-bind:key="libro.id"  v-for="(libro, idx) in Libros"  :class="{ active: idx == 0 }">
+                                <b-card  class="mb-3" style="width: 28rem;"> 
+                                    <b-card-img :src="libro.img" alt="Image" ></b-card-img>
+                                    <b-card-footer><b-button variant="danger">Eliminar</b-button></b-card-footer>
+                                </b-card>
+                            </div>
+                        </div>
+                    </div>
+                 </b-row>
+                 <b-row>
+                    <EditarLibro />
+                 </b-row>
+            </b-col>
+        </b-row>
+
+      
+    </b-container>
+    
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import Footer from "./../components/footer.vue";
+import axios from "axios";
+import config from "../config/config.js";
+import EditarLibro from './../components/editarLibro.vue';
+export default {
+  name: "panelAdmin",
+  components: {
+    Header,
+    Footer,
+    EditarLibro,
+  },
+   data() {
+    return {
+      Libros: []
+    };
+  },
+  async created() {
+    try {
+      let path = `${config.api}/imagenCarrusel?nombre=`;
+      let nombres = await axios.get(`${config.api}/nombreCarrusel`);
+      nombres = nombres.data.data;
+      for (let i = 0; i < nombres.length; i++) {
+        //console.log(path);
+        let config = {
+          // example url
+          url: `${path}${nombres[i]}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        await axios(config).then(response => {
+          let reader = new FileReader();
+          reader.readAsDataURL(response.data);
+          reader.onload = () => {
+            this.Libros.push({ id: i, img: reader.result });
+          };
+        });
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error msj: ${error}`);
+    }
+  }
+};
+</script>
+
+
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>