diff --git a/src/HopFrame.Web/Pages/Administration/AdminLogin.razor b/src/HopFrame.Web/Pages/Administration/AdminLogin.razor
index c346c23..1033852 100644
--- a/src/HopFrame.Web/Pages/Administration/AdminLogin.razor
+++ b/src/HopFrame.Web/Pages/Administration/AdminLogin.razor
@@ -12,7 +12,7 @@
 <PageTitle>Login</PageTitle>
 
 <div class="login-wrapper">
-    <EditForm Model="UserLogin" OnValidSubmit="Login" FormName="login-form">
+    @*<EditForm Model="UserLogin" OnValidSubmit="Login" FormName="login-form">
         <div class="field-wrapper">
             <h3>Login</h3>
             <div class="mb-3">
@@ -29,7 +29,29 @@
                 <BSAlert Color="BSColor.Danger" style="margin-top: 16px; margin-bottom: 0">Email or password does not match any account!</BSAlert>
             }
         </div>
-    </EditForm>
+    </EditForm>*@
+    
+    <div id="login-card">
+        <span id="login-title">HopFrame Administration</span>
+        <span id="login-subtitle">Login to proceed</span>
+        <EditForm Model="UserLogin" OnInvalidSubmit="Login" FormName="login-form" style="display: flex; flex-grow: 1; flex-direction: column">
+            <div class="mb-3">
+                <BSLabel>E-Mail address</BSLabel>
+                <InputText type="email" class="form-control" required @bind-Value="UserLogin.Email"/>
+            </div>
+            <div class="mb-3">
+                <BSLabel>Password</BSLabel>
+                <InputText type="password" class="form-control" required @bind-Value="UserLogin.Password"/>
+            </div>
+            
+            @if (_hasError) {
+                <BSAlert Color="BSColor.Danger" style="margin-top: 16px; margin-bottom: 0">Email or password does not match any account!</BSAlert>
+            }
+            
+            <BSButton Color="BSColor.Primary" IsSubmit="true" MarginTop="Margins.Auto" MarginLeftAndRight="Margins.Auto" style="width: 100px">Login</BSButton>
+
+        </EditForm>
+    </div>
 </div>
 
 @inject IAuthService Auth
@@ -44,7 +66,7 @@
 
     private const string DefaultRedirect = "/administration";
 
-    private bool _hasError = false;
+    private bool _hasError;
 
     protected override async Task OnInitializedAsync() {
         UserLogin ??= new();
@@ -54,7 +76,7 @@
         }
     }
 
-    private async Task Login() {
+    private async Task Login() { //TODO: Login does not work
         var result = await Auth.Login(UserLogin);
 
         if (!result) {
diff --git a/src/HopFrame.Web/Pages/Administration/AdminLogin.razor.css b/src/HopFrame.Web/Pages/Administration/AdminLogin.razor.css
index 26ceacc..ae5dfed 100644
--- a/src/HopFrame.Web/Pages/Administration/AdminLogin.razor.css
+++ b/src/HopFrame.Web/Pages/Administration/AdminLogin.razor.css
@@ -2,14 +2,33 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    background-color: #2c3034;
+    height: 100vh;
 }
 
-.field-wrapper {
-    margin-top: 25vh;
-    min-width: 500px;
-
-    padding: 30px;
-    border: 2px solid #ced4da;
-    border-radius: 10px;
-    position: relative;
+#login-card {
+    min-width: 700px;
+    min-height: 500px;
+    background-color: #212529;
+    border-radius: 20px;
+    color: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+#login-card span {
+    display: block;
+    text-align: center;
+}
+
+#login-title {
+    font-size: 35px;
+    line-height: 1.5;
+}
+
+#login-subtitle {
+    font-size: 24px;
+    opacity: .3;
+    margin-bottom: 30px;
 }