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/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/header.vue b/src/components/header.vue
new file mode 100644
index 0000000..352c3a1
--- /dev/null
+++ b/src/components/header.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="row divMaster header cl-12 azulUnam">
+    <div class="container" style="margin-top: 2rem;"> 
+      <h2>Administrador</h2>
+      <h5>ASINEA 2020</h5>
+    </div>
+   
+    
+  </div>
+</template>
+
+<style scoped>
+h2,h3,h4,h5{
+    color: white;
+}
+.divMaster {
+  height: 10em;
+  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/main.js b/src/main.js
index 884e97c..16a126e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,11 +3,10 @@ import App from "./App.vue";
 import VueRouter from "vue-router";
 import { routes } from "./routes";
 
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import { BootstrapVue } from 'bootstrap-vue'
 
 
 Vue.use(BootstrapVue)
-Vue.use(IconsPlugin)
 
 Vue.config.productionTip = false;
 
diff --git a/src/routes.js b/src/routes.js
index a107bcb..9ac7907 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,10 +1,12 @@
 import login from "./view/login.vue";
 import registro from "./view/registro.vue";
 import usuario from "./view/usuario.vue";
+import panelAdmin from "./view/panelAdmin.vue";
 
 
 export const routes = [
   { path: "/", component: login, name: "Login" },
   { path: "/registro", component: registro, name: "Registro" },
-  { path: "/usuario", component: usuario, name: "Usuario" }
+  { path: "/usuario", component: usuario, name: "Usuario" },
+  { path: "/admin", component: panelAdmin, name: "Admin" }
 ];
diff --git a/src/view/login.vue b/src/view/login.vue
index 5d84ece..4595268 100644
--- a/src/view/login.vue
+++ b/src/view/login.vue
@@ -2,35 +2,56 @@
    
     
     <div class="container">
-    <div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; " src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>  <router-view></router-view>
-  
-    <!--<div ><div ><iframe class="banner" frameborder="0" src="https://view.genial.ly/5e879acc5870c50e327954d1" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
-  -->
-        <div class="wrapper fadeInDown">
-        <div id="formContent">
-    <!-- Tabs Titles -->
+        <div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; " src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> 
+      
+          <div class="wrapper fadeInDown">
+          <div id="formContent">
     
-    <!-- Icon -->
-    <div class="fadeIn first">
-        <h1>Iniciar Sesión</h1>
-    </div>
+          <div class="fadeIn first">
+              <h1>Iniciar Sesión</h1>
+          </div>
 
-    <!-- Login Form -->
-    <form>
-      <input type="text" id="login" class="fadeIn second" name="login" placeholder="Correo">
-      <input type="password" id="password" class="fadeIn third" name="login" placeholder="Contraseña">
-      <input type="submit" class="fadeIn fourth" value="Log In">
-    </form>
+          <form>
+            <input type="text" id="login" class="fadeIn second" name="login" placeholder="Correo">
+            <input type="password" id="password" class="fadeIn third" name="login" placeholder="Contraseña">
+            <input type="submit" class="fadeIn fourth" value="Log In">
+          </form>
 
-    <!-- Remind Passowrd -->
-    <div id="formFooter">
-      <a class="underlineHover" href="#">Registrate</a> <br/>
-      <a class="underlineHover" href="#">¿ Olvidaste tu Contraseña ?</a>
-    </div>
+          <div id="formFooter">
+            <a class="underlineHover" href="#">Registrate</a> <br/>
+            <a class="underlineHover"  href="#" v-b-modal.enviarPass >¿ Olvidaste tu Contraseña ?</a>
+          </div>
 
-  </div>
-
-    </div>
+        </div>
+        <b-modal
+          id="enviarPass"
+          ref="modal"
+          title="Enviar correo con constraseña nueva"
+          @show="resetModal"
+          @hidden="resetModal"
+          @ok="handleOk"
+          hide-footer
+        >
+          <form ref="form" @submit.stop.prevent="handleSubmit">
+            <b-form-group
+              :state="nameState"
+              label="Correo"
+              label-for="name-input"
+              invalid-feedback="Es necesario el correo"
+            >
+              <b-form-input
+                id="name-input"
+                v-model="name"
+                :state="nameState"
+                required
+                style="width: 100%; x"
+              ></b-form-input>
+            </b-form-group>
+          </form>
+          <b-button  class="btn btn-outline-danger" @click="$bvModal.hide('enviarPass')">Cancelar</b-button>
+          <b-button   class="btn btn-outline-success float-right" @click="$bvModal.hide('enviarPass')" >Enviar</b-button>
+        </b-modal>
+      </div>
     </div>
 </template>
 
@@ -45,275 +66,275 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.banner{
-  position: realtive; 
-  top: 0; 
-  left: 0; 
-  width: 100%; 
-  height: 100%;
-}
-h1{
-    margin-top:1.5rem;
-    margin-bottom:1.5rem;
-}
-html {
-  background-color: #56baed;
-}
-
-body {
-  font-family: "Poppins", sans-serif;
-  height: 100vh;
-}
-
-a {
-  color: #92badd;
-  display:inline-block;
-  text-decoration: none;
-  font-weight: 400;
-}
-
-h2 {
-  text-align: center;
-  font-size: 16px;
-  font-weight: 600;
-  text-transform: uppercase;
-  display:inline-block;
-  margin: 40px 8px 10px 8px; 
-  color: #cccccc;
-}
-
-
-
-/* STRUCTURE */
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  flex-direction: column; 
-  justify-content: center;
-  width: 100%;
-  min-height: 100%;
-  padding: 20px;
-}
-
-#formContent {
-  -webkit-border-radius: 10px 10px 10px 10px;
-  border-radius: 10px 10px 10px 10px;
-  background: #fff;
-  padding: 30px;
-  width: 90%;
-  max-width: 450px;
-  position: relative;
-  padding: 0px;
-  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
-  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
-  text-align: center;
-}
-
-#formFooter {
-  background-color: #f6f6f6;
-  border-top: 1px solid #dce8f1;
-  padding: 25px;
-  text-align: center;
-  -webkit-border-radius: 0 0 10px 10px;
-  border-radius: 0 0 10px 10px;
-}
-
-
-
-/* TABS */
-
-h2.inactive {
-  color: #cccccc;
-}
-
-h2.active {
-  color: #0d0d0d;
-  border-bottom: 2px solid #5fbae9;
-}
-
-
-
-/* FORM TYPOGRAPHY*/
-
-input[type=button], input[type=submit], input[type=reset]  {
-  background-color: #56baed;
-  border: none;
-  color: white;
-  padding: 15px 80px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  text-transform: uppercase;
-  font-size: 13px;
-  -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-  -webkit-border-radius: 5px 5px 5px 5px;
-  border-radius: 5px 5px 5px 5px;
-  margin: 5px 20px 40px 20px;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  -ms-transition: all 0.3s ease-in-out;
-  -o-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-}
-
-input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
-  background-color: #39ace7;
-}
-
-input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
-  -moz-transform: scale(0.95);
-  -webkit-transform: scale(0.95);
-  -o-transform: scale(0.95);
-  -ms-transform: scale(0.95);
-  transform: scale(0.95);
-}
-
-input[type=text], input[type=password] {
-  background-color: #f6f6f6;
-  border: none;
-  color: #0d0d0d;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 5px;
-  width: 85%;
-  border: 2px solid #f6f6f6;
-  -webkit-transition: all 0.5s ease-in-out;
-  -moz-transition: all 0.5s ease-in-out;
-  -ms-transition: all 0.5s ease-in-out;
-  -o-transition: all 0.5s ease-in-out;
-  transition: all 0.5s ease-in-out;
-  -webkit-border-radius: 5px 5px 5px 5px;
-  border-radius: 5px 5px 5px 5px;
-}
-
-input[type=text]:focus {
-  background-color: #fff;
-  border-bottom: 2px solid #5fbae9;
-}
-
-input[type=text]:placeholder {
-  color: #cccccc;
-}
-
-
-
-/* ANIMATIONS */
-
-/* Simple CSS3 Fade-in-down Animation */
-.fadeInDown {
-  -webkit-animation-name: fadeInDown;
-  animation-name: fadeInDown;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-@-webkit-keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
+  .banner{
+    position: realtive; 
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 100%;
   }
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
+  h1{
+      margin-top:1.5rem;
+      margin-bottom:1.5rem;
   }
-}
-
-@keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
+  html {
+    background-color: #56baed;
   }
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
+
+  body {
+    font-family: "Poppins", sans-serif;
+    height: 100vh;
   }
