diff --git a/src/main/resources/public/js/lobby.js b/src/main/resources/public/js/lobby.js
index 99df629..a4c44ab 100644
--- a/src/main/resources/public/js/lobby.js
+++ b/src/main/resources/public/js/lobby.js
@@ -12,8 +12,13 @@ document.getElementById("createGame").addEventListener("click", () => {
     window.location.href = `/create-game.html?username=${encodeURIComponent(username)}`;
 });
 
-document.getElementById("joinGame").addEventListener("click", () => {
-    window.location.href = username
-        ? `/join-game.html?username=${encodeURIComponent(username)}`
-        : "/join-game.html";
+//document.getElementById("joinGame").addEventListener("click", () => {
+  //  window.location.href = username
+    //    ? `/join-game.html?username=${encodeURIComponent(username)}`
+      //  : "/join-game.html";
+//});
+// NEU: statt Redirect -> Fokus auf Eingabe
+document.getElementById("joinGame")?.addEventListener("click", () => {
+    const input = document.getElementById("gameId");
+    if (input) { input.focus(); input.select(); }
 });
diff --git a/src/main/resources/public/lobby.html b/src/main/resources/public/lobby.html
index 4aa961e..42dbe38 100644
--- a/src/main/resources/public/lobby.html
+++ b/src/main/resources/public/lobby.html
@@ -52,6 +52,15 @@
         .tile .txt{display:flex; flex-direction:column}
         .tile .txt b{font-size:16px}
         .tile .txt span{font-size:13px; color:var(--muted)}
+
+        /* Join form */
+        .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
+        label{color:var(--muted)}
+        input[type="text"]{
+            background:#0f0f0f; color:var(--text); border:1px solid var(--border);
+            padding:12px 14px; border-radius:12px; outline:none; min-width:180px;
+        }
+        input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)}
     </style>
 </head>
 <body>
@@ -85,22 +94,44 @@
                     <div class="icon" aria-hidden="true">
                         <svg width="22" height="22" viewBox="0 0 24 24" fill="#1db954"><path d="M12 2a6 6 0 0 1 6 6v2h2v12H4V10h2V8a6 6 0 0 1 6-6Zm0 2a4 4 0 0 0-4 4v2h8V8a4 4 0 0 0-4-4Z"/></svg>
                     </div>
-                    <div class="txt"><b>Bestehendem Spiel beitreten</b><span>Du hast schon einen Code? Klicke hier.</span></div>
+                    <div class="txt"><b>Bestehendem Spiel beitreten</b><span>Du hast schon einen Code? Gib ihn unten ein.</span></div>
                 </div>
-                <button id="joinGame" class="btn btn-ghost">Spiel beitreten</button>
+
+                <!-- Direktes Join-Formular in der Lobby -->
+                <form id="joinForm" class="row" style="gap:10px; flex-wrap:nowrap">
+                    <label for="gameId" class="muted" style="min-width:90px">Spiel‑Code</label>
+                    <input id="gameId" name="gameId" placeholder="4‑stellig" inputmode="numeric" maxlength="4" required />
+                    <button type="submit" class="btn btn-primary" style="width:auto">Beitreten</button>
+                    <!-- Dummy-Button für Abwärtskompatibilität mit altem lobby.js -->
+                    <button id="joinGame" type="button" style="display:none">Join (legacy)</button>
+                </form>
+
+                <p class="muted" style="margin-top:8px">Tipp: Code ist vierstellig (z.B. 3759).</p>
             </div>
         </div>
     </section>
 </div>
 
-<!-- UI-Helfer: Username-Anzeige aus URL lesen -->
+<!-- Username-Anzeige oben rechts -->
 <script type="module">
     const p = new URLSearchParams(location.search);
     const u = p.get('username');
-    const $ = (s)=>document.querySelector(s);
-    if (u) { $('#uname').textContent = u; }
+    if (u) document.querySelector('#uname').textContent = u;
 </script>
 
 <script type="module" src="/js/lobby.js"></script>
+<script type="module" src="/js/join-game.js"></script>
+
+<!-- Optional: Klick auf alten Join-Button fokusiert Eingabefeld statt Redirect -->
+<script>
+    const btn = document.getElementById('joinGame');
+    if (btn) {
+        btn.addEventListener('click', (ev) => {
+            ev.preventDefault(); ev.stopImmediatePropagation();
+            const input = document.getElementById('gameId');
+            if (input) { input.focus(); input.select(); }
+        }, true); // capture-Phase, um evtl. ältere Listener zu überstimmen
+    }
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
