diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 35ec1f9..a532c95 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -3,13 +3,17 @@ import "./style.css";
 import { useState } from "react";
 import { AuthProvider } from "react-oidc-context";
 import { oidcConfig, userManager } from "muzak/config/auth";
-import { Source_Sans_3 } from "next/font/google";
+import { Source_Sans_3, Nunito } from "next/font/google";
 
 const sourceSans = Source_Sans_3({
   weight: ["400"],
   subsets: ["latin"],
 });
 
+const nunito = Nunito({
+  subsets: ["latin"],
+});
+
 export default function RootLayout({
   children,
 }: {
@@ -22,11 +26,11 @@ export default function RootLayout({
   };
 
   return (
-    <html lang="en" className={sourceSans.className}>
+    <html lang="en" className={nunito.className}>
       <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
         <AuthProvider {...oidcConfig}>{children}</AuthProvider>
         <button
-          className={`absolute top-1 left-1  ${isAnimate ? "pause" : "play"}`}
+          className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
           onClick={toggleAnimation}
         ></button>
       </body>
diff --git a/frontend/src/app/lobby/page.tsx b/frontend/src/app/lobby/page.tsx
index e3d12a8..97abf62 100644
--- a/frontend/src/app/lobby/page.tsx
+++ b/frontend/src/app/lobby/page.tsx
@@ -1,7 +1,47 @@
+"use client";
+
+import { Vollkorn, Nunito } from "next/font/google";
+import { useState } from "react";
+
+const vollkorn = Vollkorn({
+  weight: "600",
+  subsets: ["latin"],
+});
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
 export default function Lobby() {
+  const [userName, setUserName] = useState("Stroop");
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Lobby</h1>
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-orange-300`}
+        >
+          LOGIN
+        </h1>
+      </div>
+
+      <div className="mb-12 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
+        <p className="text-xl text-white/90">Welkom, {userName}!</p>
+        <form className="flex flex-col items-center justify-center gap-4">
+          <input
+            className="w-full rounded border-2 border-gray-300 px-4 py-2 font-bold text-white/70"
+            type="text"
+            placeholder="Game PIN"
+          />
+          <button
+            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
+            type="submit"
+          >
+            Join
+          </button>
+        </form>
+      </div>
+      <div></div>
     </main>
   );
 }
diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css
index 11a5325..0b20a80 100644
--- a/frontend/src/app/style.css
+++ b/frontend/src/app/style.css
@@ -1,36 +1,39 @@
 @import "tailwindcss";
 
 @property --angle {
-    syntax: "<angle>";
-    inherits: false;
-    initial-value: 0deg;
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
 }
 
 .bg-game-show {
-    background: repeating-conic-gradient(
-        from var(--angle),
-        var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
-        var(--color-sky-700) calc(var(--angle) + 30deg)
-            calc(var(--angle) + 60deg)
-    );
+  background: repeating-conic-gradient(
+    from var(--angle),
+    var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
+    var(--color-sky-700) calc(var(--angle) + 30deg) calc(var(--angle) + 60deg)
+  );
 }
 
 .bg-game-show.animate {
-    animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite;
+  animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite;
 }
 
 @keyframes rotate_bg {
-    from {
-        --angle: 00deg;
-    }
-    to {
-        --angle: 30deg;
-    }
+  from {
+    --angle: 00deg;
+  }
+  to {
+    --angle: 30deg;
+  }
 }
 
 .play:before {
-    content: "▶️";
+  content: "▶️";
 }
 .pause:before {
-    content: "⏸";
+  content: "⏸";
+}
+
+.text-outline {
+  -webkit-text-stroke: 3px black;
 }
