diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 919ce1f..5fac255 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,5 +1,11 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <option name="OTHER_INDENT_OPTIONS">
+      <value>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </value>
+    </option>
     <ScalaCodeStyleSettings>
       <option name="MULTILINE_STRING_CLOSING_QUOTES_ON_NEW_LINE" value="true" />
     </ScalaCodeStyleSettings>
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
index a55e7a1..79ee123 100644
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -1,5 +1,5 @@
 <component name="ProjectCodeStyleConfiguration">
   <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
   </state>
 </component>
\ No newline at end of file
diff --git a/bsconfig.json b/bsconfig.json
index 616f71c..b9762e9 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -1,7 +1,7 @@
 {
-  "name": "reason-react-examples",
+  "name": "bringo",
   "reason": {
-    "react-jsx": 3,
+    "react-jsx": 3
   },
   "sources": {
     "dir" : "frontend",
@@ -15,7 +15,10 @@
   "suffix": ".bs.js",
   "namespace": true,
   "bs-dependencies": [
-    "reason-react"
+    "reason-react",
+    "@jsiebern/bs-material-ui"
   ],
-  "refmt": 3
+  "refmt": 3,
+  "ppx-flags": [
+  ]
 }
diff --git a/frontend/Login.re b/frontend/Login.re
index cf70344..319f4e8 100644
--- a/frontend/Login.re
+++ b/frontend/Login.re
@@ -1 +1 @@
-ReactDOMRe.renderToElementWithId(<LoginPage name="John" />, "login-page-app");
\ No newline at end of file
+ReactDOMRe.renderToElementWithId(<LoginPage />, "login-page-app");
\ No newline at end of file
diff --git a/frontend/Main.re b/frontend/Main.re
index e69de29..35dadfd 100644
--- a/frontend/Main.re
+++ b/frontend/Main.re
@@ -0,0 +1 @@
+Js.Console.log("yo");
\ No newline at end of file
diff --git a/frontend/components/Icons.re b/frontend/components/Icons.re
new file mode 100644
index 0000000..89713d7
--- /dev/null
+++ b/frontend/components/Icons.re
@@ -0,0 +1,123 @@
+open Belt.Option;
+
+[@bs.deriving jsConverter]
+type color = [
+  | [@bs.as "default"] `Default
+  | [@bs.as "error"] `Error
+  | [@bs.as "inherit"] `Inherit
+  | [@bs.as "primary"] `Primary
+  | [@bs.as "secondary"] `Secondary
+  | [@bs.as "textPrimary"] `TextPrimary
+  | [@bs.as "textSecondary"] `TextSecondary
+];
+
+[@bs.deriving jsConverter]
+type fontSize = [
+  | [@bs.as "default"] `Default
+  | [@bs.as "inherit"] `Inherit
+  | [@bs.as "small"] `Small
+  | [@bs.as "large"] `Large
+];
+
+[@bs.obj]
+external makePropsIcon:
+  (
+    ~className: string=?,
+    ~color: string=?,
+    ~fontSize: string=?,
+    ~nativeColor: string=?,
+    ~titleAccess: string=?,
+    ~viewBox: string=?,
+    unit
+  ) =>
+  _;
+
+module type IconClass = {let reactClass: React.component('a);};
+
+module Make = (Icon: IconClass) => {
+  include Icon;
+
+  [@react.component]
+  let make =
+      (
+        ~color: option(color)=?,
+        ~className: option(string)=?,
+        ~fontSize: option(fontSize)=?,
+        ~nativeColor: option(string)=?,
+        ~titleAccess: option(string)=?,
+        ~viewBox: option(string)=?,
+      ) =>
+    React.createElement(
+      reactClass,
+      makePropsIcon(
+        ~className?,
+        ~color=?color->map(colorToJs),
+        ~fontSize=?fontSize->map(fontSizeToJs),
+        ~nativeColor?,
+        ~titleAccess?,
+        ~viewBox?,
+        (),
+      ),
+    );
+};
+
+module AccountCircleFilled =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircle"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleOutlined =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleOutlined"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleRounded =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleRounded"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleSharp =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleSharp"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleTwoTone =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleTwoTone"]
+    external reactClass: React.component('a) = "default";
+  });
+
+//LockOpen
+module LockOpenFilled =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpen"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenOutlined =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenOutlined"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenRounded =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenRounded"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenSharp =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenSharp"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenTwoTone =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenTwoTone"]
+    external reactClass: React.component('a) = "default";
+  });
\ No newline at end of file
diff --git a/frontend/components/loginPage/LoginForm.re b/frontend/components/loginPage/LoginForm.re
new file mode 100644
index 0000000..d4ad97c
--- /dev/null
+++ b/frontend/components/loginPage/LoginForm.re
@@ -0,0 +1,63 @@
+[@react.component]
+let make = (~classes) => {
+  MaterialUi.(
+    <Paper className={classes##pageTopMargin}>
+      <form>
+        <Grid
+          container=true
+          spacing=V4
+          direction=`Column
+          justify=`Center
+          alignItems=`Center>
+          <Grid item=true>
+            <Typography variant=`H5>
+              {React.string("Editor Login")}
+            </Typography>
+          </Grid>
+          <Grid item=true>
+            <FormControl fullWidth=true>
+              <InputLabel htmlFor="uname-input">
+                {React.string("Username")}
+              </InputLabel>
+              <Input
+                id="uname-input"
+                startAdornment={
+                  <InputAdornment position=`Start>
+                    <Icons.AccountCircleFilled />
+                  </InputAdornment>
+                }
+              />
+            </FormControl>
+          </Grid>
+          <Grid item=true>
+            <FormControl>
+              <InputLabel htmlFor="pdub-input">
+                {React.string("Password")}
+              </InputLabel>
+              <Input
+                id="pdub-input"
+                type_="password"
+                startAdornment={
+                  <InputAdornment position=`Start>
+                    <Icons.LockOpenFilled />
+                  </InputAdornment>
+                }
+              />
+            </FormControl>
+          </Grid>
+          <Grid item=true>
+            <Button
+              className={classes##buttonMargin}
+              variant=`Contained
+              color=`Primary>
+              {React.string("Sign In")}
+            </Button>
+            <Button className={classes##buttonMargin} variant=`Contained>
+              {React.string("Cancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </form>
+    </Paper>
+  );
+};
\ No newline at end of file
diff --git a/frontend/components/loginPage/LoginPage.re b/frontend/components/loginPage/LoginPage.re
index 085cbb7..c8570d7 100644
--- a/frontend/components/loginPage/LoginPage.re
+++ b/frontend/components/loginPage/LoginPage.re
@@ -1,3 +1,22 @@
 [@react.component]
-let make = (~name) =>
-  <div> {ReasonReact.string("Hello " ++ name ++ "!")} </div>;
\ No newline at end of file
+let make = () =>
+  <MaterialUi_WithStyles
+    classes=[
+      {
+        name: "buttonMargin",
+        styles:
+          ReactDOMRe.Style.make(~marginLeft="6px", ~marginRight="6px", ()),
+      },
+      {
+        name: "pageTopMargin",
+        styles: ReactDOMRe.Style.make(~marginTop="7vh", ()),
+      },
+    ]
+    render={classes =>
+      MaterialUi.(
+        <section>
+          <Container maxWidth=`Sm> <LoginForm classes /> </Container>
+        </section>
+      )
+    }
+  />;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3dbae45..2469f02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,123 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+      "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@jsiebern/bs-material-ui": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@jsiebern/bs-material-ui/-/bs-material-ui-1.3.0.tgz",
+      "integrity": "sha512-YfzGVqZXA8Zm4uG3bi0hor0LGTUfBiVhOcAR9mNR/4ijKAUVaG6+BNQQ+5tgFX5W1I2vh+QR/qbMqBaLR5Yw2g=="
+    },
+    "@material-ui/core": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.10.1.tgz",
+      "integrity": "sha512-bJb/07JFTht0oSjoWMu0j7r1mx4EbJ2ZHx+OKiY+i6IYW/4JPZ1J6rZuFS2b9jT+slSONPZaZq/kHitbE5lcig==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.10.0",
+        "@material-ui/system": "^4.9.14",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.9.12",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
+      "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.14",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
+      "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.9.12",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.12.tgz",
+      "integrity": "sha512-/0rgZPEOcZq5CFA4+4n6Q6zk7fi8skHhH2Bcra8R3epoJEYy5PL55LuMazPtPH1oKeRausDV/Omz4BbgFsn1HQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
+    "@types/react": {
+      "version": "16.9.35",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.35.tgz",
+      "integrity": "sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -807,6 +924,11 @@
         "wrap-ansi": "^5.1.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -983,6 +1105,20 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
+    "csstype": {
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
+      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -1086,6 +1222,15 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -1687,6 +1832,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -1702,6 +1855,11 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -1872,6 +2030,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -1963,6 +2126,84 @@
         "minimist": "^1.2.0"
       }
     },
+    "jss": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.2.0.tgz",
+      "integrity": "sha512-WyG2Jm8nEbYHIVx0UIitgS7R1SXwWpQ1p+SHeI2HNrNR/DSEBXR8l0XYqNdVOCvKnFDPwVWVW7EFlhPh0tYA2w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.2.0.tgz",
+      "integrity": "sha512-N5RF3TV+ejKfnq1I/wfp4uj8IVgJCRw4LZQyxW6XiYr6qX2CJsrVvF/lxYIkEL/C19Lgso5D7zy1uxlRWJWGjQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.2.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.2.0.tgz",
+      "integrity": "sha512-uni8vfNiCUffm+C26+bhEVX9bWiI1f+bzdDJ3hsgRD1cLey5qZ8zVR6IVa2OVWTG7mMN2eOdG2GxpSCOEuG54Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.2.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.2.0.tgz",
+      "integrity": "sha512-l2Y1sRXnhMgw7Hq0iH8loWaokIdmXSCD6BE9uporzt48K/cEAkiy1Qx7oeuBE5wHahlOeIASZRGQlm09u5ckrA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.2.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.2.0.tgz",
+      "integrity": "sha512-4pO6fiWMbtEp8eJlBUaS1vg1bFjCBZsN1Kl0mVqX5jdQJ/7hvKWsX2pIKGFIu9eOcyr30Nacy6NxGiAlYJjbFA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.2.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.2.0.tgz",
+      "integrity": "sha512-ihJwnaFLdyfTz6azGkz3WEwLkrh1p4X8PKBdCYaIsTnbNcCh/aULzxI7PkVjkd2Z/zCVK2CFfw3EE4Wxhwo1XQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.2.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.2.0.tgz",
+      "integrity": "sha512-16Y612DFhOCdMVTQYMxPuGQr7YIxcy6ehrQV408z8njYajc1Qtpc9JVl/wmTJFIYVRKfY9/0HQXSxD3Z3Gn0Hw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.2.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.2.0.tgz",
+      "integrity": "sha512-r6HytNgrGPAbW+vrcRtY+nOMLaEwBz8HSDtsuQFU06bAH4+NOK34QRxie4jOepLAmmbpjxWt6f4c8CUFGmiFCA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.2.0"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -2552,6 +2793,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -2710,6 +2956,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -2740,6 +2997,11 @@
       "resolved": "https://registry.npmjs.org/reason-react/-/reason-react-0.8.0.tgz",
       "integrity": "sha512-97AfK3eCF6vfP8rnbq3k6GgXsZt//OiPMINTUk5luJ8W0Wt/JaYsDG6eWKP8Zx3gPpxSU1EPjB1pUm6o6fBnFA=="
     },
+    "regenerator-runtime": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -3322,6 +3584,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
diff --git a/package.json b/package.json
index d062f08..6f60ff0 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,14 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@jsiebern/bs-material-ui": "^1.3.0",
+    "@material-ui/core": "^4.10.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "reason-react": "^0.8.0"
   },
   "devDependencies": {
+    "@material-ui/icons": "^4.9.1",
     "bs-platform": "^7.3.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
diff --git a/src/main/resources/templates/login.mustache b/src/main/resources/templates/login.mustache
index 1688f70..73f9b62 100644
--- a/src/main/resources/templates/login.mustache
+++ b/src/main/resources/templates/login.mustache
@@ -2,8 +2,10 @@
 <html>
 <head>
     <title>Test</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 </head>
-<body>
+<body style="background-color: #f5f5f5">
     <section id="login-page-app"></section>
     <script src="/dist/login.js"></script>
 </body>