diff --git a/package-lock.json b/package-lock.json
index edc2cd6..911e582 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1054,6 +1054,32 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz",
+      "integrity": "sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -7938,6 +7964,12 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
     "last-run": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/last-run/-/last-run-1.1.1.tgz",
@@ -11284,6 +11316,38 @@
         }
       }
     },
+    "sass-loader": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.2.tgz",
+      "integrity": "sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.3",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^2.7.1",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -13311,6 +13375,11 @@
         "webrtc-adapter": "7.7.0"
       }
     },
+    "vue-router": {
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
+      "integrity": "sha512-ioRY5QyDpXM9TDjOX6hX79gtaMXSVDDzSlbIlyAmbHNteIL81WIVB2e+jbzV23vzxtoV0krdS2XHm+GxFg+Nxg=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index 2650bfb..5e89762 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.3",
@@ -16,7 +19,8 @@
     "sweetalert2": "^10.3.5",
     "validator": "^13.1.17",
     "vue": "^2.6.11",
-    "vue-qrcode-reader": "^2.3.13"
+    "vue-qrcode-reader": "^2.3.13",
+    "vue-router": "^3.4.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -28,6 +32,8 @@
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
     "gulp-sass": "^4.1.0",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^10.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/src/App.vue b/src/App.vue
index c95ff2e..cba5da0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,62 @@
 <template>
-  <div id="app">
-    <p>hol</p>
-  </div>
+  <router-view></router-view>
 </template>
 
 <script>
+import validator from 'validator'
+//import axios from 'axios'
+//import Swal from 'sweetalert2'
 
 export default {
-  name: "App",
-};
+  data() {
+    return { password: '', noCuenta: '' }
+  },
+  methods: {
+    mostrarBoton() {
+      if (this.password && this.noCuenta) return true
+      return false
+    },
+    login() {
+    },
+    esNumero(numero) {
+      const ultimaLetra = numero.length - 1
+
+      if (numero && !validator.isNumeric(numero[ultimaLetra]))
+        return numero.substr(0, ultimaLetra)
+      return numero
+    },
+    maxLength(str, max) {
+      if (str.length > max) return str.substr(0, max)
+      return str
+    }
+  },
+  watch: {
+    noCuenta() {
+      this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
+      this.noCuenta = this.esNumero(this.noCuenta)
+      this.noCuenta = this.maxLength(this.noCuenta, 9)
+    }
+  },
+  beforeCreate() {
+    if (
+      localStorage.getItem('noCuenta') &&
+      localStorage.getItem('nombreCompleto') &&
+      localStorage.getItem('tipoUsuario')
+    )
+      this.$router.push('./usuario')
+    else {
+      localStorage.removeItem('noCuenta')
+      localStorage.removeItem('nombreCompleto')
+      localStorage.removeItem('tipoUsuario')
+    }
+  }
+}
 </script>
 
