diff --git a/src/common/pages/Login/index.js b/src/common/pages/Login/index.js
index c3bf8bc..dfe17ee 100644
--- a/src/common/pages/Login/index.js
+++ b/src/common/pages/Login/index.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import {Card, CardActions, CardText, CardTitle, Divider, Paper,RaisedButton, TextField,Dialog,FlatButton,} from 'material-ui';
+import {TextField, RaisedButton} from 'material-ui';
 import {inject, observer} from 'mobx-react';
-import * as firebase from "firebase";
 import './style.scss'
 import {LINKS} from "../../routes";
-import {getMobileOperatingSystem} from '../../stores/firebase';
-import {Helmet} from "react-helmet";
 
 
 @inject('appstate')
@@ -17,256 +14,40 @@ export default class LoginComponent extends React.Component {
     this.state = {
       email: "",
       password: "",
-      warningLogin : false,
-      warningLoginMessage  : '',
-      notif:false,
     };
     this.defaultState = Object.assign({}, this.state);
-    this.authStore = props.appstate.auth;
-    this.http = props.appstate.http;
-    this.settingStore = props.appstate.setting;
   }
 
   componentDidMount() {
-    this.settingStore.getAll();
-    const firebase = require('firebase');
-    firebase.messaging().requestPermission()
-      .then(function () {
-        console.log('Notification permission granted.');
-        return firebase.messaging().getToken();
-      })
-      .then(currentToken => {
-        if (currentToken) {
-          console.log(currentToken, "user tokens");
-          localStorage.setItem('tokens', currentToken);
-        } else {
-          // Show permission request.
-          console.log('No Instance ID token available. Request permission to generate one.');
-          // Show permission UI.
-        }
-      });
-  }
 
