diff --git a/login/resources/css/custom.css b/login/resources/css/custom.css
index e06a1bb..fb77413 100644
--- a/login/resources/css/custom.css
+++ b/login/resources/css/custom.css
@@ -1,125 +1,131 @@
+:root {
+  --main-color: #00c2c2;
+  --secondary-color: #b3ffff;
+  --background-color: #fff;
+}
+
 body {
-    font-family: "Karla", sans-serif;
-    background-color: #fff;
-    min-height: 100vh;
+  font-family: 'Karla', sans-serif;
+  background-color: var(--background-color);
+  min-height: 100vh;
 }
 
 .brand-wrapper {
-    padding-top: 7px;
-    padding-bottom: 8px;
+  padding-top: 7px;
+  padding-bottom: 8px;
 }
 
 .brand-wrapper .logo {
-    height: 50px;
+  height: 50px;
 }
 
 .login-section-wrapper {
-    display: -webkit-box;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    flex-direction: column;
-    padding: 68px 100px;
-    background-color: #fff;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  padding: 68px 100px;
+  background-color: var(--background-color);
 }
 
 @media (max-width: 991px) {
-    .login-section-wrapper {
-        padding-left: 50px;
-        padding-right: 50px;
-    }
+  .login-section-wrapper {
+    padding-left: 50px;
+    padding-right: 50px;
+  }
 }
 
 @media (max-width: 768px) {
-    .login-section-wrapper {
-        padding-top: 20px;
-        padding-bottom: 20px;
-        min-height: 100vh;
-    }
+  .login-section-wrapper {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    min-height: 100vh;
+  }
 }
 
 .login-wrapper {
-    width: 500px;
-    max-width: 100%;
-    padding-top: 24px;
-    padding-bottom: 24px;
+  width: 500px;
+  max-width: 100%;
+  padding-top: 24px;
+  padding-bottom: 24px;
 }
 
 @media (max-width: 768px) {
-    .login-wrapper {
-        width: 100%;
-    }
+  .login-wrapper {
+    width: 100%;
+  }
 }
 
 .login-wrapper label {
-    font-size: 14px;
-    font-weight: bold;
-    color: #b0adad;
+  font-size: 14px;
+  font-weight: bold;
+  color: #b0adad;
 }
 
 .login-wrapper .form-control {
-    border: none;
-    border-bottom: 1px solid #b3ffff;
-    border-radius: 0;
-    padding: 9px 5px;
-    min-height: 40px;
-    font-size: 18px;
-    font-weight: normal;
+  border: none;
+  border-bottom: 1px solid var(--secondary-color);
+  border-radius: 0;
+  padding: 9px 5px;
+  min-height: 40px;
+  font-size: 18px;
+  font-weight: normal;
 }
 
 .login-wrapper .form-control::-webkit-input-placeholder {
-    color: #b0adad;
+  color: #b0adad;
 }
 
 .login-wrapper .form-control::-moz-placeholder {
-    color: #b0adad;
+  color: #b0adad;
 }
 
 .login-wrapper .form-control:-ms-input-placeholder {
-    color: #b0adad;
+  color: #b0adad;
 }
 
 .login-wrapper .form-control::-ms-input-placeholder {
-    color: #b0adad;
+  color: #b0adad;
 }
 
 .login-wrapper .form-control::placeholder {
-    color: #b0adad;
+  color: #b0adad;
 }
 
 .login-wrapper .login-btn {
-    padding: 13px 20px;
-    background-color: #00c2c2;
-    border-radius: 0;
-    font-size: 20px;
-    font-weight: bold;
-    color: #fff;
-    margin-bottom: 14px;
+  padding: 13px 20px;
+  background-color: var(--main-color);
+  border-radius: 0;
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--background-color);
+  margin-bottom: 14px;
 }
 
 .login-wrapper .login-btn:hover {
-    border: 1px solid #00c2c2;
-    background-color: #fff;
-    color: #00c2c2;
+  border: 1px solid var(--main-color);
+  background-color: var(--background-color);
+  color: var(--main-color);
 }
 
 .login-wrapper-footer-text {
-    font-size: 16px;
-    color: #000;
-    margin-bottom: 0;
+  font-size: 16px;
+  color: #000;
+  margin-bottom: 0;
 }
 
 .login-title {
-    color: #008080;
+  color: var(--main-color);
 }
 
 .login-img {
-    width: 100%;
-    height: 100vh;
-    -o-object-fit: cover;
-    object-fit: cover;
-    -o-object-position: left;
-    object-position: left;
+  width: 100%;
+  height: 100vh;
+  -o-object-fit: cover;
+  object-fit: cover;
+  -o-object-position: left;
+  object-position: left;
 }
 
-/*# sourceMappingURL=login.css.map */
\ No newline at end of file
+/*# sourceMappingURL=login.css.map */
diff --git a/login/resources/images/favicon.ico b/login/resources/images/favicon.ico
index 65cf219..d37d518 100644
Binary files a/login/resources/images/favicon.ico and b/login/resources/images/favicon.ico differ
diff --git a/login/resources/images/favicon.png b/login/resources/images/favicon.png
deleted file mode 100644
index 65cf219..0000000
Binary files a/login/resources/images/favicon.png and /dev/null differ
diff --git a/login/resources/images/logo_left.png b/login/resources/images/logo_left.png
deleted file mode 100644
index a545bfd..0000000
Binary files a/login/resources/images/logo_left.png and /dev/null differ
diff --git a/login/resources/images/logo_light_bold.png b/login/resources/images/logo_light_bold.png
new file mode 100644
index 0000000..71fe2b9
Binary files /dev/null and b/login/resources/images/logo_light_bold.png differ
diff --git a/login/template.ftl b/login/template.ftl
index 90bd009..60b3d18 100644
--- a/login/template.ftl
+++ b/login/template.ftl
@@ -21,7 +21,7 @@
             <div class="row">
                 <div class="col-md-6 login-section-wrapper">
                     <div class="brand-wrapper">
-                        <img src="${url.resourcesPath}/images/logo_left.png" alt="logo" class="logo">
+                        <img src="${url.resourcesPath}/images/logo_light_bold.png" alt="logo" class="logo">
                     </div>
                     <div class="login-wrapper my-auto">
                         <#nested "header">