src/app/pages/welcome/welcome.component.css

@@ -204,6 +204,93 @@ p {
   color: white;
 }
 
+.join-game-form {
+  grid-column: 1 / -1;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  margin: var(--size-md) 0;
+}
+
+.join-game-form p {
+  margin: 0 0 var(--size-md);
+  font-weight: 600;
+}
+
+.join-game-input-group {
+  display: flex;
+  gap: var(--size-md-gap);
+  flex-wrap: wrap;
+}
+
+.join-game-input {
+  flex: 1;
+  min-width: 150px;
+  padding: var(--size-md-padding);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: white;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.join-game-input:focus {
+  outline: none;
+  border-color: var(--color-secondary-mint);
+  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.2);
+}
+
+.join-game-input:disabled {
+  background: var(--color-bg-card);
+  opacity: 0.6;
+}
+
+.join-game-btn {
+  padding: var(--size-md-padding) var(--size-lg);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+
+.join-game-btn.join {
+  background: var(--color-secondary-mint);
+  color: var(--color-text-primary);
+}
+
+.join-game-btn.join:hover:enabled {
+  background: var(--color-secondary-blue);
+}
+
+.join-game-btn.join:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.join-game-btn.cancel {
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+}
+
+.join-game-btn.cancel:hover:enabled {
+  background: var(--color-border);
+}
+
+.join-game-btn.cancel:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.difficulty-btn.hard:hover:enabled {
+  background: var(--color-danger, #dc3545);
+  color: white;
+}
+
 .difficulty-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;

src/app/pages/welcome/welcome.component.html

@@ -31,12 +31,44 @@
         <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
       </button>
 
-      <button type="button" class="mode mode-disabled" disabled>
-        <span>Future Technique</span>
-        <small>Placeholder</small>
+      <button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
+        <span>Join Game</span>
+        <small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
       </button>
     </div>
 
+    @if (showJoinGameForm) {
+      <div class="join-game-form">
+        <p>Enter the game ID:</p>
+        <div class="join-game-input-group">
+          <input
+            type="text"
+            class="join-game-input"
+            [(ngModel)]="gameIdInput"
+            placeholder="Paste game ID here"
+            [disabled]="joiningGame"
+            (keyup.enter)="joinGame()"
+          />
+          <button
+            type="button"
+            class="join-game-btn join"
+            (click)="joinGame()"
+            [disabled]="joiningGame || !gameIdInput.trim()"
+          >
+            {{ joiningGame ? 'Joining...' : 'Join' }}
+          </button>
+          <button
+            type="button"
+            class="join-game-btn cancel"
+            (click)="clearJoinGameForm()"
+            [disabled]="joiningGame"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    }
+
     @if (errorMessage) {
       <p class="error">{{ errorMessage }}</p>
     }

src/app/pages/welcome/welcome.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs';
 import { getErrorMessage } from '../../core/http/error-message.util';
@@ -8,7 +9,7 @@ import { GameApiService } from '../../services/game-api.service';
 @Component({
   selector: 'app-welcome',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './welcome.component.html',
   styleUrl: './welcome.component.css'
 })
@@ -16,6 +17,9 @@ export class WelcomeComponent {
   creating = false;
   errorMessage = '';
   showDifficultySelector = false;
+  showJoinGameForm = false;
+  gameIdInput = '';
+  joiningGame = false;
 
   constructor(
     private readonly router: Router,
@@ -67,6 +71,41 @@ export class WelcomeComponent {
 
   toggleDifficultySelector(): void {
     this.showDifficultySelector = !this.showDifficultySelector;
+    this.showJoinGameForm = false;
+    this.errorMessage = '';
+  }
+
+  toggleJoinGameForm(): void {
+    this.showJoinGameForm = !this.showJoinGameForm;
+    this.showDifficultySelector = false;
+    this.errorMessage = '';
+    this.gameIdInput = '';
+  }
+
+  joinGame(): void {
+    if (this.joiningGame || !this.gameIdInput.trim()) {
+      return;
+    }
+
+    this.errorMessage = '';
+    this.joiningGame = true;
+
+    this.gameApi
+      .getGame(this.gameIdInput.trim())
+      .pipe(finalize(() => (this.joiningGame = false)))
+      .subscribe({
+        next: (game) => {
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
+        }
+      });
+  }
+
+  clearJoinGameForm(): void {
+    this.showJoinGameForm = false;
+    this.gameIdInput = '';
     this.errorMessage = '';
   }
 }