diff --git a/app/javascript/dashboard/assets/scss/widgets/_login.scss b/app/javascript/dashboard/assets/scss/widgets/_login.scss
index d5272e3ca..4353494f3 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_login.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_login.scss
@@ -1,3 +1,68 @@
+// Outside login wrapper
+// Super admin login page
+.login {
+  @include full-height;
+  overflow-y: auto;
+  padding-top: $space-larger * 1.2;
+
+  .login__hero {
+    margin-bottom: $space-larger;
+
+    .hero__logo {
+      width: 180px;
+    }
+
+    .hero__title {
+      font-weight: $font-weight-light;
+      margin-top: $space-larger;
+    }
+
+    .hero__sub {
+      color: $medium-gray;
+      font-size: $font-size-medium;
+    }
+  }
+
+  // Login box
+  .login-box {
+    @include background-white;
+    @include border-normal;
+    @include elegant-card;
+
+    border-radius: $space-smaller;
+    padding: $space-large;
+
+    label {
+      color: $color-gray;
+      font-size: $font-size-default;
+
+      input {
+        font-size: $font-size-default;
+        height: $space-larger;
+        padding: $space-slab;
+      }
+
+      .error {
+        font-size: $font-size-small;
+      }
+    }
+
+    .button {
+      height: $space-larger;
+    }
+  }
+
+  .sigin__footer {
+    font-size: $font-size-default;
+    padding: $space-medium;
+
+    > a {
+      font-weight: $font-weight-bold;
+    }
+  }
+}
+
+// Dashboard view
 .auth-screen--view {
   display: flex;
   height: 100%;