diff --git a/webapp/login/index.html b/webapp/login/index.html
index 3bb5c43..a6191e0 100644
--- a/webapp/login/index.html
+++ b/webapp/login/index.html
@@ -20,118 +20,105 @@
   <script defer src="../assets/js/lib/izi-toast.js"></script>
   <script defer src="../assets/js/api.js"></script>
   <script defer src="index.js"></script>
-  <script defer src="../assets/js/waves.js"></script>
 
   <link rel="stylesheet" href="../assets/css/izi-toast.css">
-  <link rel="stylesheet" href="../assets/css/material-input.css">
-  <link rel="stylesheet" href="../assets/css/waves.css">
+
+  <link rel="stylesheet" href="../assets/css/materialize.css">
+  <script defer src="../assets/js/lib/materialize.js"></script>
 
   <style>
     body {
-      height: 100vh;
-      width: 100vw;
-
-      background-color: #3c414e;
-      margin: 0;
-
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-content: start;
-
-      flex: 1;
-    }
-
-    .container {
-      font-family:'Roboto';
-      width:600px;
-      margin:30px auto 0; 
-      display:block;
-      background:#262a33;
-      padding:10px 50px 50px;
-    }
-
-    button {
-      background-color: rgb(101, 126, 228);
-      border-radius: 3px;
-      border: none;
-      font-weight: bold;
-      font-size: 14px;
-      text-align: center;
+      background-color: #1e2228;
       color: #FFF;
-
-      width: 100%;
-      height: 40px;
-      margin: 40px 0px 0px 0px;
-      padding: 0;
-      cursor: pointer;
     }
 
     .logo {
       margin-top: 20px;
     }
 
