diff --git a/gatsby-browser.js b/gatsby-browser.js
index b1e5c31..e3c5c41 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,7 +1,10 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
+const React = require("react")
+const netlifyIdentity = require("netlify-identity-widget")
 
-// You can delete this file if you're not using it
+window.netlifyIdentity = netlifyIdentity
+// You must run this once before trying to interact with the widget
+netlifyIdentity.init()
+
+exports.wrapRootElement = ({ element }) => {
+  return <>{element}</>
+}
diff --git a/package.json b/package.json
index e287507..dcdb078 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "gatsby-plugin-sharp": "^2.3.5",
     "gatsby-source-filesystem": "^2.1.40",
     "gatsby-transformer-sharp": "^2.3.7",
+    "netlify-identity-widget": "^1.5.6",
     "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
diff --git a/src/components/dashboard.js b/src/components/dashboard.js
index 0c98d70..ee0b665 100644
--- a/src/components/dashboard.js
+++ b/src/components/dashboard.js
@@ -1,92 +1,109 @@
-import React from "react"
+import React, { useState } from "react"
 import { Link } from "gatsby"
-const Dashboard = () => (
-  <div className="container mx-auto max-w-md">
-    <nav className="mb-4">
-      <Link className="p-1 border-b border-purple-700" to="user/dashboard">
-        Settings
-      </Link>
-      <Link className="p-1 ml-2" to="user/billing">
-        Billing
-      </Link>
-    </nav>
-    <form className="w-full max-w-lg shadow rounded-lg p-8 bg-white">
-      <div className="flex flex-wrap -mx-3 mb-6">
-        <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
-          <label
-            className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
-            for="grid-first-name"
-          >
-            First Name
-          </label>
-          <input
-            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
-            id="grid-first-name"
-            type="text"
-            placeholder="Jane"
-          />
-          <p className="text-red-500 text-xs italic">
-            Please fill out this field.
-          </p>
+import { getCurrentUser, updateUserInfo } from "../services/auth"
+const Dashboard = () => {
+  const [userMetadata, setUserMetaData] = useState(
+    getCurrentUser().user_metadata
+  )
+  return (
+    <div className="container mx-auto max-w-md">
+      <nav className="mb-4">
+        <Link className="p-1 border-b border-purple-700" to="user/dashboard">
+          Settings
+        </Link>
+        <Link className="p-1 ml-2" to="user/billing">
+          Billing
+        </Link>
+      </nav>
+      <form
+        className="w-full max-w-lg shadow rounded-lg p-8 bg-white"
+        onSubmit={async e => {
+          e.preventDefault()
+          await updateUserInfo(userMetadata)
+        }}
+      >
+        <div className="flex flex-wrap -mx-3 mb-6">
+          <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+              for="grid-first-name"
+            >
+              First Name
+            </label>
+            <input
+              className="appearance-none block w-full bg-gray-200 text-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+              id="grid-first-name"
+              type="text"
+              placeholder="Jane"
+              onChange={e =>
+                setUserMetaData({
+                  ...userMetadata,
+                  full_name: e.target.value,
+                })
+              }
+              defaultValue={userMetadata.full_name}
+            />
+            <p className="text-red-500 text-xs italic"></p>
+          </div>
+          <div className="w-full md:w-1/2 px-3">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+              for="grid-last-name"
+            >
+              Last Name
+            </label>
+            <input
+              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+              id="grid-last-name"
+              type="text"
+              placeholder="Doe"
+            />
+          </div>
         </div>
-        <div className="w-full md:w-1/2 px-3">
-          <label
-            className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
-            for="grid-last-name"
-          >
-            Last Name
-          </label>
-          <input
-            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-            id="grid-last-name"
-            type="text"
-            placeholder="Doe"
-          />
+        <div className="flex flex-wrap -mx-3 mb-6">
+          <div className="w-full px-3">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+              for="grid-password"
+            >
+              Password
+            </label>
+            <input
+              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+              id="grid-password"
+              type="password"
+              placeholder="******************"
+            />
+            <p className="text-gray-600 text-xs italic">
+              Make it as long and as crazy as you'd like
+            </p>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-wrap -mx-3 mb-6">
-        <div className="w-full px-3">
-          <label
-            className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
-            for="grid-password"
-          >
-            Password
-          </label>
-          <input
-            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-            id="grid-password"
-            type="password"
-            placeholder="******************"
-          />
-          <p className="text-gray-600 text-xs italic">
-            Make it as long and as crazy as you'd like
-          </p>
+        <div className="flex flex-wrap -mx-3 mb-6">
+          <div className="w-full px-3">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+              for="grid-password"
+            >
+              Password Confirmation
+            </label>
+            <input
+              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+              id="grid-password"
+              type="password"
+              placeholder="******************"
+            />
+            <p className="text-gray-600 text-xs italic">
+              Make it the same as the previous one
+            </p>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-wrap -mx-3 mb-6">
-        <div className="w-full px-3">
-          <label
-            className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
-            for="grid-password"
-          >
-            Password Confirmation
-          </label>
-          <input
-            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-            id="grid-password"
-            type="password"
-            placeholder="******************"
-          />
-          <p className="text-gray-600 text-xs italic">
-            Make it the same as the previous one
-          </p>
-        </div>
-      </div>
-      <button className="btn" type="submit">
-        Save
-      </button>
-    </form>
-  </div>
-)
+        <button className="btn" type="submit">
+          Save
+        </button>
+      </form>
+    </div>
+  )
+}
 
 export default Dashboard
