diff --git a/app/images/factorio-main-banner.jpg b/app/images/factorio-main-banner.jpg
new file mode 100644
index 0000000..4767e52
Binary files /dev/null and b/app/images/factorio-main-banner.jpg differ
diff --git a/package.json b/package.json
index d63aa34..fe54acc 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "react-hook-form": "^5.7.2",
     "tailwindcss": "^1.4.6"
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 138dac7..2242030 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,35 @@
 module.exports = {
   purge: [],
   theme: {
-    extend: {},
+    extend: {
+
+    },
+    colors: {
+      "gray": {
+        dark: "#313030",
+        medium: "#403F40",
+        light: "#8E8E8E"
+      },
+      "white": "#F9F9F9",
+      "dirty-white": "#ffe6c0",
+      "green": "#5EB663",
+      "green-light": "#92e897",
+      "red": "#FE5A5A",
+      "red-light": "#FF9B9B",
+      "orange": "#E39827",
+      "black": "#1C1C1C"
+    },
+    boxShadow: {
+      default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)',
+      "2xl": '0 25px 50px -12px rgba(0, 0, 0, .25)',
+      "3xl": '0 35px 60px -15px rgba(0, 0, 0, .3)',
+      inner: 'inset 0 4px 8px 0 rgba(0, 0, 0, 0.9)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      'none': 'none',
+}
   },
   variants: {},
   plugins: [],
diff --git a/ui/App/views/Login.js b/ui/App/views/Login.js
deleted file mode 100644
index 146f830..0000000
--- a/ui/App/views/Login.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-const Login = () => {
-    return (
-        <div className="h-screen overflow-hidden flex items-center justify-center">
-            <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
-                <div className="mb-4">
-                    <label className="block text-grey-darker text-sm font-bold mb-2" htmlFor="username">
-                        Username
-                    </label>
-                    <input className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
-                           id="username"
-                           type="text" placeholder="Username"/>
-                </div>
-                <div className="mb-6">
-                    <label className="block text-grey-darker text-sm font-bold mb-2" htmlFor="password">
-                        Password
-                    </label>
-                    <input
-                        className="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
-                        id="password" type="password" placeholder="******************"/>
-                    <p className="text-red text-xs italic">Please choose a password.</p>
-                </div>
-                <div className="flex items-center justify-between">
-                    <button className="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
-                        Sign In
-                    </button>
-                    <a className="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
-                       href="#">
-                        Forgot Password?
-                    </a>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Login;
\ No newline at end of file
diff --git a/ui/App/views/Login.jsx b/ui/App/views/Login.jsx
new file mode 100644
index 0000000..743456c
--- /dev/null
+++ b/ui/App/views/Login.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {useForm} from "react-hook-form";
+import user from "../../api/resources/user";
+
+const Login = () => {
+    const {register, handleSubmit, errors} = useForm();
+
+    // todo call api
+    const onSubmit = async data => {
+        const res = await user.login(data)
+        console.log(res)
+    };
+
+    return (
+        <div className="h-screen overflow-hidden flex items-center justify-center bg-banner">
+            <form onSubmit={handleSubmit(onSubmit)} className="rounded-sm bg-gray-dark shadow-xl">
+                <div className="px-4 py-2 text-xl text-dirty-white font-bold">
+                    Login
+                </div>
+                <div className="rounded-sm bg-gray-medium shadow-inner mx-4 px-6 pt-4 pb-6 mb-4 flex flex-col">
+                    <div className="mb-4">
+                        <label className="block text-white text-sm font-bold mb-2" htmlFor="username">
+                            Username
+                        </label>
+                        <input className="shadow appearance-none border w-full py-2 px-3 text-black"
+                               ref={register({required: true})}
+                               id="username"
+                               name="username"
+                               type="text" placeholder="Username"/>
+                        {errors.password && <span className="block text-red">Username is required</span>}
+                    </div>
+                    <div className="mb-6">
+                        <label className="block text-white text-sm font-bold mb-2" htmlFor="password">
+                            Password
+                        </label>
+                        <input
+                            className="shadow appearance-none w-full py-2 px-3 text-black"
+                            ref={register({required: true})}
+                            name="password"
+                            id="password" type="password" placeholder="******************"/>
+                        {errors.password && <span className="block text-red">Password is required</span>}
+                    </div>
+                    <div className="text-center">
+                        <button className="bg-green hover:bg-green-light text-black font-bold py-2 px-4 w-full"
+                                type="submit">
+                            Sign In
+                        </button>
+                        <a className="bg-gray-light hover:bg-orange text-black py-2 px-4 mt-2 w-full block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
+                           href="#">
+                            Forgot Password?
+                        </a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/ui/api/client.js b/ui/api/client.js
index 71c6837..a680161 100644
--- a/ui/api/client.js
+++ b/ui/api/client.js
@@ -1,7 +1,10 @@
 import Axios from "axios";
 
 const client = Axios.create({
-    withCredentials: true
+    withCredentials: true,
+    headers: {
+        'Content-Type': 'application/json'
+    }
 });
 
 export default client;
\ No newline at end of file
diff --git a/ui/api/resources/user.js b/ui/api/resources/user.js
index c77d6c4..f6234e1 100644
--- a/ui/api/resources/user.js
+++ b/ui/api/resources/user.js
@@ -4,5 +4,9 @@ export default {
     status: async () => {
         const response = await client.get('/api/user/status');
         return response.data;
+    },
+    login: async data => {
+        const response = await client.post('/api/login');
+        return response.data;
     }
 }
\ No newline at end of file
diff --git a/ui/index.scss b/ui/index.scss
index 6562f5d..808c395 100644
--- a/ui/index.scss
+++ b/ui/index.scss
@@ -1,3 +1,8 @@
 @import "tailwindcss/base";
 @import "tailwindcss/utilities";
 @import "tailwindcss/components";
+
+.bg-banner {
+  background-image: url("/images/factorio-main-banner.jpg");
+  background-position: center center;
+}
\ No newline at end of file