-  @media screen and (max-width: 600px) {
-    .container {
-      height: 100%;
-      width: 100vw;
-      margin: 0;
-      padding: 0 20px 0 20px;
+    /* label color */
+    input{
+      color: #FFF;
     }
-    .logo {
-      margin-top: 50px;
+
+    .spacer {
+      height: 30px;
+    }
+
+    @media screen and (max-width: 600px) {
+      .logo {
+        margin-top: 50px;
+      }
     }
-  }
   </style>
 </head>
 
 <body>
   <div class="container">
-    <?xml version="1.0" encoding="utf-8"?>
-    <svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-      viewBox="0 0 612 153" style="enable-background:new 0 0 612 153;" xml:space="preserve">
-    <style type="text/css">
-      .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#264679;}
-      .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6684B2;}
-      .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#26477B;}
-    </style>
-    <g>
-      <path class="st0" d="M179.9,45.5c-6.2,0-11.5,1.7-15.9,5c-4.4,3.3-6.5,8.1-6.5,14.4c0,4.9,1.3,9.1,3.8,12.4
-        c2.5,3.4,5.7,5.8,9.3,7.3c3.7,1.5,7.3,2.8,11,3.8c3.7,1,6.8,2.3,9.3,3.9c2.5,1.5,3.8,3.5,3.8,5.8c0,4.8-4.4,7.2-13.1,7.2h-24.1V118
-        h24.1c17.1,0,25.6-6.7,25.6-20.2c0-1.9-0.2-3.8-0.6-5.8c-0.4-2-1.2-4-2.6-6c-1.3-2.1-3.3-3.7-5.8-4.9c-2.5-1.2-6.4-2.7-11.5-4.5
-        l-8.8-3.1c-0.7-0.2-1.7-0.7-2.9-1.3c-1.3-0.7-2.2-1.3-2.8-1.9c-0.6-0.6-1.1-1.4-1.6-2.3c-0.5-0.9-0.7-2-0.7-3.2c0-2,1-3.5,2.9-4.6
-        c1.9-1.1,4.3-1.6,7-1.6h24.6V45.5H179.9z"/>
-      <path class="st0" d="M226.4,58.3v31c0,10.2,2.5,17.6,7.6,22c5.1,4.4,13,6.6,23.7,6.6v-12.8c-2.7,0-4.9-0.2-6.8-0.4
-        c-1.8-0.3-3.7-0.9-5.8-1.9c-2-0.9-3.6-2.6-4.7-4.9c-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214,58.3H226.4z"/>
-      <path class="st0" d="M281.1,118V76.8c0-7.2,0.9-12,2.6-14.5c1-1.3,2.2-2.2,3.6-2.8c1.4-0.6,2.6-1,3.6-1.1c1-0.1,2.5-0.1,4.3-0.1
-        H310V45.5h-12.2c-3.6,0-6.5,0.1-8.6,0.3c-2.1,0.2-4.5,0.9-7.3,2c-2.8,1.1-5.1,2.8-7.1,5c-4,4.4-6,12.4-6,24V118H281.1z"/>
-      <path class="st0" d="M326.2,53.8c-6.2,7.4-9.3,17-9.3,28.9c0,10.7,3.2,19.4,9.5,26.2s14.7,10.1,25.3,10.1c8.7,0,16.3-2.7,22.7-8.1
-        L366,102c-3.7,2.1-8.5,3.2-14.3,3.2c-6.5,0-11.8-2.3-15.8-6.9c-4-4.6-6-10.5-6-17.9c0-7,1.9-12.9,5.6-17.9c3.8-5,8.9-7.5,15.5-7.5
-        c3.3,0,6.1,0.8,8.2,2.4c2.1,1.6,3.2,4,3.2,7.2c0,5-1.2,8.5-3.6,10.6c-2.4,2.1-6.7,3.2-12.9,3.2h-6.7v11.7h5.7
-        c20.3,0,30.5-8.5,30.5-25.4c0-13.6-7.9-20.7-23.7-21.5C340.9,43,332.4,46.5,326.2,53.8z"/>
-      <path class="st0" d="M412.3,73.2c-7.4,0-13.6,1.9-18.5,5.7c-4.9,3.8-7.4,9.4-7.4,16.7c0,7.3,2.3,12.9,7,16.7
-        c4.6,3.8,10.9,5.7,18.8,5.7h31V73.6c0-9.1-2.4-16-7.2-20.8c-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9,0,16.4,6.1,16.4,18.2
-        v28.7h-18.4c-9.1,0-13.6-3.2-13.6-9.8c0-3.3,1.2-5.9,3.6-7.8c2.4-1.8,5.8-2.7,10.2-2.7c5.1,0,9.4,1.4,12.9,4.3V75.3
-        C420.9,73.9,416.5,73.2,412.3,73.2z"/>
-      <path class="st0" d="M458.8,118H471V58.3h24.4V118h12.2V58.3h5.7c6.8,0,11.3,0.7,13.5,2c4.3,2.5,6.5,7.7,6.5,15.5V118h12.2V75.7
-        c0-6-0.6-11.2-1.9-15.5c-1.2-4.3-3.9-7.8-7.9-10.6c-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/>
-      <polygon class="st1" points="75,118.5 75,35.5 96,48.5 96,118.5 	"/>
-      <polygon class="st2" points="99,118.5 99,49.5 110.5,56.5 121,49.5 121,118.5 	"/>
-      <polygon class="st1" points="124,118.5 124,48.5 145,35.5 145,118.5 	"/>
-    </g>
-    </svg>
+    <div class="row">
+      <div class="col s12 m1 l2"></div>
+      <div class="col s12 m10 l8">
+        <?xml version="1.0" encoding="utf-8"?>
+        <svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          viewBox="0 0 612 153" style="enable-background:new 0 0 612 153;" xml:space="preserve">
+        <style type="text/css">
+          .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#264679;}
+          .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6684B2;}
+          .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#26477B;}
+        </style>
+        <g>
+          <path class="st0" d="M179.9,45.5c-6.2,0-11.5,1.7-15.9,5c-4.4,3.3-6.5,8.1-6.5,14.4c0,4.9,1.3,9.1,3.8,12.4
+            c2.5,3.4,5.7,5.8,9.3,7.3c3.7,1.5,7.3,2.8,11,3.8c3.7,1,6.8,2.3,9.3,3.9c2.5,1.5,3.8,3.5,3.8,5.8c0,4.8-4.4,7.2-13.1,7.2h-24.1V118
+            h24.1c17.1,0,25.6-6.7,25.6-20.2c0-1.9-0.2-3.8-0.6-5.8c-0.4-2-1.2-4-2.6-6c-1.3-2.1-3.3-3.7-5.8-4.9c-2.5-1.2-6.4-2.7-11.5-4.5
+            l-8.8-3.1c-0.7-0.2-1.7-0.7-2.9-1.3c-1.3-0.7-2.2-1.3-2.8-1.9c-0.6-0.6-1.1-1.4-1.6-2.3c-0.5-0.9-0.7-2-0.7-3.2c0-2,1-3.5,2.9-4.6
+            c1.9-1.1,4.3-1.6,7-1.6h24.6V45.5H179.9z"/>
+          <path class="st0" d="M226.4,58.3v31c0,10.2,2.5,17.6,7.6,22c5.1,4.4,13,6.6,23.7,6.6v-12.8c-2.7,0-4.9-0.2-6.8-0.4
+            c-1.8-0.3-3.7-0.9-5.8-1.9c-2-0.9-3.6-2.6-4.7-4.9c-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214,58.3H226.4z"/>
+          <path class="st0" d="M281.1,118V76.8c0-7.2,0.9-12,2.6-14.5c1-1.3,2.2-2.2,3.6-2.8c1.4-0.6,2.6-1,3.6-1.1c1-0.1,2.5-0.1,4.3-0.1
+            H310V45.5h-12.2c-3.6,0-6.5,0.1-8.6,0.3c-2.1,0.2-4.5,0.9-7.3,2c-2.8,1.1-5.1,2.8-7.1,5c-4,4.4-6,12.4-6,24V118H281.1z"/>
+          <path class="st0" d="M326.2,53.8c-6.2,7.4-9.3,17-9.3,28.9c0,10.7,3.2,19.4,9.5,26.2s14.7,10.1,25.3,10.1c8.7,0,16.3-2.7,22.7-8.1
+            L366,102c-3.7,2.1-8.5,3.2-14.3,3.2c-6.5,0-11.8-2.3-15.8-6.9c-4-4.6-6-10.5-6-17.9c0-7,1.9-12.9,5.6-17.9c3.8-5,8.9-7.5,15.5-7.5
+            c3.3,0,6.1,0.8,8.2,2.4c2.1,1.6,3.2,4,3.2,7.2c0,5-1.2,8.5-3.6,10.6c-2.4,2.1-6.7,3.2-12.9,3.2h-6.7v11.7h5.7
+            c20.3,0,30.5-8.5,30.5-25.4c0-13.6-7.9-20.7-23.7-21.5C340.9,43,332.4,46.5,326.2,53.8z"/>
+          <path class="st0" d="M412.3,73.2c-7.4,0-13.6,1.9-18.5,5.7c-4.9,3.8-7.4,9.4-7.4,16.7c0,7.3,2.3,12.9,7,16.7
+            c4.6,3.8,10.9,5.7,18.8,5.7h31V73.6c0-9.1-2.4-16-7.2-20.8c-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9,0,16.4,6.1,16.4,18.2
+            v28.7h-18.4c-9.1,0-13.6-3.2-13.6-9.8c0-3.3,1.2-5.9,3.6-7.8c2.4-1.8,5.8-2.7,10.2-2.7c5.1,0,9.4,1.4,12.9,4.3V75.3
+            C420.9,73.9,416.5,73.2,412.3,73.2z"/>
+          <path class="st0" d="M458.8,118H471V58.3h24.4V118h12.2V58.3h5.7c6.8,0,11.3,0.7,13.5,2c4.3,2.5,6.5,7.7,6.5,15.5V118h12.2V75.7
+            c0-6-0.6-11.2-1.9-15.5c-1.2-4.3-3.9-7.8-7.9-10.6c-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/>
+          <polygon class="st1" points="75,118.5 75,35.5 96,48.5 96,118.5 	"/>
+          <polygon class="st2" points="99,118.5 99,49.5 110.5,56.5 121,49.5 121,118.5 	"/>
+          <polygon class="st1" points="124,118.5 124,48.5 145,35.5 145,118.5 	"/>
+        </g>
+        </svg>
+      </div>
+      <div class="col s12 m1 l2"></div>
+    </div>
     <form id="login">