diff --git a/src/components/login.js b/src/components/login.js
index ee4a243..e4f6285 100644
--- a/src/components/login.js
+++ b/src/components/login.js
@@ -11,45 +11,17 @@ class Login extends React.Component {
       [event.target.name]: event.target.value,
     })
   }
-  handleSubmit = event => {
-    event.preventDefault()
-    handleLogin(this.state)
-  }
+
   render() {
     if (isLoggedIn()) {
       navigate(`/user/dashboard`)
     }
     return (
       <div className="container mx-auto max-w-md">
-        <h2 className="text-center text-4xl">Log in</h2>
-        <form
-          method="post"
-          className="w-full max-w-lg shadow rounded-lg p-8 bg-white"
-          onSubmit={event => {
-            this.handleSubmit(event)
-            navigate(`/user/dashboard`)
-          }}
-        >
-          <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
-            Username
-            <input
-              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-              type="text"
-              name="username"
-              onChange={this.handleUpdate}
-            />
-          </label>
-          <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
-            Password
-            <input
-              type="password"
-              name="password"
-              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-              onChange={this.handleUpdate}
-            />
-          </label>
-          <input className="btn" type="submit" value="Log In" />
-        </form>
+        <h2 className="text-center text-4xl">You must login</h2>
+        <button onClick={() => handleLogin(navigate)} className="btn w-full">
+          Login
+        </button>
       </div>
     )
   }
diff --git a/src/services/auth.js b/src/services/auth.js
index 514f8a3..d284c5a 100644
--- a/src/services/auth.js
+++ b/src/services/auth.js
@@ -1,3 +1,4 @@
+import netlifyIdentity from "netlify-identity-widget"
 export const isBrowser = () => typeof window !== "undefined"
 export const getUser = () =>
   isBrowser() && window.localStorage.getItem("gatsbyUser")
@@ -5,21 +6,48 @@ export const getUser = () =>
     : {}
 const setUser = user =>
   window.localStorage.setItem("gatsbyUser", JSON.stringify(user))
-export const handleLogin = ({ username, password }) => {
-  if (username === `john` && password === `pass`) {
-    return setUser({
-      username: `john`,
-      name: `Johnny`,
-      email: `johnny@example.org`,
+
+export const handleLogin = navigate => {
+  netlifyAuth.authenticate(() => {
+    setUser(netlifyIdentity.currentUser())
+    navigate("/user/dashboard")
+  })
+}
+
+const netlifyAuth = {
+  isAuthenticated: false,
+  user: null,
+  authenticate(callback) {
+    this.isAuthenticated = true
+    netlifyIdentity.open()
+    netlifyIdentity.on("login", user => {
+      this.user = user
+      callback(user)
+    })
+  },
+  signout(callback) {
+    this.isAuthenticated = false
+    netlifyIdentity.logout()
+    netlifyIdentity.on("logout", () => {
+      this.user = null
+      callback()
     })
-  }
-  return false
+  },
 }
+
 export const isLoggedIn = () => {
-  const user = getUser()
-  return !!user.username
+  return netlifyAuth.isAuthenticated
 }
 export const logout = callback => {
   setUser({})
-  callback()
+  netlifyAuth.signout(callback)
+}
+
+export const getCurrentUser = () => {
+  return netlifyIdentity.currentUser()
+}
+
+export const updateUserInfo = async user_metadata => {
+  console.log(user_metadata)
+  await netlifyIdentity.gotrue.currentUser().update({ data: user_metadata })
 }
diff --git a/yarn.lock b/yarn.lock
index d368e5b..46b3d0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8076,6 +8076,11 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+netlify-identity-widget@^1.5.6:
+  version "1.5.6"
+  resolved "https://registry.yarnpkg.com/netlify-identity-widget/-/netlify-identity-widget-1.5.6.tgz#b841d4d469ad37bdc47e876d87cc2926aba2c302"
+  integrity sha512-DvWVUGuswOd+IwexKjzIpYcqYMrghmnkmflNqCQc4lG4KX55zE3fFjfXziCTr6LibP7hvZp37s067j5N3kRuyw==
+
 next-tick@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"