diff --git a/app/components/home.tsx b/app/components/home.tsx
index 811cbdf51..5e4f0c6b9 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -2,7 +2,7 @@
 
 require("../polyfill");
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import styles from "./home.module.scss";
 
@@ -18,17 +18,17 @@ import { ErrorBoundary } from "./error";
 import { getISOLang, getLang } from "../locales";
 
 import {
+  Route,
   HashRouter as Router,
   Routes,
-  Route,
   useLocation,
 } from "react-router-dom";
-import { SideBar } from "./sidebar";
+import { api } from "../client/api";
+import { getClientConfig } from "../config/client";
+import { useAccessStore } from "../store";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
-import { getClientConfig } from "../config/client";
-import { api } from "../client/api";
-import { useAccessStore } from "../store";
+import { SideBar } from "./sidebar";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -128,7 +128,8 @@ function Screen() {
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
   const isMobileScreen = useMobileScreen();
-  const shouldTightBorder = getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
+  const shouldTightBorder =
+    getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
 
   useEffect(() => {
     loadAsyncGoogleFont();
diff --git a/app/login/login.module.scss b/app/login/login.module.scss
deleted file mode 100644
index db51c8e58..000000000
--- a/app/login/login.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 16px;
-  width: 100%;
-  max-width: 560px;
-  padding: 16px;
-}
-
-.headline {
-  text-align: center;
-}
-
-.subline {
-  text-align: center;
-}
-
-.sign-in-button {
-  width: 100%;
-  max-width: 260px;
-  text-decoration: none;
-}
diff --git a/app/login/page.tsx b/app/login/page.tsx
index edb3660f3..b0ab88a4c 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,45 +1,22 @@
 "use client";
 
 import { signIn, useSession } from "next-auth/react";
-import Link from "next/link";
-import { IconButton } from "../components/button";
 
-import styles from "./login.module.scss";
+import { useEffect } from "react";
+import { Loading } from "../components/home";
 
 export default function Login() {
   const session = useSession();
 
-  const handleLogin = async () => {
-    signIn("azure-ad", {
-      callbackUrl: "/",
-    });
-  };
+  useEffect(() => {
+    const handleLogin = async () => {
+      signIn("azure-ad", {
+        callbackUrl: "/",
+      });
+    };
 
-  return (
-    <div className={styles["container"]}>
-      <h1 className={styles["headline"]}>Welcome to AdEx GPT</h1>
+    handleLogin();
+  }, []);
 
-      <p className={styles["subline"]}>
-        Before you can start using AdEx GPT you have to sign in using your AdEx
-        account. After a successful sign in you will be redirected to the chat.
-      </p>
-
-      {session.status === "authenticated" ? (
-        <Link href="/" className={styles["sign-in-button"]}>
-          <IconButton
-            text="Go to Chat"
-            type="primary"
-            className={styles["sign-in-button"]}
-          />
-        </Link>
-      ) : (
-        <IconButton
-          text="Login"
-          type="primary"
-          className={styles["sign-in-button"]}
-          onClick={handleLogin}
-        />
-      )}
-    </div>
-  );
+  return <Loading />;
 }