-      <div class="login__group">
-        <input id="email" placeholder="&nbsp;" class="login__input" type="text" name="input_email" required>
-        <label class="login__label" >Username</label>
-        <div class="login__bar"></div>
+      <div class="row">
+        <div class="col s12 m2 l3"></div>
+        <div class="input-field col s12 m8 l6">
+          <input id="email" type="text" required>
+          <label for="email">Username</label>
+        </div>
+        <div class="col s12 m2 l3"></div>
       </div>
-      <div class="login__group">
-        <input id="password" placeholder="&nbsp;" class="login__input" type="password" name="input_password" required>
-        <label class="login__label">Password </label>
-        <div class="login__bar"></div>
+      <div class="row">
+        <div class="col s12 m2 l3"></div>
+        <div class="input-field col s12 m8 l6">
+          <input id="password" type="password" required>
+          <label for="password">Password</label>
+        </div>
+        <div class="col s12 m2 l3"></div>
+      </div>
+      <div class="row">
+        <div class="col s12 spacer"></div>
+        <div class="col s12 m6 l6"></div>
+        <button class="btn waves-effect waves-light blue col s12 m4 l3" type="submit" id="form-submit" name="action">
+          Login
+        </button>
+        <div class="col s12 m2 l3"></div>
       </div>
-      <button class="my-waves" id="form-submit" type="submit">Login</button>
     </form>
   </div>
 </body>