-}
 
-/* Simple CSS3 Fade-in Animation */
-@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+  a {
+    color: #92badd;
+    display:inline-block;
+    text-decoration: none;
+    font-weight: 400;
+  }
 
-.fadeIn {
-  opacity:0;
-  -webkit-animation:fadeIn ease-in 1;
-  -moz-animation:fadeIn ease-in 1;
-  animation:fadeIn ease-in 1;
-
-  -webkit-animation-fill-mode:forwards;
-  -moz-animation-fill-mode:forwards;
-  animation-fill-mode:forwards;
-
-  -webkit-animation-duration:1s;
-  -moz-animation-duration:1s;
-  animation-duration:1s;
-}
-
-.fadeIn.first {
-  -webkit-animation-delay: 0.4s;
-  -moz-animation-delay: 0.4s;
-  animation-delay: 0.4s;
-}
-
-.fadeIn.second {
-  -webkit-animation-delay: 0.6s;
-  -moz-animation-delay: 0.6s;
-  animation-delay: 0.6s;
-}
-
-.fadeIn.third {
-  -webkit-animation-delay: 0.8s;
-  -moz-animation-delay: 0.8s;
-  animation-delay: 0.8s;
-}
-
-.fadeIn.fourth {
-  -webkit-animation-delay: 1s;
-  -moz-animation-delay: 1s;
-  animation-delay: 1s;
-}
-
-/* Simple CSS3 Fade-in Animation */
-.underlineHover:after {
-  display: block;
-  left: 0;
-  bottom: -10px;
-  width: 0;
-  height: 2px;
-  background-color: #56baed;
-  content: "";
-  transition: width 0.2s;
-}
-
-.underlineHover:hover {
-  color: #0d0d0d;
-}
-
-.underlineHover:hover:after{
-  width: 100%;
-}
+  h2 {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display:inline-block;
+    margin: 40px 8px 10px 8px; 
+    color: #cccccc;
+  }
 
 
 
