diff --git a/package-lock.json b/package-lock.json
index f7e381b..f7f00ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1795,6 +1795,15 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -5012,7 +5021,6 @@
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
       "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==",
-      "dev": true,
       "requires": {
         "debug": "=3.1.0"
       },
@@ -5021,7 +5029,6 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -5029,8 +5036,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -6589,8 +6595,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -14734,6 +14739,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-router": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
+      "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
+    },
     "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 a28a576..ec9df20 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
     "@fortawesome/free-brands-svg-icons": "^5.5.0",
     "@fortawesome/free-solid-svg-icons": "^5.5.0",
     "@fortawesome/vue-fontawesome": "^0.1.2",
+    "axios": "^0.18.0",
     "bulma": "^0.7.2",
     "i": "^0.3.6",
     "npm": "^6.4.1",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.1.1",
diff --git a/src/App.vue b/src/App.vue
index bde9e1a..9fa0331 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,11 @@
 <template lang="pug">
   #app
-    um-header
-    um-inicio
-    um-footer
+    router-view
 </template>
 
 <script>
-import UmFooter from './layout/Footer.vue'
-import UmHeader from './layout/Header.vue'
-import UmInicio from './layout/Inicio.vue'
 export default {
-  name: 'app',
-  components: { UmFooter, UmHeader, UmInicio }
+  name: 'app'
 }
 </script>
 
diff --git a/src/assets/unam.png b/src/assets/unam.png
new file mode 100644
index 0000000..5ad44cf
Binary files /dev/null and b/src/assets/unam.png differ
diff --git a/src/components/general/Notificacion.vue b/src/components/general/Notificacion.vue
new file mode 100644
index 0000000..f56b9cc
--- /dev/null
+++ b/src/components/general/Notificacion.vue
@@ -0,0 +1,28 @@
+<template lang="pug">
+  div.notification(class="is-danger" v-if="this.status")
+    button.delete(v-on:click="change()")
+    span {{ msj }}
+</template>
+
+<script>
+export default {
+  props: {
+    msj: String
+  },
+  methods: {
+    change: function () {
+      this.status = false
+    }
+  },
+  watch: {
+    msj: function () {
+      this.status = true
+    }
+  },
+  data () {
+    return {
+      status: true
+    }
+  }
+}
+</script>
diff --git a/src/components/inicio/Equipo.vue b/src/components/inicio/Equipo.vue
index ebd3ea5..a838269 100644
--- a/src/components/inicio/Equipo.vue
+++ b/src/components/inicio/Equipo.vue
@@ -1,7 +1,6 @@
-<template lang="html">
- <section>
-   equipo
- </section>
+<template lang="pug">
+  section
+    span resumen
 </template>
 
 <script>
diff --git a/src/components/inicio/Resumen.vue b/src/components/inicio/Resumen.vue
index b517795..57697e2 100644
--- a/src/components/inicio/Resumen.vue
+++ b/src/components/inicio/Resumen.vue
@@ -1,27 +1,21 @@
-<template lang="html">
-    <div class="tabs is-centered">
-      <ul>
-        <li class="is-active">
-          <a>
-            <span class="icon is-small"><font-awesome-icon icon="laptop" /></span>
-            <span>Laptop</span>
-          </a>
-        </li>
-        <li>
-          <a>
-            <span class="icon is-small"><font-awesome-icon icon="tablet-alt" /></span>
-            Tablet
-          </a>
-        </li>
-        <li>
-          <a>
-            <span class="icon is-small"><font-awesome-icon icon="laptop" /></span>
-            Chromebook
-          </a>
-        </li>
-      </ul>
-    </div>
-
+<template lang="pug">
+  div.tabs.is-centered
+    ul
+      li
+        a
+          span.icon.is-small
+            font-awesome-icon(icon="laptop")
+          span Laptop
+      li
+        a
+          span.icon.is-small
+            font-awesome-icon(icon="tablet-alt")
+          span Tablet
+      li
+        a
+          span.icon.is-small
+            font-awesome-icon(icon="laptop")
+          span Chromebook
 </template>
 
 <script>