-  handleTextFieldChange = (event, name) => {
-    this.setState({
-      [name]: event.target.value
-    });
-  };
-
-  login=(e)=>{
-    firebase.messaging().requestPermission()
-    .then(() => {
-        // alert('bisa')
-
-    //     e.preventDefault();
-    var tokenNotif = localStorage.getItem('tokens');
-    this.authStore.login({
-      username: this.state.email,
-      password: this.state.password,
-      firebase_token: tokenNotif
-    })
-      .then(() => {
-        localStorage.setItem('isLoggedIn', true);
-        this.props.history.push(LINKS.DASHBOARD);
-        console.log(this.state.email + " is logging in..")
-      }).catch(err => {
-        console.log(err);
-        this.openWarningMessage(err.message); 
-      });
-
-    })
-    .catch(error => {
-      this.setState({
-        notif:true
-      })
-      // alert('gk bisa')  
-    })
-
-    
-  }
-
-  openWarningMessage = (message)=>{
-    this.setState({
-      warningLoginMessage : message,
-      warningLogin : true
-    })
-  }
-
-  closeWarning = ()=>{
-    this.setState({
-      warningLogin : false
-    })
-  }
-
-  handleClose = ()=>{
-    this.setState({
-      notif : false
-    })
   }
 
   render() {
 
-    const actions = [
-      <RaisedButton
-        label={"Ok"}
-        primary={true}
-        onClick={()=>this.closeWarning()}
-      />,
-    ];
-
-    const actionsNotif = [
-      <RaisedButton
-        label="Done"
-        primary={true}
-        onClick={this.handleClose}
-      />,
-    ];
-
-    // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
-    const applicationIcon = "/assets/images/bankbtn.png";
     return (
-      <div className="login login-wrapper">
-        <Helmet>
-          <meta charSet="utf-8"/>
-          <title>{/*(this.settingStore.setting.name) ? this.settingStore.setting.name : ""*/'BTN'}</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-          <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
-        </Helmet>
-        <div style={{width: "100%"}}>
-          {/*
-            (this.settingStore.isIconEmpty) ?
-              <div style={{textAlign: "center"}}>
-                <Paper style={{
-                  backgroundSize: "contain",
-                  backgroundClip: "padding-box",
-                  padding: 10,
-                  height: 75, width: 75,
-                  background: '#fff',
-                  marginRight: "auto",
-                  marginLeft: "auto"
-                }} zDepth={1} circle={true}>
-                  <img className="logo" src="/assets/images/bankbtn.png"/>
-                </Paper>
-                <h2 style={{
-                  color: '#000',
-                  marginRight: "auto",
-                  marginLeft: "auto",
-                  maxWidth: 500,
-                  marginTop: 15,
-                  marginBottom: 0
-                }}>5 Roti dan 2 Ikan</h2>
-              </div>
-              :
-              <div style={{textAlign: "center"}}>
-                <Paper style={{
-                  backgroundSize: "contain",
-                  backgroundClip: "padding-box",
-                  padding: 10,
-                  height: 75, width: 75,
-                  background: '#fff',
-                  marginRight: "auto",
-                  marginLeft: "auto"
-                }} zDepth={1} circle={true}>
-                  <img className="logo"
-                       src={this.http.appendImagePath(this.settingStore.setting.icon)}/>
-                </Paper>
-                <h2 style={{
-                  color: '#275164',
-                  marginRight: "auto",
-                  marginLeft: "auto",
-                  maxWidth: 500,
-                  marginTop: 15,
-                  marginBottom: 0
-                }}>{this.settingStore.setting.name}</h2>
-              </div>
-              */
-          }
-          <div style={{textAlign: "center"}}>
-                <Paper style={{
-                  backgroundSize: "contain",
-                  backgroundClip: "padding-box",
-                  padding: 10,
-                  height: 75, width: 75,
-                  background: '#fff',
-                  marginRight: "auto",
-                  marginLeft: "auto"
-                }} zDepth={1} circle={true}>
-                  <img className="logo" src={applicationIcon}/>
-                </Paper>
-                <h2 style={{
-                  color: '#000',
-                  marginRight: "auto",
-                  marginLeft: "auto",
-                  maxWidth: 500,
-                  marginTop: 15,
-                  marginBottom: 0
-                }}>BTN</h2>
-              </div>
-        </div>
-        <Card style={{width: 350, marginTop: '18px'}} className="cardLite align-center">
-          <CardTitle title={<p style={{fontSize: 14}}>Login to Store Admin Console</p>}>
-            <Divider style={{backgroundColor: 'rgba(171, 111, 48, 1)', width: '150px'}} className="margin-auto"/>
-          </CardTitle>
+      <div className="loginWrapper">
+        <div className={'formContainer'}>
+          <img className={'logoLogin'} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
+          <p className={'textLogin'}>Login into our System</p>
 
-          <form>
-            <CardText>
-              <TextField
-                hintText="Email"
-                fullWidth={true}
-                name="email"
-                type="email"
-                value={this.state.email}
-                onChange={(event) => this.handleTextFieldChange(event, 'email')}
+          <div className={'formParent'}>
+            <div className={'inputContainer'}>
+              <input
+                className={'usernameForm'}
+                placeholder="Username"
               />
-              <TextField
-                hintText="Password"
-                name="password"
-                fullWidth={true}
+              <input
+                className={'passwordForm'}
+                placeholder="Password"
                 type="password"
-                value={this.state.password}
-                onChange={(event) => this.handleTextFieldChange(event, 'password')}
-                onKeyPress={(ev) => {
-                  if (ev.key === 'Enter') {
-                    // Do code here
-                    this.login()
-                  }
-                }}
               />
-            </CardText>
-            <CardActions>
-              <RaisedButton primary={true} label="Login To Your Account" onClick={this.login}/>
-            </CardActions>
-            <a style={{fontSize: 12, fontWeight: 500, display: 'block', margin: '18px 0px 30px'}}
-               onClick={() => this.props.history.push(LINKS.FORGOT_PASSWORD)}>Forgot Password</a>
-          </form>
-        </Card>
-        <Dialog
-          title="Error"
-          actions={actions}
-          modal={true}
-          open={this.state.warningLogin}
-          onRequestClose={() => this.closeWarning()}
-        >
-          {this.state.warningLoginMessage}
-        </Dialog>
-        <Dialog
-          title="Warning"
-          actions={actionsNotif}
-          open={this.state.notif}
-          autoScrollBodyContent={true}
-          modal={false}
-        >
-            <p>1. You must allow notification</p>
-            <div style={{textAlign:'center'}}>
-              <img src="/assets/images/notification.jpg" style={{height : '400px'}}/>
             </div>
-            <p style={{marginTop:'1em'}}>2. Reload Page</p>
-            <div style={{textAlign:'center'}}>
-              <img style={{height: "400px"}}  src="/assets/images/reload.jpg"/>
-            </div>
-            {/*<p>1. You must allow notification</p>
-                        <img style={{width: "100%", height: "100%"}}  src="/assets/images/notification.jpg"/>*/}
-        </Dialog>
+
+            <button onClick={() => this.props.history.push(LINKS.DASHBOARD)} className={'buttonLogin'}>
+              Sign In
+            </button>
+          </div>
+        </div>
       </div>
     )
   }