-<style></style>
+<style scoped>
+  .btn .btn-primary{
+    color: BB8921;
+  }
+</style>>
+
+
diff --git a/src/components/prestamos/menu.vue b/src/components/prestamos/menu.vue
new file mode 100644
index 0000000..66f5a6f
--- /dev/null
+++ b/src/components/prestamos/menu.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <b-button class="btn btn-light" v-b-toggle.sidebar-1>
+		<font-awesome-icon icon="bars" />
+	</b-button>
+    <b-sidebar id="sidebar-1" shadow>
+      <div class="px-3 py-2">
+		<b-navbar-nav class="navegacion" >
+			<div class="row">
+				<div class="col-4">
+					<font-awesome-icon icon="user" class="redonda d-inline" />
+				</div>
+				<div class="col-8">
+					<p class="h5 d-inline">{{name}}</p>
+					<p>Operador</p>
+				</div>
+			</div>
+			<br><br><br>	
+			<b-nav-item :to="{name: 'Login'}">Inicio</b-nav-item>
+			<b-nav-item :to="{name: 'Prestamos'}">Prestamos</b-nav-item>
+			<b-nav-item :to="{name: 'Prestamos'}">Prestamo</b-nav-item>
+			<b-nav-item :to="{name: 'Prestamos'}">Devolución</b-nav-item>
+			<b-nav-item :to="{name: 'Prestamos'}">Equipos</b-nav-item>
+			<b-nav-item :to="{name: 'Usuarios'}">Usuarios</b-nav-item>
+			<b-dropdown id="dropdown" variant="white" class="m-2" text="Administrador">
+				<b-dropdown-item href="#">Operadores</b-dropdown-item>
+				<b-dropdown-item href="#">Carga Masiva</b-dropdown-item>
+				<b-dropdown-item href="#">Multas</b-dropdown-item>
+			</b-dropdown>
+			<b-button @click="cerrarSesion()" class="fixed-bottom boton" block>
+				<p class="px-4 py-2 mb-0">Cerrar Sesion</p>
+			</b-button>
+		</b-navbar-nav>
+      </div>
+    </b-sidebar>
+  </div>
+</template>
+
+<script>
+export default {
+	data(){
+		return{
+		name: localStorage.getItem('nombreCompleto')
+        ? localStorage.getItem('nombreCompleto')
+        : ''
+		}
+	},
+	methods:{
+	cerrarSesion() {
+      localStorage.removeItem('noCuenta')
+      localStorage.removeItem('nombreCompleto')
+      localStorage.removeItem('token')
+      localStorage.removeItem('tipoUsuario')
+      localStorage.removeItem('qrPedido')
+      localStorage.removeItem('qrOtorgado')
+      localStorage.removeItem('qrSalonPedido')
+      localStorage.removeItem('qrSalonOtorgado')
+      localStorage.removeItem('equipo')
+      localStorage.removeItem('salon')
+      localStorage.removeItem('idPrestamo')
+      localStorage.removeItem('horaMaxEntrega')
+      localStorage.removeItem('horaPedido')
+      localStorage.removeItem('dosHrs')
+      localStorage.removeItem('cincoMin')
+
+      this.$router.push('./')
+    }
+	}
+}
+</script>
+
+<style scoped>
+	.m-2{
+		display: flex;
+		align-items: start;
+	}
+	.redonda{
+		width:50px;
+		height:50px;
+		border-radius:150px;
+	}
+	.navegacion{
+		margin: 5%;
+	}
+	.imgLogo{
+		width: 20px;
+		height: 20px;
+		padding-bottom: 4px;
+	}
+	.navbar-dark .navbar-nav .nav-link{
+      color:#bb8821
+	}
+	.boton{
+		background-color: #bb8821
+	}
+	.boton:hover{
+		background-color: #bb8821;
+		color:black;
+	}
+
+</style>
\ No newline at end of file
diff --git a/src/components/prestamos/tabla.vue b/src/components/prestamos/tabla.vue
new file mode 100644
index 0000000..3452a93
--- /dev/null
+++ b/src/components/prestamos/tabla.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="tabla">
+        <b-table striped hover :items="items"></b-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    props:{
+        items: Array,
+    },
+    mounted:{
+      vencido(){
+        for(let i=0; i<this.items.length; i++)
+          if((this.items[i].fin - this.items[i].fin) > 2){
+            this.items[i]._rowVariant = 'danger';
+          }
+      }
+    }
+  }
+</script>
+
+<style  scoped>
+    .tabla{
+        display: flex;
+    }
+</style>
\ No newline at end of file
diff --git a/src/config/config.js b/src/config/config.js
new file mode 100644
index 0000000..e358102
--- /dev/null
+++ b/src/config/config.js
@@ -0,0 +1,8 @@
+const config = {
+    // api: 'https://venus.acatlan.unam.mx/ss-pruebas/',
+    // api: 'https://12704064.ngrok.io/',
+    // api: 'http://localhost:3000/',
+    api: 'https://venus.acatlan.unam.mx/serviciosocial',
+}
+
+module.exports = config
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..9cad8ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,30 @@
 import Vue from 'vue'