diff --git a/src/layout/Equipo.vue b/src/layout/Equipo.vue
new file mode 100644
index 0000000..9efbe29
--- /dev/null
+++ b/src/layout/Equipo.vue
@@ -0,0 +1,42 @@
+<template lang="pug">
+  div#equipo
+    table.table
+      thead
+        tr
+          th id
+          th serial
+      tbody
+        tr
+          td 1
+          td 1231241322
+        tr
+          td 1
+          td {{ equipo }}
+</template>
+
+<script>
+const axios = require('axios')
+export default {
+  name: 'equipo',
+  data () {
+    return {
+      msg: 'hola'
+    }
+  },
+  computed: {
+    equipo: function () {
+      axios.get('http://39a65af6.ngrok.io/equipo')
+        .then(function (response) {
+          console.log(response)
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+      return 'hola'
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>
diff --git a/src/layout/Footer.vue b/src/layout/Footer.vue
index 6ef5e88..977c52e 100644
--- a/src/layout/Footer.vue
+++ b/src/layout/Footer.vue
@@ -1,9 +1,5 @@
-<template lang="html">
-  <footer class="footer">
-    <div class="content has-text-centered">
-      <p>
-        <strong class="has-text-white">PC Puma | 2018</strong>
-      </p>
-    </div>
-  </footer>
+<template lang="pug">
+  footer.footer
+    div.content.has-text-centered
+      p.has-text-white PC PUMA | 2018
 </template>
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index 9a01d66..e3d43e2 100644
--- a/src/layout/Header.vue
+++ b/src/layout/Header.vue
@@ -1,45 +1,15 @@
-<template lang="html">
-  <nav class="navbar is-u-blue" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
-      <a class="navbar-item" href="https://bulma.io">
-        PC PUMA
-      </a>
-
-      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-      </a>
-    </div>
-
-    <div id="navbarBasicExample" class="navbar-menu">
-      <div class="navbar-start">
-        <a class="navbar-item">
-          Inicio
-        </a>
-
-        <a class="navbar-item">
-          Prestamos
-        </a>
-
-        <a class="navbar-item">
-          Equipos
-        </a>
-        <a class="navbar-item">
-          Usuarios
-        </a>
-      </div>
-
-      <div class="navbar-end">
-        <div class="navbar-item">
-          <div class="buttons">
-            <a class="button is-u-golden">
-              <strong>Salir</strong>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-
+<template lang="pug">
+  nav.navbar.is-u-blue
+    div.navbar-brand
+      a.navbar-item PC PUMA
+    div.navbar-menu
+      div.navbar-start
+        router-link.navbar-item(to="/") Inicio
+        router-link.navbar-item(to="/") Prestamos
+        router-link.navbar-item(to="/equipo") equipos
+        router-link.navbar-item(to="/") usuarios
+      div.navbar-end
+        div.navbar-item
+          a.button.is-u-golden
+            strong Salir
 </template>
diff --git a/src/layout/Inicio.vue b/src/layout/Inicio.vue
index 7bb6842..8c8df3b 100644
--- a/src/layout/Inicio.vue
+++ b/src/layout/Inicio.vue
@@ -1,32 +1,31 @@
-<template lang="html">
-  <div class="container">
-    <br><br>
-    <div class="columns">
-      <div class="column is-12 has-text-centered">
-        <h1 class="is-size-2">Bienvenido A PC Puma</h1>
-        <h2 class="is-size-3">Usuario</h2>
-      </div>
-    </div>
-    <br><br>
-    <div class="columns">
-      <div class="column is-4 is-offset-4">
-        <resumen/>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-10 is-offset-1">
-        <equipo/>
-      </div>
-    </div>
-
-  </div>
+<template lang="pug">
+  main
+    um-header
+    .container
+      br
+      br
+      div.columns
+        div.column.is-12.has-text-centered
+          h1.is-size-2 Bienvenido A PC Puma
+          h2.is-size-3 Usuario
+      br
+      br
+      div.columns
+        .column.is-6.is-offset-3
+          resumen
+      div.columns
+        .column.is-10.is-offset-1
+          equipo
+    um-footer
 </template>
 
 <script>
 import Resumen from '../components/inicio/Resumen.vue'
 import Equipo from '../components/inicio/Equipo.vue'
+import UmFooter from '../layout/Footer.vue'
+import UmHeader from '../layout/Header.vue'
 export default {
-  components: { Resumen, Equipo }
+  components: { Resumen, Equipo, UmHeader, UmFooter }
 }
 </script>
 
diff --git a/src/layout/Login.vue b/src/layout/Login.vue
new file mode 100644
index 0000000..22e4eac
--- /dev/null
+++ b/src/layout/Login.vue
@@ -0,0 +1,65 @@
+<template lang="pug">
+  main
+    nav.navbar.is-u-blue
+      div.navbar-brand
+        a.navbar-item PC PUMA
+    .container
+      .columns
+        .column.is-4.is-offset-4
+          figure.image
+            img(src="../assets/unam.png")
+          un-notification(v-if='this.status' v-bind:msj='this.err' status=true)
+          form
+            .field
+              p.control.has-icons-left
+                input.input(placeholder="Usuario" v-model="user")
+                span.icon.is-small.is-left
+                  i
+                    font-awesome-icon(icon="user")
+            .field
+              p.control.has-icons-left
+                input.input(placeholder="Contraseña" v-model="pass")
+                span.icon.is-small.is-left
+                  i
+                    font-awesome-icon(icon="lock")
+            .field.has-text-centered
+              input.button.is-u-blue(type="submit" v-on:click="Login()" value="Iniciar sesión")
+</template>
+
+<script>
+import UnNotification from '../components/general/Notificacion.vue'
+const axios = require('axios')
+export default {
+  components: {
+    UnNotification
+  },
+  data () {
+    return {
+      user: '',
+      pass: '',
+      err: '',
+      status: false
+    }
+  },
+  methods: {
+    Login: function () {
+      axios.post('http://39a65af6.ngrok.io/login', {
+        nombre: this.user,
+        pass: this.pass
+      })
+        .then(response => {
+          console.log(response.data.data)
+          window.localStorage.pcpumaT = response.data.data.token
+          window.localStorage.pcpumaU = response.data.data.usuario
+        })
+        .catch(error => {
+          this.err = error.response.data.err
+          this.status = !error.response.data.status
+        })
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>
diff --git a/src/main.js b/src/main.js
index 1e12325..0b41a57 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,24 @@
 import Vue from 'vue'
 import App from './App.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faLaptop, faTabletAlt } from '@fortawesome/free-solid-svg-icons'
+import { faLaptop, faTabletAlt, faUser, faLock } from '@fortawesome/free-solid-svg-icons'
 import { faChrome } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
+import VueRouter from 'vue-router'
+import routes from './routes.js'
 library.add(faChrome)
 library.add(faLaptop)
+library.add(faUser)
+library.add(faLock)
 library.add(faTabletAlt)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
-
+Vue.use(VueRouter)
 // import Child from './components/Child.vue'
 Vue.config.productionTip = false
 // Vue.component('child', Child)
+const router = new VueRouter({ routes })
 new Vue({
-  render: h => h(App)
+  render: h => h(App),
+  router
 }).$mount('#app')
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..c9e3f36
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,9 @@
+import Equipo from './layout/Equipo.vue'
+import Inicio from './layout/Inicio.vue'
+import Login from './layout/Login.vue'
+const routes = [
+  { path: '/', component: Inicio, name: 'inicio' },
+  { path: '/equipo', component: Equipo, name: 'equipo' },
+  { path: '/login', component: Login, name: 'login' }
+]
+export default routes