diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb
index aa97bce7..e83a11d0 100755
--- a/app/views/layouts/login.html.erb
+++ b/app/views/layouts/login.html.erb
@@ -10,29 +10,29 @@
   <!-- Favicon-->
   <link rel="icon" href="favicon.ico" type="image/x-icon">
 
-    <!-- Google Fonts -->
+  <!-- Google Fonts -->
     <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> -->
 
-  <!-- Bootstrap Core Css -->
-  <!-- <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> -->
+    <!-- Bootstrap Core Css -->
+    <!-- <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> -->
 
-  <!-- Waves Effect Css -->
-  <!-- <link href="plugins/node-waves/waves.css" rel="stylesheet" /> -->
+    <!-- Waves Effect Css -->
+    <!-- <link href="plugins/node-waves/waves.css" rel="stylesheet" /> -->
 
-  <!-- Animation Css -->
-  <!-- <link href="plugins/animate-css/animate.css" rel="stylesheet" /> -->
+    <!-- Animation Css -->
+    <!-- <link href="plugins/animate-css/animate.css" rel="stylesheet" /> -->
 
-  <!-- Morris Chart Css-->
-  <!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->
+    <!-- Morris Chart Css-->
+    <!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->
 
-  <!-- Custom Css -->
-  <!-- <link href="css/style.css" rel="stylesheet"> -->
+    <!-- Custom Css -->
+    <!-- <link href="css/style.css" rel="stylesheet"> -->
+
+    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
+    <!-- <link href="css/themes/all-themes.css" rel="stylesheet" /> -->
+    <%= stylesheet_link_tag    'login', media: 'all', 'data-turbolinks-track': 'reload' %>
 
-  <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
-  <!-- <link href="css/themes/all-themes.css" rel="stylesheet" /> -->
-  <%= stylesheet_link_tag    'login', media: 'all', 'data-turbolinks-track': 'reload' %>
-  
     <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
     <%= javascript_include_tag 'login', 'data-turbolinks-track': 'reload' %> 
@@ -81,91 +81,113 @@
       </div>
       <%= simple_form_for(@login_form, url: login_path, method: "post") do |f| %>
       <div class="card padding-10">
-        <div class="card-header">
-          <div class="form-group">
-            <%= f.input :emp_id, as: :hidden, required: false, class: "form-control" %>
+        <div class="card-header m-l-">
+          <div class="row clearfix">
+            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
+              <%= f.input :emp_id, as: :hidden, required: false, class: "form-control" %>
 
-            <%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
-          </div>              
+              <%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
+
+            </div>
+            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-10">
+              <br>
+              <span class="input-group-addon enter m-t-25 m-l--25" data-value="ENT" style="cursor: pointer;padding:0.1rem !important;">
+                <i class="material-icons">send</i>
+              </span>
+            </div>
+          </div>
         </div>
-          
-                  <div class="card-content">
-                    <div class='col-md-12'>
-                      <div class='row bottom'>
-                        <div class="pin_pad " data-value="1">1</div>
-                        <div class="pin_pad left" data-value="2">2</div>
-                        <div class="pin_pad left" data-value="3">3</div>
-                      </div>
-                      <div class='row bottom'>
-                        <div class="pin_pad" data-value="4">4</div>
-                        <div class="pin_pad left" data-value="5">5</div>
-                        <div class="pin_pad left" data-value="6">6</div>
-                      </div>
-                      <div class='row bottom'>
-                        <div class="pin_pad" data-value="7">7</div>
-                        <div class="pin_pad left" data-value="8">8</div>
-                        <div class="pin_pad left" data-value="9">9</div>
-                      </div>
-                      <div class='row bottom'>
-                        <div class="pin_pad bg-grey" data-value="CLR">CLR</div>
-                        <div class="pin_pad left" data-value="0">0</div>
-                        <div class="pin_pad left bg-indigo" data-value="ENT">ENT</div>
-                      </div>                      
-                    </div>
-                  </div>
-            <% end %>
-    </div>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            $("#login_form_password").focus();
 
