diff --git a/pages/index.vue b/pages/index.vue
index d0f6e3a..1e554f6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,52 @@
 <template>
-  <section>
-    hola
+  <section class="container">
+    <b-field
+      label="Usuario"
+      message="This email is invalid"
+      :type="usuarioValido()">
+        <b-input v-model="usuario"></b-input>
+    </b-field>
+
+    <b-field
+      label="Contraseña"
+      message="This email is invalid"
+      type="is-danger">
+        <b-input
+          v-model="password"
+          type="password"
+          password-reveal></b-input>
+    </b-field>
   </section>
 </template>
 
 <script>
+import validator from 'validator'
+
 export default {
+  data () {
+    return {
+      usuario: '',
+      password: '',
+      error: false
+    }
+  },
+  methods: {
+    usuarioValido () {
+      if (!this.usuario) {
+        return ''
+      } if (validator.isNumeric(this.usuario, { no_symbols: false })) {
+        return ''
+      } else if (validator.isNumeric(this.usuario, { no_symbols: false })) {
+        return ''
+      }
+      return 'is-danger'
+    }
+  },
+  watch: {
+    usuario () {
+      this.error = false
+    }
+  },
   layout: 'login'
 }
 </script>