diff --git a/src/Backend/Program.cs b/src/Backend/Program.cs
index a074df4..c5d14d5 100644
--- a/src/Backend/Program.cs
+++ b/src/Backend/Program.cs
@@ -74,8 +74,7 @@
                                                                                {
                                                                                    {
                                                                                        "url",
-                                                                                       new OpenApiString(
-                                                                                           "https://github.com/AleksanderNekr/LichessAnalyzer/blob/master/src/Frontend/src/assets/logo-gen-nobg.png?raw=true")
+                                                                                       new OpenApiString("/assets/logo-gen-nobg.png?raw=true")
                                                                                    },
                                                                                    { "altText", new OpenApiString("The Logo") }
                                                                                }
diff --git a/src/Frontend/src/app/login/login.component.css b/src/Frontend/src/app/login/login.component.css
index e69de29..8b13789 100644
--- a/src/Frontend/src/app/login/login.component.css
+++ b/src/Frontend/src/app/login/login.component.css
@@ -0,0 +1 @@
+
diff --git a/src/Frontend/src/app/login/login.component.html b/src/Frontend/src/app/login/login.component.html
index 94df036..7a72629 100644
--- a/src/Frontend/src/app/login/login.component.html
+++ b/src/Frontend/src/app/login/login.component.html
@@ -1,3 +1,12 @@
-<h1>Login using Lichess.org</h1>
-
-<a class="btn btn-outline-primary" href="/login">Login</a>
+<div class="container mt-5">
+  <div class="card mx-auto" style="max-width: 400px;">
+    <div class="card-header d-flex flex-column align-items-center">
+      <img ngSrc="assets/lichess-logo.png" alt="lichess-logo"
+           width="200" height="200" class="mt-5">
+      <h1 class="text-center mt-3 mb-5">Sign up using Lichess.org</h1>
+    </div>
+    <div class="card-body d-flex justify-content-center">
+      <a class="btn btn-primary btn-lg w-75" href="/login">Sign up</a>
+    </div>
+  </div>
+</div>
diff --git a/src/Frontend/src/app/login/login.component.ts b/src/Frontend/src/app/login/login.component.ts
index 0c59cff..7fbbd53 100644
--- a/src/Frontend/src/app/login/login.component.ts
+++ b/src/Frontend/src/app/login/login.component.ts
@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 import { AuthService } from "../auth/auth.service";
+import { NgOptimizedImage } from "@angular/common";
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [],
+  imports: [
+    NgOptimizedImage
+  ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css',
   providers: [ AuthService ]
diff --git a/src/Frontend/src/assets/lichess-logo.png b/src/Frontend/src/assets/lichess-logo.png
new file mode 100644
index 0000000..c6e7362
Binary files /dev/null and b/src/Frontend/src/assets/lichess-logo.png differ
diff --git a/src/Frontend/src/favicon.ico b/src/Frontend/src/favicon.ico
index 57614f9..0bc41f4 100644
Binary files a/src/Frontend/src/favicon.ico and b/src/Frontend/src/favicon.ico differ