diff --git a/app/frontend/templates/public/login.html b/app/frontend/templates/public/login.html
index c5c8ad05..ea151ed2 100755
--- a/app/frontend/templates/public/login.html
+++ b/app/frontend/templates/public/login.html
@@ -26,26 +26,50 @@
           <div class="row w-100">
             <div class="col-lg-4 mx-auto">
 
-              <div class="auto-form-wrapper">
+              <div class="auto-form-wrapper login-modal">
                 <div class="text-center">
-                <img src="/static/assets/images/logo_long.jpg">
-              </div>
+                  <img src="/static/assets/images/logo_long.jpg">
+                </div>
+                <style>
+                  .login-modal {
+                    border-radius: 0.4rem !important;
+                    box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2) !important;
+                  }
+                  .login-text-input {
+                    border: none !important;
+                    background-color: hsl(234, 30%, 45%);
+                    color: #ffffff !important;
+                  }
+                  .login-text-input:hover,
+                  .login-text-input:focus {
+                    background-color: hsl(234, 30%, 39%) !important;
+                  }
+                  .login-input {
+                    border-radius: 0.4rem !important;
+                    box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2);
+                    transition: all 0.3s ease-in-out;
+                  }
+                  .login-input:hover,
+                  .login-input:focus {
+                    box-shadow: 0 12px 16px 0 hsla(0, 0%, 0%, 0.4);
+                  }
+                </style>
                 <form action="/public/login" method="post">
                   {% raw xsrf_form_html() %}
                   <div class="form-group">
                     <label class="label">Username</label>
                     <div class="input-group">
-                      <input type="text" class="form-control" placeholder="username" name="username" id="username" required="true">
+                      <input type="text" class="form-control login-text-input login-input" placeholder="username" name="username" id="username" required="true">
                     </div>
                   </div>
                   <div class="form-group">
                     <label class="label">Password</label>
                     <div class="input-group">
-                      <input type="password" class="form-control" placeholder="" name="password" id="password" required="true">
+                      <input type="password" class="form-control login-text-input login-input" placeholder="" name="password" id="password" required="true">
                     </div>
                   </div>
                   <div class="form-group">
-                    <button class="btn btn-primary submit-btn btn-block">Login</button>
+                    <button class="login-input btn btn-primary submit-btn btn-block">Login</button>
                   </div>
                   <div class="form-group d-flex justify-content-between">
                     <div class="form-check form-check-flat mt-0">