-            $(".pin_pad").click(function (event) {
-                event.preventDefault();                
-                var value = $(this).data("value");
+        <div class="card-content">
+          <div class='col-md-12'>
+            <div class='row bottom'>
+              <div class="pin_pad " data-value="1">1</div>
+              <div class="pin_pad left" data-value="2">2</div>
+              <div class="pin_pad left" data-value="3">3</div>
+            </div>
+            <div class='row bottom'>
+              <div class="pin_pad" data-value="4">4</div>
+              <div class="pin_pad left" data-value="5">5</div>
+              <div class="pin_pad left" data-value="6">6</div>
+            </div>
+            <div class='row bottom'>
+              <div class="pin_pad" data-value="7">7</div>
+              <div class="pin_pad left" data-value="8">8</div>
+              <div class="pin_pad left" data-value="9">9</div>
+            </div>
+            <div class='row bottom'>
+              <!--  <div class="pin_pad bg-grey" data-value="CLR">CLR</div>
+               <div class="pin_pad left" data-value="0">0</div>
+               <div class="pin_pad left bg-indigo" data-value="ENT">ENT</div> -->
+               <div class="pin_pad bg-blue-grey" data-value="BAC">BACK</div>
+               <div class="pin_pad left" data-value="0">0</div>
+               <div class="pin_pad bg-grey left" data-value="CLR">CLR</div>                    
+            </div>                      
+          </div>
+         </div>
+        <% end %>
+ </div>
+ <script type="text/javascript">
+  $(document).ready(function () {
+    $("#login_form_password").focus();
 
-                if (value == "CLR") {
-                    $("#login_form_password").val("");
-                } else if (value == "ENT") {
-                    $("#new_login_form").submit();
-                } else {
-                    var old_value = $("#login_form_password").val();
-                    $("#login_form_password").val(old_value + value);
-                }
-            });
-        });
-        function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
-          if (colorName === null || colorName === '') { colorName = 'bg-black'; }
-          if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
-          if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
-          var allowDismiss = true;
-          $.notify({
-            message: text
-          },
-          {
-            type: colorName,
-            allow_dismiss: allowDismiss,
-            newest_on_top: true,
-            timer: 1000,
-            placement: {
-              from: placementFrom,
-              align: placementAlign
-            },
-            animate: {
-              enter: animateEnter,
-              exit: animateExit
-            },
-            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
-            '<button type="button" aria-hidden="true" class="close float-right m-l-20 m-t--5" data-notify="dismiss">×</button>' +
-            '<span data-notify="icon"></span> ' +
-            '<span data-notify="title">{1}</span> ' +
-            '<span data-notify="message">{2}</span>' +
-            '<div class="progress" data-notify="progressbar">' +
-            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
-            '</div>' +
-            '<a href="{3}" target="{4}" data-notify="url"></a>' +
-            '</div>'
-          });
-        }
+    $(".pin_pad").click(function (event) {
+      event.preventDefault();                
+      var value = $(this).data("value");
+
+      if (value == "CLR") {
+        $("#login_form_password").val("");
+      } else if (value == "ENT") {
+        $("#new_login_form").submit();
+      } else if (value == "BAC") {
+        window.location.href = "/"
+      } else {
+        var old_value = $("#login_form_password").val();
+        $("#login_form_password").val(old_value + value);
+      }
+    });
+    $(".enter").click(function (event) {
+      event.preventDefault();                
+      var value = $(this).data("value");
+
+      if (value == "ENT") {
+        $("#new_login_form").submit();
+      } 
+    });
+  });
+  function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
+    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
+    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
+    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
+    var allowDismiss = true;
+    $.notify({
+      message: text
+    },
+    {
+      type: colorName,
+      allow_dismiss: allowDismiss,
+      newest_on_top: true,
+      timer: 1000,
+      placement: {
+        from: placementFrom,
+        align: placementAlign
+      },
+      animate: {
+        enter: animateEnter,
+        exit: animateExit
+      },
+      template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
+      '<button type="button" aria-hidden="true" class="close float-right m-l-20 m-t--5" data-notify="dismiss">×</button>' +
+      '<span data-notify="icon"></span> ' +
+      '<span data-notify="title">{1}</span> ' +
+      '<span data-notify="message">{2}</span>' +
+      '<div class="progress" data-notify="progressbar">' +
+      '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
+      '</div>' +
+      '<a href="{3}" target="{4}" data-notify="url"></a>' +
+      '</div>'
+    });
+  }
   //end Notificaiotn message
 </script>
 </body>