+import router from './router'
 import App from './App.vue'
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+    faSearch,
+    faBars,
+    faUser
+
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faSearch)
+library.add(faBars)
+library.add(faUser)
+
+
+
+Vue.use(BootstrapVue)
+Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.config.productionTip = false
 
 new Vue({
   render: h => h(App),
+  router
 }).$mount('#app')
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
new file mode 100644
index 0000000..64d9301
--- /dev/null
+++ b/src/pages/login/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <section class="container absoluto">
+    <div class="row align-items-center full-height justify-content-center general">
+      <div class="col">
+        <div class="row justify-content-center">
+          <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center">
+            <img
+              src="../../static/icon.png"
+              alt="logo_pcpuma"
+              class="img-fluid mb-3"
+            />
+          </div>
+        </div>
+
+        <div class="row justify-content-center">
+          <div class="col-10 col-sm-8 col-md-6 col-lg-4 form-group">
+            <input
+              type="text"
+              placeholder="Usuario"
+              class="form-control campo"
+              v-model="usuario"
+              min="0"
+            />
+          </div>
+        </div>
+
+        <div class="row justify-content-center">
+          <div class="col-10 col-sm-8 col-md-6 col-lg-4 form-group">
+            <input
+              type="password"
+              placeholder="Contraseña"
+              class="form-control campo"
+              v-model="password"
+            />
+          </div>
+        </div>
+
+        <div class="row justify-content-center">
+          <div class="col-6 col-sm-5 col-md-4 col-lg-3">
+            <button
+              class="btn btn-primary btn-block"
+              @click="login()"
+              v-if="mostrarBoton()"
+            >
+              Iniciar Sesión
+            </button>
+            <button class="btn btn-primary disabled btn-block" disabled v-else>
+              Iniciar Sesión
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import config from '../../config/config.js'
+import axios from 'axios'
+import Swal from 'sweetalert2'
+
+export default {
+  data() {
+    return { usuario: '', password: '' }
+  },
+  methods: {
+    mostrarBoton() {
+      if (this.password && this.usuario) return true
+      return false
+    },
+    login() {
+      let data={
+        id: this.usuario,
+        secreto: this.password
+      }
+
+      axios
+        .post(`${config.api}login`,data)
+        .then(res => {
+          localStorage.setItem(
+            'nombreCompleto',
+            `${res.data.apellidoPaterno} ${res.data.apellidoMaterno} ${res.data.nombre}`
+          )
+          localStorage.setItem('noCuenta',this.noCuenta)
+          localStorage.setItem('tipoUsuario',res.data.tipoUsuario.id)
+          localStorage.setItem('token',res.data.token)
+          this.$router.push('./')
+        })
+        // eslint-disable-next-line no-unused-vars
+        .catch(err => {
+          Swal.fire({
+            icon: 'error',
+            title: 'Oops...',
+            text: 'Usuario o contraseña invalidos'
+          })
+        })
+    },
+  },
+  watch: {
+    usuario() {
+      this.usuario = this.maxLength(this.usuario, 40)
+    }
+  },
+}
+</script>
+
+<style scoped>
+  .general{
+    margin-top: 15%;    
+  }
+  .botonLogin{
+    color: #bb8821
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/prestamos/index.vue b/src/pages/prestamos/index.vue
new file mode 100644
index 0000000..c8a2034
--- /dev/null
+++ b/src/pages/prestamos/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="row titulo">
+        <div class="col-8">
+           <responsiveMenu
+              class="d-inline"
+            />
+            <p class="h3 d-inline">Prestamos</p>
+        </div>
+        <div class="col-4">
+         <p class="d-inline nombre">{{nombre}}</p>
+        <font-awesome-icon icon="user" class="redonda d-inline" />
+        </div>
+      </div>
+        <div class="row buscador align-items-center full-height justify-content-center">
+          <div class="col-12">
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" id="basic-addon1">
+                  <img 
+                    class="imagenBuscador" 
+                    src="https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic/search1600.png" 
+                  >
+                </span>
+              </div>
+              <input 
+                type="number" 
+                class="form-control" 
+                v-model="noCuenta" 
+                placeholder="Buscar usuario" 
+                min="0"  
+                aria-describedby="basic-addon1">
+            </div>
+          </div>
+        </div>
+          <div class="row align-items-center full-height justify-content-center">
+            <div class="col-2">
+              <b-button @click="tabla = true" variant="light" class="btn-block">Equipos</b-button>
+            </div>
+            <div class="col-2">
+              <b-button @click="tabla = false" variant="light" class="btn-block">Salas</b-button>
+            </div>
+           <div class="col-12">
+            <tablaPrestamos :items="Salas" v-if="tabla == false" ></tablaPrestamos>
+            <tablaPrestamos :items="Equipos" v-if="tabla == true" v-bind:nombre="name"></tablaPrestamos>
+           </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import validator from 'validator'
+import responsiveMenu from '../../components/prestamos/menu'
+import tablaPrestamos from '../../components/prestamos/tabla' 
+export default {
+  components: {
+    responsiveMenu,
+    tablaPrestamos,
+  },
+  data: () => ({
+    nombre: localStorage.getItem('nombreCompleto')
+        ? localStorage.getItem('nombreCompleto')
+        : '',
+    noCuenta: '',
+    tabla: true,
+    Equipos: [
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: 11, fin:4, _rowVariant: ''},
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
+      { Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' }
+    ],
+    Salas: [
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+      { Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
+    ],
+  }),
+  methods:{
+    esNumero(numero) {
+      const ultimaLetra = numero.length - 1
+      if (numero && !validator.isNumeric(numero[ultimaLetra]))
+        return numero.substr(0, ultimaLetra)
+      return numero
+    },
+    maxLength(str, max) {
+      if (str.length > max) return str.substr(0, max)
+      return str
+    }
+  },
+   watch: {
+    noCuenta() {
+      this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
+      this.noCuenta = this.esNumero(this.noCuenta)
+      this.noCuenta = this.maxLength(this.noCuenta, 9)
+    }
+  },
+}
+</script>
+
+<style scoped>
+  .titulo{
+    padding: 30px 10px;
+  }
+  .h3{
+    margin-left: 15px;
+  }
+  .buscador{
+    padding: 50px 20px;
+    border-radius: 50%;
+  }
+  .imagenBuscador{
+    height: 15px;
+    width: 15px;
+  }
+  .redonda{
+		width:50px;
+		height:50px;
+		border-radius:150px;
+	}
+  .nombre{
+    margin-right: 5%;
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/pages/usuarios/index.vue b/src/pages/usuarios/index.vue
new file mode 100644
index 0000000..6a8f463
--- /dev/null
+++ b/src/pages/usuarios/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="container">
+     <div class="row titulo ">
+      <div class="col-8">
+       <responsiveMenu
+          class="d-inline"
+        />
+        <p class="h3 d-inline">Usuarios</p>
+      </div>
+      <div class="col-4">
+        <p class="d-inline nombre">{{nombre}}</p>
+        <font-awesome-icon icon="user" class="redonda d-inline" />
+      </div>
+    </div>
+    <div class="datosPersonales container">
+      <div class="buscador col-4">
+        <span>Usuario</span>
+        <div class="row">
+          <div class="col-10">
+            <input 
+              type="number" 
+              class="form-control d-inline" 
+              v-model="noCuenta" 
+              placeholder="Buscar usuario" 
+              min="0" > 
+          </div>
+          <div class="col-2">
+            <b-button class="botonBuscador">
+            <font-awesome-icon icon="search" />
+            </b-button>
+          </div>
+        </div>
+        </div>
+        <div class="row">
+      <div class="col-4">
+        <div>
+          <span class="h5">Datos personales</span>
+        </div>
+        <br>
+        <div>
+          <span>Nombre: </span>
+          <span class="d-block">{{user.name}}</span>
+        </div>
+        <br>
+        <div>
+          <span>Carrera: </span>
+          <span class="d-block">{{user.carrera}}</span>
+        </div>
+        <br>
+        <div>
+          <span>Tipo: </span>
+          <span class="d-block">{{user.tipo}}</span>
+        </div>
+      </div>
+      <div class="col-4">
+        <span class="h5">Prestamos</span>
+        <br><br>
+        <div>
+          <span>#Prestamos:</span>
+          <span class="d-block">{{user.noPrestamos}}</span>
+        </div>
+        <br>
+        <div>
+          <span>Multa PC PUMA:</span>
+          <span class="d-block">{{user.multaPCPUMA}}</span>
+        </div>
+        <br>
+        <div>
+          <span>Multa red:</span>
+          <span class="d-block">{{user.multaRed}}</span>
+        </div>
+      </div>
+      <div class="col-4">
+        <span class="h5">Administrador</span>
+        <div class="Multa">
+          <br>
+          <div>
+            <span>Multa PC PUMA</span>
+            <br>
+            <span class="d-block">{{user.fechaMultaPCPUMA}}</span>
+            <br>
+            <b-button-group>
+              <b-button class="multar" variant="light" @click="user.multaPCPUMA = true">Multar</b-button>
+              <b-button class="quitar" variant="light" @click="user.multaPCPUMA = false">Quitar</b-button>
+            </b-button-group>
+            <br><br>
+            <span>Multa red</span>
+            <br>
+            <span class="d-block">{{user.fechaMultaRed}}</span>
+            <br>
+            <b-button-group>
+              <b-button class="multar" variant="light" @click="user.multaRed = true">Multar</b-button>
+              <b-button class="quitar" variant="light" @click="user.multaRed = false">Quitar</b-button>
+            </b-button-group>
+          </div>
+        </div>
+      </div>
+    </div> 
+    </div> 
+    <br><br>
+    <div class="container">
+      <tablaPrestamos  :items="user.prestamos"></tablaPrestamos>
+    </div>   
+  </div>
+</template>
+
+<script>
+import tablaPrestamos from '../../components/prestamos/tabla' 
+import validator from 'validator'
+import responsiveMenu from '../../components/prestamos/menu'
+
+
+export default {
+  components: {
+    tablaPrestamos,
+    responsiveMenu
+  },
+  data: () => ({
+    nombre:
+      localStorage.getItem('nombreCompleto')
+        ? localStorage.getItem('nombreCompleto')
+        : '',
+    noCuenta: null,
+    user:{
+      name: 'Arturo Guerrero',
+      carrera: 'MAC',
+      tipo: 'Estudiante',
+      noPrestamos: 112,
+      multaPCPUMA: false,
+      multaRed: false,
+      fechaMultaPCPUMA: '10/10/2020',
+      fechaMultaRed: '10/10/2020',
+      prestamos: [
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        {fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
+        
+      ] 
+    },
+  }),
+  methods:{
+    esNumero(numero) {
+      const ultimaLetra = numero.length - 1
+      if (numero && !validator.isNumeric(numero[ultimaLetra]))
+        return numero.substr(0, ultimaLetra)
+      return numero
+    },
+    maxLength(str, max) {
+      if (str.length > max) return str.substr(0, max)
+      return str
+    }
+  },
+   watch: {
+    noCuenta() {
+      this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
+      this.noCuenta = this.esNumero(this.noCuenta)
+      this.noCuenta = this.maxLength(this.noCuenta, 9)
+    }
+  },
+}
+</script>
+
+<style scoped>
+  .titulo{
+    padding: 30px 10px;
+    background: #f9f9f9;
+    margin-bottom: 2%;
+    
+  }
+  .h3{
+    margin-left: 15px;
+  }
+  .buscador{
+    padding: 50px 20px;
+    border-radius: 50%;
+  }
+  .imagenBuscador{
+    height: 15px;
+    width: 15px;
+  }
+  .redonda{
+		width:40px;
+		height:40px;
+		border-radius:150px;
+	}
+  .nombre{
+    margin-right: 5%;
+  }
+  .multar{
+    color: green;
+    margin-right:20%;
+  }
+  .quitar{
+    color: red;
+  }
+  .datosPersonales{
+    border-radius:10px;
+    box-shadow: 
+           0 0  0 2px rgb(255,255,255),
+           0.3em 0.3em 1em rgba(0,0,0,0.3);
+  padding-left: 3%;
+  padding-bottom: 3%; 
+  }
+  .h5{
+    color: gray
+  }
+  .botonBuscador{
+    background-color: #bb8921;
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..a555830
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Prestamos from './pages/prestamos/index.vue'
+import Login from './pages/login/index.vue'
+import Usuarios from './pages/usuarios/index.vue'
+
+Vue.use(Router)
+
+export default new Router({
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            name: 'Prestamos',
+            component: Prestamos
+        },
+        {
+            path: '/login',
+            name: 'Login',
+            component: Login 
+        },
+        {
+            path: '/usuarios',
+            name: 'Usuarios',
+            component: Usuarios 
+        },
+    ]
+})
\ No newline at end of file
diff --git a/src/static/icon.png b/src/static/icon.png
new file mode 100644
index 0000000..50ff3d3
Binary files /dev/null and b/src/static/icon.png differ