-/* OTHERS */
+  /* STRUCTURE */
 
-*:focus {
-    outline: none;
-} 
+  .wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column; 
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    padding: 20px;
+  }
 
-#icon {
-  width:60%;
-}
+  #formContent {
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border-radius: 10px 10px 10px 10px;
+    background: #fff;
+    padding: 30px;
+    width: 90%;
+    max-width: 450px;
+    position: relative;
+    padding: 0px;
+    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    text-align: center;
+  }
+
+  #formFooter {
+    background-color: #f6f6f6;
+    border-top: 1px solid #dce8f1;
+    padding: 25px;
+    text-align: center;
+    -webkit-border-radius: 0 0 10px 10px;
+    border-radius: 0 0 10px 10px;
+  }
+
+
+
+  /* TABS */
+
+  h2.inactive {
+    color: #cccccc;
+  }
+
+  h2.active {
+    color: #0d0d0d;
+    border-bottom: 2px solid #5fbae9;
+  }
+
+
+
+  /* FORM TYPOGRAPHY*/
+
+  input[type=button], input[type=submit], input[type=reset]  {
+    background-color: #56baed;
+    border: none;
+    color: white;
+    padding: 15px 80px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 13px;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    margin: 5px 20px 40px 20px;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+  }
+
+  input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+    background-color: #39ace7;
+  }
+
+  input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
+    -moz-transform: scale(0.95);
+    -webkit-transform: scale(0.95);
+    -o-transform: scale(0.95);
+    -ms-transform: scale(0.95);
+    transform: scale(0.95);
+  }
+
+  input[type=text], input[type=password] {
+    background-color: #f6f6f6;
+    border: none;
+    color: #0d0d0d;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 5px;
+    width: 85%;
+    border: 2px solid #f6f6f6;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+  }
+
+  input[type=text]:focus {
+    background-color: #fff;
+    border-bottom: 2px solid #5fbae9;
+  }
+
+  input[type=text]:placeholder {
+    color: #cccccc;
+  }
+
+
+
+  /* ANIMATIONS */
+
+  /* Simple CSS3 Fade-in-down Animation */
+  .fadeInDown {
+    -webkit-animation-name: fadeInDown;
+    animation-name: fadeInDown;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  @-webkit-keyframes fadeInDown {
+    0% {
+      opacity: 0;
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+    }
+    100% {
+      opacity: 1;
+      -webkit-transform: none;
+      transform: none;
+    }
+  }
+
+  @keyframes fadeInDown {
+    0% {
+      opacity: 0;
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+    }
+    100% {
+      opacity: 1;
+      -webkit-transform: none;
+      transform: none;
+    }
+  }
+
+  /* Simple CSS3 Fade-in Animation */
+  @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+  @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+
+  .fadeIn {
+    opacity:0;
+    -webkit-animation:fadeIn ease-in 1;
+    -moz-animation:fadeIn ease-in 1;
+    animation:fadeIn ease-in 1;
+
+    -webkit-animation-fill-mode:forwards;
+    -moz-animation-fill-mode:forwards;
+    animation-fill-mode:forwards;
+
+    -webkit-animation-duration:1s;
+    -moz-animation-duration:1s;
+    animation-duration:1s;
+  }
+
+  .fadeIn.first {
+    -webkit-animation-delay: 0.4s;
+    -moz-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+  }
+
+  .fadeIn.second {
+    -webkit-animation-delay: 0.6s;
+    -moz-animation-delay: 0.6s;
+    animation-delay: 0.6s;
+  }
+
+  .fadeIn.third {
+    -webkit-animation-delay: 0.8s;
+    -moz-animation-delay: 0.8s;
+    animation-delay: 0.8s;
+  }
+
+  .fadeIn.fourth {
+    -webkit-animation-delay: 1s;
+    -moz-animation-delay: 1s;
+    animation-delay: 1s;
+  }
+
+  /* Simple CSS3 Fade-in Animation */
+  .underlineHover:after {
+    display: block;
+    left: 0;
+    bottom: -10px;
+    width: 0;
+    height: 2px;
+    background-color: #56baed;
+    content: "";
+    transition: width 0.2s;
+  }
+
+  .underlineHover:hover {
+    color: #0d0d0d;
+  }
+
+  .underlineHover:hover:after{
+    width: 100%;
+  }
+
+
+
+  /* OTHERS */
+
+  *:focus {
+      outline: none;
+  } 
+
+  #icon {
+    width:60%;
+  }
 
 </style>
diff --git a/src/view/panelAdmin.vue b/src/view/panelAdmin.vue
new file mode 100644
index 0000000..01acd08
--- /dev/null
+++ b/src/view/panelAdmin.vue
@@ -0,0 +1,543 @@
+<template>
+    <div >
+        <Header />
+        <div class="row">
+            <div style="height: 50%; background-color: #334FA1">
+            </div>
+        </div>
+        <div class="wrapper fadeInDown">
+            <div id="formContent">
+                <div class="container principal">
+                
+                <b-tabs content-class="mt-5">
+                    <b-tab title="Enviar Ficha" active>
+                         <form>
+                            <div class="table-responsive">
+                            <table class="table table-striped">
+                                <thead>
+                                    <tr>
+                                    <th scope="col">#</th>
+                                    <th scope="col">Nombre</th> 
+                                    <th scope="col">Apellido Paterno</th>
+                                    <th scope="col">Apellido Materno</th>
+                                    <th scope="col">Correo</th>
+                                    <th scope="col">Comunidad</th>
+                                    <th scope="col">Pago total</th>
+                                    <th scope="col">Enviar Ficha</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="item in enviar" v-bind:key="item.idPersona">
+                                        <th scope="row">{{item.number}}</th>
+                                        <td>{{item.nombre}}</td>
+                                        <td>{{item.apellidoP}}</td>
+                                        <td>{{item.apellidoM}}</td>
+                                        <td>{{item.correo}}</td>
+                                        <td>{{item.comunidad}}</td>
+                                        <td>{{item.pago}}</td>
+                                        <td ><button type="button" class="btn btn-outline-success" v-b-modal.fichaDeposito >Enviar ficha</button></td>
+                                    </tr>
+                                </tbody>
+                                </table>
+                            </div>
+                            <input type="submit" class="fadeIn fourth" value="Descargar">
+                        </form>
+                    </b-tab>
+
+                    <b-tab title="Pendientes por pagar">
+                        <form >
+                            <div class="table-responsive">
+                            <table class="table table-striped">
+                                <thead>
+                                    <tr>
+                                    <th scope="col">#</th>
+                                    <th scope="col">Nombre</th> 
+                                    <th scope="col">Apellido Paterno</th>
+                                    <th scope="col">Apellido Materno</th>
+                                    <th scope="col">Correo</th>
+                                    <th scope="col">Comunidad</th>
+                                    <th scope="col">Pago total</th>
+                                    <th scope="col">Fecha de envio</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="item in pendientes" v-bind:key="item.idPersona">
+                                        <th scope="row">{{item.number}}</th>
+                                        <td>{{item.nombre}}</td>
+                                        <td>{{item.apellidoP}}</td>
+                                        <td>{{item.apellidoM}}</td>
+                                        <td>{{item.correo}}</td>
+                                        <td>{{item.comunidad}}</td>
+                                        <td>{{item.pago}}</td>
+                                        <td >{{item.fecha}}</td>
+                                    </tr>
+                                </tbody>
+                                </table>
+                            </div>
+                            <input type="submit" class="fadeIn fourth" value="Descargar">
+                        </form>
+                    </b-tab>
+                    <b-tab title="Revisar Ficha" >
+                        <form >
+                            <div class="table-responsive">
+                            <table class="table table-striped">
+                                <thead>
+                                    <tr>
+                                    <th scope="col">#</th>
+                                    <th scope="col">Nombre</th> 
+                                    <th scope="col">Apellido Paterno</th>
+                                    <th scope="col">Apellido Materno</th>
+                                    <th scope="col">Correo</th>
+                                    <th scope="col">Comunidad</th>
+                                    <th scope="col">Pago total</th>
+                                    <th scope="col">Abrir pago</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="item in revisar" v-bind:key="item.idPersona">
+                                        <th scope="row">{{item.number}}</th>
+                                        <td>{{item.nombre}}</td>
+                                        <td>{{item.apellidoP}}</td>
+                                        <td>{{item.apellidoM}}</td>
+                                        <td>{{item.correo}}</td>
+                                        <td>{{item.comunidad}}</td>
+                                        <td>{{item.pago}}</td>
+                                        <td ><button type="button" class="btn btn-outline-success" v-b-modal.mostrarPago >Mostrar pago</button></td>
+                                    </tr>
+                                </tbody>
+                                </table>
+                            </div>
+                            <input type="submit" class="fadeIn fourth" value="Descargar">
+                        </form>
+                    </b-tab>
+                    <b-tab title="Pagados" >
+                        <form >
+                            <div class="table-responsive">
+                            <table class="table table-striped">
+                                <thead>
+                                    <tr>
+                                    <th scope="col">#</th>
+                                    <th scope="col">Nombre</th> 
+                                    <th scope="col">Apellido Paterno</th>
+                                    <th scope="col">Apellido Materno</th>
+                                    <th scope="col">Correo</th>
+                                    <th scope="col">Comunidad</th>
+                                    <th scope="col">Pago total</th>
+                                
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="item in pagados" v-bind:key="item.idPersona">
+                                        <th scope="row">{{item.number}}</th>
+                                        <td>{{item.nombre}}</td>
+                                        <td>{{item.apellidoP}}</td>
+                                        <td>{{item.apellidoM}}</td>
+                                        <td>{{item.correo}}</td>
+                                        <td>{{item.comunidad}}</td>
+                                        <td>{{item.pago}}</td>
+                                        
+                                    </tr>
+                                </tbody>
+                                </table>
+                            </div>
+                            <input type="submit" class="fadeIn fourth" value="Descargar">
+                        </form>
+                    </b-tab>
+                    <b-tab title="Solicitud de Factura" >
+                        <form >
+                            <div class="table-responsive">
+                            <table class="table table-striped">
+                                <thead>
+                                    <tr>
+                                    <th scope="col">#</th>
+                                    <th scope="col">Nombre</th> 
+                                    <th scope="col">Apellido Paterno</th>
+                                    <th scope="col">Apellido Materno</th>
+                                    <th scope="col">Correo</th>
+                                    <th scope="col">Comunidad</th>
+                                    <th scope="col">Pago total</th>
+                                    <th scope="col">Mostrar datos</th>
+                                    <th scope="col">Enviar Factura</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="item in factura" v-bind:key="item.idPersona">
+                                        <th scope="row">{{item.number}}</th>
+                                        <td>{{item.nombre}}</td>
+                                        <td>{{item.apellidoP}}</td>
+                                        <td>{{item.apellidoM}}</td>
+                                        <td>{{item.correo}}</td>
+                                        <td>{{item.comunidad}}</td>
+                                        <td>{{item.pago}}</td>
+                                        <td ><button type="button" class="btn btn-outline-primary" v-b-modal.DatosPago>Mostrar pago</button></td>
+                                        <td ><button type="button" class="btn btn-outline-success" >Enviar Factura</button></td>
+                                    </tr>
+                                </tbody>
+                                </table>
+                            </div>
+                            <input type="submit" class="fadeIn fourth" value="Descargar">
+                        </form>
+                    </b-tab>
+
+                </b-tabs>
+                
+                              
+
+                <b-modal id="fichaDeposito" centered title="BootstrapVue">
+                    <p class="my-4">Enviar Ficha de deposito</p>
+                </b-modal>
+
+                <b-modal id="mostrarPago" centered title="Pago de Daniel Adrian">
+                    <p class="my-4">Pago </p>
+                </b-modal>
+
+                <b-modal id="DatosPago" centered title="Datos de: " hide-footer>
+                    <p class="my-4">Pago </p>
+                    
+                </b-modal>
+                
+               
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+export default {
+  name: "panel",
+  components: {
+    Header
+  },
+  data() {
+    return {
+         enviar: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
+        {number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
+        pendientes: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00",fecha: "01/09/2020"},
+        {number: 1,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00", fecha: "01/09/2020"}],
+        revisar: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
+        {number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
+        pagados: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
+        {number: 1,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
+        factura: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
+        {number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
+        
+        selected: 1,
+       
+    };
+  }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    .principal{
+        padding: 3rem;
+    }
+    .banner{
+    position: realtive; 
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 100%;
+    }
+    h1{
+        margin-top:1rem;
+        margin-bottom:1rem;
+    }
+    html {
+    background-color: #56baed;
+    }
+
+    body {
+    font-family: "Poppins", sans-serif;
+    height: 100vh;
+    }
+
+    a {
+    color: #92badd;
+    display:inline-block;
+    text-decoration: none;
+    font-weight: 400;
+    }
+
+    h2 {
+    text-align: left;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display:inline-block;
+    margin: 40px 8px 10px 8px; 
+    color: #cccccc;
+    }
+
+
+
+    /* STRUCTURE */
+
+    .wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column; 
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    padding: 20px;
+    }
+    .wrapperRow {
+    display: flex;
+    flex-direction: column; 
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    
+    margin-left: 1rem;
+    }
+
+    #formContent {
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border-radius: 10px 10px 10px 10px;
+    background: #fff;
+    width: 100%;
+    position: relative;
+    padding: 0px;
+    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+    text-align: center;
+    }
+
+    #formFooter {
+    background-color: #f6f6f6;
+    border-top: 1px solid #dce8f1;
+    padding: 25px;
+    text-align: center;
+    -webkit-border-radius: 0 0 10px 10px;
+    border-radius: 0 0 10px 10px;
+    }
+
+
+
+    /* TABS */
+
+    h2.inactive {
+    color: #cccccc;
+    }
+
+    h2.active {
+    color: #0d0d0d;
+    border-bottom: 2px solid #5fbae9;
+    }
+
+
+
+    /* FORM TYPOGRAPHY*/
+
+    input[type=button], input[type=submit], input[type=reset]  {
+    background-color: #56baed;
+    border: none;
+    color: white;
+    padding: 15px 80px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 13px;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    margin: 5px 20px 40px 20px;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    }
+
+    input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+    background-color: #39ace7;
+    }
+
+    input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
+    -moz-transform: scale(0.95);
+    -webkit-transform: scale(0.95);
+    -o-transform: scale(0.95);
+    -ms-transform: scale(0.95);
+    transform: scale(0.95);
+    }
+
+    input[type=text], input[type=password]{
+    background-color: #f6f6f6;
+    border: none;
+    color: #0d0d0d;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left:1rem;
+    
+    
+    width: 100%;
+    border: 2px solid #f6f6f6;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    }
+    select[type=text] {
+    background-color: #f6f6f6;
+    border: none;
+    color: #0d0d0d;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left:1rem;
+    width: 100%;
+    border: 2px solid #f6f6f6;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    }
+
+    input[type=text]:focus {
+    background-color: #fff;
+    border-bottom: 2px solid #5fbae9;
+    }
+
+    input[type=text]:placeholder {
+    color: #cccccc;
+    }
+
+
+
+    /* ANIMATIONS */
+
+    /* Simple CSS3 Fade-in-down Animation */
+    .fadeInDown {
+    -webkit-animation-name: fadeInDown;
+    animation-name: fadeInDown;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    }
+
+    @-webkit-keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+    }
+
+    @keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+    }
+
+    /* Simple CSS3 Fade-in Animation */
+    @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+    @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+
+    .fadeIn {
+    opacity:0;
+    -webkit-animation:fadeIn ease-in 1;
+    -moz-animation:fadeIn ease-in 1;
+    animation:fadeIn ease-in 1;
+
+    -webkit-animation-fill-mode:forwards;
+    -moz-animation-fill-mode:forwards;
+    animation-fill-mode:forwards;
+
+    -webkit-animation-duration:1s;
+    -moz-animation-duration:1s;
+    animation-duration:1s;
+    }
+
+    .fadeIn.first {
+    -webkit-animation-delay: 0.4s;
+    -moz-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+    }
+
+    .fadeIn.second {
+    -webkit-animation-delay: 0.6s;
+    -moz-animation-delay: 0.6s;
+    animation-delay: 0.6s;
+    }
+
+    .fadeIn.third {
+    -webkit-animation-delay: 0.8s;
+    -moz-animation-delay: 0.8s;
+    animation-delay: 0.8s;
+    }
+
+    .fadeIn.fourth {
+    -webkit-animation-delay: 1s;
+    -moz-animation-delay: 1s;
+    animation-delay: 1s;
+    }
+
+    /* Simple CSS3 Fade-in Animation */
+    .underlineHover:after {
+    display: block;
+    left: 0;
+    bottom: -10px;
+    width: 0;
+    height: 2px;
+    background-color: #56baed;
+    content: "";
+    transition: width 0.2s;
+    }
+
+    .underlineHover:hover {
+    color: #0d0d0d;
+    }
+
+    .underlineHover:hover:after{
+    width: 100%;
+    }
+
+
+
+    /* OTHERS */
+
+    *:focus {
+        outline: none;
+    } 
+
+    #icon {
+    width:60%;
+    }
+
+</style>
diff --git a/src/view/usuario.vue b/src/view/usuario.vue
index 4e00eac..c813744 100644
--- a/src/view/usuario.vue
+++ b/src/view/usuario.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-       <div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 20px; padding-right: 20px;" src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>  <router-view></router-view>
+       <div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 20px; padding-right: 20px;" src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>  
   
         <div class="wrapper fadeInDown">
             <div id="formContent">
@@ -30,6 +30,8 @@
                             <input type="file" class="form-control-file" id="exampleFormControlFile1">
                         </div>
                     </div>
+                    
+                    <input type="submit" class="fadeIn fourth" value="Enviar">
                     <div class="row">
                         
 
@@ -43,6 +45,17 @@
                             Quiero Factura
                             </b-form-checkbox>    
                         
+                    </div>
+                     <div class="row">
+                        <div class="col-md-4">
+                            <input type="text"  class="fadeIn second" name="login" placeholder="Nombre">
+                        </div>
+                        <div class="col-md-4">
+                            <input type="text"  class="fadeIn second" name="login" placeholder="Apellido paterno">
+                        </div>
+                        <div class="col-md-4">
+                            <input type="text"  class="fadeIn second" name="login" placeholder="Apellido Materno">
+                        </div>
                     </div>
                     <div class="row">
                         
@@ -84,6 +97,7 @@
                         </div>
                         
                     </div>
+                    <input type="submit" class="fadeIn fourth" value="Enviar">
                 </form>
 
             <!-- Remind Passowrd -->