diff --git a/src/common/pages/Login/style.scss b/src/common/pages/Login/style.scss
index 4077e85..6919317 100644
--- a/src/common/pages/Login/style.scss
+++ b/src/common/pages/Login/style.scss
@@ -1,83 +1,76 @@
-.login {
+@import url('https://fonts.googleapis.com/css?family=Thasadith');
 
+.loginWrapper{
   display: flex;
+  flex: 1;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
-  //background-size: cover;
-  //position: fixed;
-  //height: 100%;
-  //width: 100%;
-  //top:0;
-  //overflow: hidden;
-  .logo {
-    width: 100%;
-  }
+  padding-top: 12.5vh;
 
-  .background {
-    height: 100%;
-    overflow: hidden;
-    background: rgba(128, 0, 128, 0.82); /* fallback for old browsers */
-    background: -webkit-linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92)); /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92));
-    position: absolute;
-    width: 100%;
-  }
-  .ant-form-explain {
-    text-align: left;
-  }
-  .login-box {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 460px;
-    height: 320px;
-    padding: 36px;
-    background-color: #1e2e4a;
-    box-shadow: 0 0 100px rgba(0, 0, 0, .08);
-    .header {
+  .formContainer{
+    display: flex;
+    flex-direction: column;
+
+    .logoLogin{
+      width: 200px;
+      height: auto;
+      align-self: center;
+    }
+
+    .textLogin{
       text-align: center;
-      cursor: pointer;
-      margin-bottom: 24px;
-      img {
-        width: 40px;
-        margin-right: 8px;
-      }
-      span {
-        vertical-align: text-bottom;
-        font-size: 16px;
-        text-transform: uppercase;
-        display: inline-block;
-      }
-      p {
-        font-size: 16px;
-        text-transform: uppercase;
+      margin-top: 5vh;
+      margin-bottom: 7.5vh;
+      font-size: 1.25rem;
+      font-weight: lighter;
+      color: #555;
+      font-family: 'Thasadith', sans-serif;
+    }
 
+    .formParent{
+      display: flex;
+      flex-direction: row;
+
+      .inputContainer{
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.06), 0 10px 10px rgba(0,0,0,0.03);
+
+        .usernameForm{
+          border: 0px;
+          padding: 15px;
+          width: 20vw;
+          border-bottom: 1px solid #eee;
+        }
+        .passwordForm{
+          border: 0px;
+          padding: 15px;
+          width: 20vw;
+        }
+      }
+
+      .buttonLogin{
+        width: 100px;
+        height: 35px;
+        align-self: center;
+        margin-left: -3vw;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.09), 0 10px 10px rgba(0,0,0,0.06) !important;
+        color: #fff;
+        border: 0px;
+        background-color: #6772e5;
+        border-radius: 2.5px;
+        cursor: pointer;
+        transition: 0.5s;
+      }
+
+      .buttonLogin:hover{
+        background-color: #424770;
       }
     }
   }
 }
-//
-//.login::before {
-//  content: "";
-//  position: absolute;
-//  z-index: -1;
-//  background: -webkit-gradient(linear, left top, right bottom, from(#D7BBEA), to(#65A8F1));
-//  background: linear-gradient(to bottom right, #D7BBEA, #65A8F1);
-//  top: 0;
-//  left: 0;
-//  bottom: 0;
-//  right: 0;
-//}
 
-//.login-wrapper {
-//  margin: 0 auto;
-//  position: relative;
-//  min-height: 100%;
-//  box-shadow: none;
-//  border-radius: 0;
-//  background-image: url('/assets/images/bg-pattern2.png');
-//  background-size: contain;
-//  background-repeat: repeat;
-//  background-position: 0 0;
-//}
+textarea:focus, input:focus{
+  outline: none;
+}