ci: bump version to v0.2.2

fix: NCWF-1 401 (#6 )
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #6
2026-05-12 22:04:12 +00:00 · 2026-05-13 00:01:26 +02:00 · 2026-05-12 21:13:35 +00:00 · 2026-05-12 23:11:19 +02:00 · 2026-05-12 20:41:26 +00:00 · 2026-05-12 22:38:57 +02:00
63 changed files with 3897 additions and 603 deletions
@@ -0,0 +1,12 @@
+node_modules
+dist
+tmp
+*.log
+.git
+.gitignore
+Dockerfile
+docker-compose*.yml
+^\.env$
+.idea
+vscode
+coverage
@@ -0,0 +1,35 @@
+## 0.0.0 (2026-05-12)
+
+### Features
+
+* added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
+* added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
+* NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
+* NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
+
+### Bug Fixes
+
+* build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
+* cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
+* gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
+* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
+* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
+* removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
+* removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
+* size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
+* structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.1.0...0.0.0) (2026-05-12)
+
+### Features
+
+* NCS-69 Challenge request ([#3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/3)) ([bad7366](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bad7366bdbb048c20218257b30ac22efc9ecb6db))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.0...0.0.0) (2026-05-12)
+
+### Bug Fixes
+
+* NCWF-1 401 ([#5](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/5)) ([f8f93ef](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/f8f93efff48f1d7198023fed45b675c2e225df36))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.1...0.0.0) (2026-05-12)
+
+### Bug Fixes
+
+* NCWF-1 401 ([#6](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/6)) ([6d1e06d](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/6d1e06dfd606b93d029e9c9b84eea6f8b3b6294e))
@@ -0,0 +1,25 @@
+FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
+
+RUN apk add --no-cache gettext
+
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=builder /app/dist/nowchess-frontend/browser /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY public/env.template.js /usr/share/nginx/html/env.template.js
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
+EXPOSE 80
+ENTRYPOINT ["/docker-entrypoint.sh"]
@@ -2,7 +2,8 @@
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
  },
  "newProjectRoot": "projects",
  "projects": {
@@ -46,17 +47,25 @@
              "budgets": [
                {
                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1MB",
+                  "maximumError": "5MB"
                },
                {
                  "type": "anyComponentStyle",
-                  "maximumWarning": "12kB",
-                  "maximumError": "20kB"
+                  "maximumWarning": "1MB",
+                  "maximumError": "5MB"
                }
              ],
              "outputHashing": "all"
            },
+            "staging": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.staging.ts"
+                }
+              ]
+            },
            "development": {
              "fileReplacements": [
                {
@@ -74,12 +83,17 @@
        "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
-            "proxyConfig": "proxy.conf.json"
+            "proxyConfig": "proxy.conf.json",
+            "host": "0.0.0.0",
+            "port": 4200
          },
          "configurations": {
            "production": {
              "buildTarget": "nowchess-frontend:build:production"
            },
+            "staging": {
+              "buildTarget": "nowchess-frontend:build:staging"
+            },
            "development": {
              "buildTarget": "nowchess-frontend:build:development"
            }
@@ -0,0 +1,18 @@
+#!/bin/sh
+set -e
+
+# Replace placeholders in env.template.js with environment variables and write env.js
+TEMPLATE_PATH="/usr/share/nginx/html/env.template.js"
+TARGET_PATH="/usr/share/nginx/html/env.js"
+
+if [ -f "$TEMPLATE_PATH" ]; then
+  echo "Rendering runtime config from $TEMPLATE_PATH"
+  echo "Using environment variables:"
+  printenv
+  echo "----"
+  envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
+else
+  echo "No runtime template found at $TEMPLATE_PATH, skipping"
+fi
+
+exec nginx -g 'daemon off;'
@@ -0,0 +1,22 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /env.js {
+        root /usr/share/nginx/html;
+        default_type application/javascript;
+        expires -1;
+        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
@@ -458,7 +458,6 @@
      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.19.tgz",
      "integrity": "sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -475,7 +474,6 @@
      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.19.tgz",
      "integrity": "sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -489,7 +487,6 @@
      "integrity": "sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/core": "7.28.3",
        "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -522,7 +519,6 @@
      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.19.tgz",
      "integrity": "sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -566,7 +562,6 @@
      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.19.tgz",
      "integrity": "sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -633,7 +628,6 @@
      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@ampproject/remapping": "^2.2.0",
        "@babel/code-frame": "^7.27.1",
@@ -1607,7 +1601,6 @@
      "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@inquirer/checkbox": "^4.2.1",
        "@inquirer/confirm": "^5.1.14",
@@ -3538,7 +3531,6 @@
      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.19.0"
      }
@@ -3895,7 +3887,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.10.12",
        "caniuse-lite": "^1.0.30001782",
@@ -4911,7 +4902,6 @@
      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "accepts": "^2.0.0",
        "body-parser": "^2.2.1",
@@ -5353,7 +5343,6 @@
      "integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=16.9.0"
      }
@@ -5850,8 +5839,7 @@
      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
      "integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/jose": {
      "version": "6.2.2",
@@ -5953,7 +5941,6 @@
      "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@colors/colors": "1.5.0",
        "body-parser": "^1.19.0",
@@ -6421,7 +6408,6 @@
      "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cli-truncate": "^4.0.0",
        "colorette": "^2.0.20",
@@ -7934,7 +7920,6 @@
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
@@ -7970,7 +7955,6 @@
      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.0.2",
@@ -8590,8 +8574,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
    },
    "node_modules/tuf-js": {
      "version": "4.1.0",
@@ -8629,7 +8612,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -8759,7 +8741,6 @@
      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -9557,7 +9538,6 @@
      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -9576,8 +9556,7 @@
      "version": "0.15.1",
      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
      "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    }
  }
 }
@@ -4,7 +4,8 @@
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --configuration production",
+    "build:staging": "ng build --configuration staging",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
@@ -1,4 +1,14 @@
 {
+  "/api/account": {
+    "target": "http://localhost:8083",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/api/challenge": {
+    "target": "http://localhost:8083",
+    "secure": false,
+    "changeOrigin": true
+  },
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
@@ -0,0 +1,4 @@
+window.__RUNTIME_CONFIG__ = {
+  API_URL: "${API_URL}",
+  WEBSOCKET_URL: "${WEBSOCKET_URL}"
+};
@@ -1,14 +1,15 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideRouter } from '@angular/router';

 import { routes } from './app.routes';
+import { authInterceptor } from './services/auth.interceptor';

 export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([authInterceptor])),
    provideRouter(routes)
  ]
 };
@@ -1 +1,2 @@
-<router-outlet />
+<app-toolbar />
+<router-outlet />
@@ -1,9 +1,11 @@
 import { Routes } from '@angular/router';
 import { GameComponent } from './pages/game/game.component';
 import { WelcomeComponent } from './pages/welcome/welcome.component';
+import { ProfileComponent } from './pages/profile/profile.component';

 export const routes: Routes = [
  { path: '', component: WelcomeComponent },
+  { path: 'profile', component: ProfileComponent },
  { path: 'game/:gameId', component: GameComponent },
  { path: '**', redirectTo: '' }
 ];
@@ -1,21 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ToolbarComponent } from './components/toolbar/toolbar.component';
+import { ThemeService } from './services/theme.service';

@Component({
  selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ToolbarComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
 })
 export class App implements OnInit {
-  ngOnInit(): void {
-    this.initTheme();
-  }
+  constructor(private readonly themeService: ThemeService) { }

-  private initTheme(): void {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark') {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    }
+  ngOnInit(): void {
+    this.themeService.initTheme();
  }
 }
@@ -0,0 +1,69 @@
+/* Shared Button Template - All Button Styles Consolidated */
+
+.app-btn {
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  border: none;
+  border-radius: 2px;
+  padding: 0.6rem 1rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  cursor: pointer;
+  box-shadow: var(--btn-glow);
+  transition: transform 0.2s ease, filter 0.2s ease, background 1.6s ease, box-shadow 1.6s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  text-transform: uppercase;
+}
+
+.app-btn:hover:enabled {
+  transform: scale(1.05);
+  filter: brightness(1.15);
+}
+
+.app-btn:active:enabled {
+  transform: scale(0.98);
+}
+
+.app-btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.app-btn.w-100 {
+  width: 100%;
+}
+
+/* Dialog Button Layouts */
+.dialog-actions {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.dialog-actions .app-btn {
+  flex: 1;
+  min-width: 120px;
+}
+
+/* Promotion Dialog Button Variant */
+.promotion-choice {
+  flex-direction: column;
+  height: auto;
+  padding: 16px;
+  gap: 8px;
+}
+
+.promotion-choice .piece-symbol {
+  font-size: 32px;
+  line-height: 1;
+}
+
+.promotion-choice .piece-label {
+  font-size: 11px;
+}
@@ -0,0 +1,261 @@
+@import '../../button-template.css';
+
+.challenge-create-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(3px);
+
+  &.loading {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
+.challenge-create-dialog {
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 2px solid #00d5ff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.3), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 24px;
+  color: #e0e0e0;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+
+  h2 {
+    margin: 0;
+    color: #00d5ff;
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #00d5ff;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    color: #ffffff;
+    transform: scale(1.1);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    color: #b0b0d0;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input,
+  select {
+    background-color: rgba(15, 20, 50, 0.8);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #e0e0e0;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: 'Space Mono', monospace;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #00d5ff;
+      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    option {
+      background-color: #0a0e27;
+      color: #e0e0e0;
+    }
+  }
+
+  small {
+    color: #ff6b6b;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.form-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    color: #b0b0d0;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input {
+    background-color: rgba(15, 20, 50, 0.8);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #e0e0e0;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: 'Space Mono', monospace;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #00d5ff;
+      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.preset-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.preset-btn {
+  padding: 8px 16px;
+  background-color: rgba(0, 213, 255, 0.1);
+  border: 1px solid #00d5ff;
+  border-radius: 4px;
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(0, 213, 255, 0.2);
+    box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.error-message {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  padding: 12px;
+  color: #ff9999;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(0, 213, 255, 0.2);
+
+  button {
+    padding: 10px 24px;
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    &.btn-secondary {
+      background-color: transparent;
+      border: 1px solid rgba(0, 213, 255, 0.3);
+      color: #00d5ff;
+
+      &:hover:not(:disabled) {
+        background-color: rgba(0, 213, 255, 0.1);
+        border-color: #00d5ff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-primary {
+      background-color: #00d5ff;
+      border: none;
+      color: #0a0e27;
+
+      &:hover:not(:disabled) {
+        box-shadow: 0 0 20px rgba(0, 213, 255, 0.6);
+        transform: translateY(-2px);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
@@ -0,0 +1,93 @@
+<div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
+    <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
+        <div class="dialog-header">
+            <h2>Create Challenge</h2>
+            <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
+        </div>
+
+        <form [formGroup]="form" (ngSubmit)="submit()" class="dialog-form">
+            <!-- Error Message -->
+            <div *ngIf="errorMessage" class="error-message">
+                {{ errorMessage }}
+            </div>
+
+            <!-- Target Username -->
+            <div class="form-group">
+                <label for="targetUsername">Opponent Username</label>
+                <input type="text" id="targetUsername" formControlName="targetUsername"
+                    placeholder="Enter opponent's username" [disabled]="loading" required />
+                <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
+                    Username is required
+                </small>
+            </div>
+
+            <!-- Player Color Selection -->
+            <div class="form-group">
+                <label for="color">Play as</label>
+                <select id="color" formControlName="color" [disabled]="loading">
+                    <option value="white">White</option>
+                    <option value="black">Black</option>
+                    <option value="random">Random</option>
+                </select>
+            </div>
+
+            <!-- Time Control Mode Selection -->
+            <div class="form-group">
+                <label for="timeMode">Time Control</label>
+                <select id="timeMode" formControlName="timeMode" [disabled]="loading">
+                    <option value="blitz">Blitz</option>
+                    <option value="rapid">Rapid</option>
+                    <option value="classical">Classical</option>
+                    <option value="unlimited">Unlimited</option>
+                </select>
+            </div>
+
+            <!-- Time Presets -->
+            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+                <label>Presets</label>
+                <div class="preset-buttons">
+                    <button type="button" *ngFor="let preset of getAvailablePresets()" class="preset-btn"
+                        (click)="selectPreset(preset)" [disabled]="loading">
+                        {{ preset.label }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Custom Time Control -->
+            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+                <div class="form-row">
+                    <div class="form-col">
+                        <label for="limitMinutes">Time (minutes)</label>
+                        <input type="number" id="limitMinutes" formControlName="limitMinutes" min="1" max="1000"
+                            [disabled]="loading" />
+                    </div>
+                    <div class="form-col">
+                        <label for="incrementSeconds">Increment (seconds)</label>
+                        <input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300"
+                            [disabled]="loading" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- TTL (Time to Live) -->
+            <div class="form-group">
+                <label for="ttlSeconds">Challenge Expires In</label>
+                <select id="ttlSeconds" formControlName="ttlSeconds" [disabled]="loading">
+                    <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
+                        {{ ttl.label }}
+                    </option>
+                </select>
+            </div>
+
+            <!-- Buttons -->
+            <div class="dialog-buttons">
+                <button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
+                    Cancel
+                </button>
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
+                    {{ loading ? 'Sending...' : 'Send Challenge' }}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
@@ -0,0 +1,159 @@
+import { Component, inject, OnInit, OnDestroy, DestroyRef, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { finalize } from 'rxjs';
+import { ChallengeService } from '../../services/challenge.service';
+import { Router } from '@angular/router';
+import { getErrorMessage } from '../../core/http/error-message.util';
+import { PlayerColor } from '../../models/challenge.models';
+
+type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited';
+
+interface TimePreset {
+    label: string;
+    limitSeconds: number;
+    incrementSeconds: number;
+}
+
+@Component({
+    selector: 'app-challenge-create-dialog',
+    standalone: true,
+    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+    templateUrl: './challenge-create-dialog.component.html',
+    styleUrls: ['./challenge-create-dialog.component.css']
+})
+export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
+    private readonly challengeService = inject(ChallengeService);
+    private readonly router = inject(Router);
+    private readonly fb = inject(FormBuilder);
+    private readonly destroyRef = inject(DestroyRef);
+
+    @Output() closeChallengeDialog = new EventEmitter<void>();
+
+    form!: FormGroup;
+    loading = false;
+    errorMessage = '';
+    selectedTimeMode: TimeMode = 'rapid';
+
+    timePresets: Record<TimeMode, TimePreset[]> = {
+        blitz: [
+            { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
+            { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
+            { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
+            { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
+            { label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
+        ],
+        rapid: [
+            { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
+            { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
+            { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
+            { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
+        ],
+        classical: [
+            { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
+            { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
+            { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
+            { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
+        ],
+        unlimited: []
+    };
+
+    ttlOptions = [
+        { label: '5 minutes', seconds: 300 },
+        { label: '1 hour', seconds: 3600 },
+        { label: '1 day', seconds: 86400 },
+        { label: 'No expiry', seconds: 0 }
+    ];
+
+    ngOnInit(): void {
+        this.initializeForm();
+    }
+
+    ngOnDestroy(): void {
+    }
+
+    private initializeForm(): void {
+        this.form = this.fb.group({
+            targetUsername: ['', [Validators.required, Validators.minLength(1)]],
+            color: ['random', Validators.required],
+            timeMode: ['rapid'],
+            limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
+            incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
+            ttlSeconds: [3600, Validators.required]
+        });
+
+        this.form.get('timeMode')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((mode: unknown) => {
+                const timeMode = mode as TimeMode;
+                this.selectedTimeMode = timeMode;
+                if (timeMode !== 'unlimited') {
+                    const firstPreset = this.timePresets[timeMode][0];
+                    if (firstPreset) {
+                        this.form.patchValue({
+                            limitMinutes: firstPreset.limitSeconds / 60,
+                            incrementSeconds: firstPreset.incrementSeconds
+                        });
+                    }
+                }
+            });
+    }
+
+    selectPreset(preset: TimePreset): void {
+        this.form.patchValue({
+            limitMinutes: preset.limitSeconds / 60,
+            incrementSeconds: preset.incrementSeconds
+        });
+    }
+
+    getAvailablePresets(): TimePreset[] {
+        return this.timePresets[this.selectedTimeMode] || [];
+    }
+
+    submit(): void {
+        if (this.form.invalid || this.loading) {
+            return;
+        }
+
+        const targetUsername = this.form.get('targetUsername')?.value?.trim();
+        if (!targetUsername) {
+            this.errorMessage = 'Please enter a valid username';
+            return;
+        }
+
+        this.errorMessage = '';
+        this.loading = true;
+
+        const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60);
+        const incrementSeconds = this.form.get('incrementSeconds')?.value || 0;
+        const ttlSeconds = this.form.get('ttlSeconds')?.value;
+        const color = (this.form.get('color')?.value || 'random') as PlayerColor;
+
+        this.challengeService.sendChallenge(targetUsername, {
+            timeControl: {
+                limitSeconds,
+                incrementSeconds
+            },
+            color,
+            ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined
+        })
+            .pipe(finalize(() => (this.loading = false)))
+            .subscribe({
+                next: (challenge) => {
+                    // Challenge sent successfully - navigate to challenges page to view status
+                    this.form.reset();
+                    this.closeChallengeDialog.emit();
+                    void this.router.navigate(['/challenges']);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to send challenge. Please try again.');
+                }
+            });
+    }
+
+    cancel(): void {
+        this.form.reset();
+        this.closeChallengeDialog.emit();
+    }
+}
@@ -0,0 +1,194 @@
+@import '../../button-template.css';
+
+.challenge-notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  max-width: 400px;
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 2px solid #00d5ff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  padding: 16px;
+  color: #e0e0e0;
+  z-index: 2000;
+  animation: slideInRight 0.3s ease-out;
+
+  &.error {
+    border-color: #ff6b6b;
+    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), inset 0 0 10px rgba(255, 107, 107, 0.05);
+  }
+
+  @media (max-width: 768px) {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(450px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+}
+
+.notification-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+
+  .badge {
+    background-color: rgba(0, 213, 255, 0.2);
+    border: 1px solid #00d5ff;
+    border-radius: 3px;
+    padding: 4px 8px;
+    font-size: 10px;
+    font-weight: 700;
+    color: #00d5ff;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #d4f4ff;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #00d5ff;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    color: #ffffff;
+    transform: scale(1.15);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.notification-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.time-control {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+
+  .label {
+    color: #b0b0d0;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .value {
+    background-color: rgba(0, 213, 255, 0.1);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 3px;
+    padding: 4px 12px;
+    color: #00d5ff;
+    font-family: 'Space Mono', monospace;
+    font-weight: 600;
+  }
+}
+
+.expiration {
+  font-size: 12px;
+  color: #b0b0d0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.error-message {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 3px;
+  padding: 8px 10px;
+  color: #ff9999;
+  font-size: 12px;
+}
+
+.notification-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+
+  button {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border: none;
+
+    &.btn-decline {
+      background-color: transparent;
+      border: 1px solid rgba(0, 213, 255, 0.3);
+      color: #00d5ff;
+
+      &:hover:not(:disabled) {
+        background-color: rgba(0, 213, 255, 0.1);
+        border-color: #00d5ff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-accept {
+      background-color: #00d5ff;
+      color: #0a0e27;
+
+      &:hover:not(:disabled) {
+        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
+        transform: translateY(-1px);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
@@ -0,0 +1,38 @@
+<div class="challenge-notification" [class.error]="!!errorMessage">
+    <div class="notification-header">
+        <div class="notification-title">
+            <span class="badge">CHALLENGE</span>
+            <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
+        </div>
+        <button type="button" class="close-btn" (click)="onClose()"
+            [disabled]="acceptingChallenge || decliningChallenge">
+            ×
+        </button>
+    </div>
+
+    <div class="notification-content">
+        <div class="time-control">
+            <span class="label">Time Control:</span>
+            <span class="value">{{ getTimeControlDisplay() }}</span>
+        </div>
+
+        <div class="expiration">
+            <span class="label">{{ getExpirationInfo() }}</span>
+        </div>
+
+        <div *ngIf="errorMessage" class="error-message">
+            {{ errorMessage }}
+        </div>
+
+        <div class="notification-actions">
+            <button type="button" class="btn btn-decline" (click)="onDecline()"
+                [disabled]="acceptingChallenge || decliningChallenge">
+                {{ decliningChallenge ? 'Declining...' : 'Decline' }}
+            </button>
+            <button type="button" class="btn btn-accept" (click)="onAccept()"
+                [disabled]="acceptingChallenge || decliningChallenge">
+                {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
+            </button>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,101 @@
+import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Challenge } from '../../models/challenge.models';
+import { ChallengeService } from '../../services/challenge.service';
+import { finalize } from 'rxjs';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+@Component({
+    selector: 'app-challenge-notification',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './challenge-notification.component.html',
+    styleUrls: ['./challenge-notification.component.css']
+})
+export class ChallengeNotificationComponent {
+    @Input() challenge!: Challenge;
+    @Output() accept = new EventEmitter<Challenge>();
+    @Output() decline = new EventEmitter<Challenge>();
+    @Output() close = new EventEmitter<void>();
+
+    private readonly challengeService = inject(ChallengeService);
+
+    acceptingChallenge = false;
+    decliningChallenge = false;
+    errorMessage = '';
+
+    onAccept(): void {
+        if (this.acceptingChallenge || this.decliningChallenge) {
+            return;
+        }
+
+        this.acceptingChallenge = true;
+        this.errorMessage = '';
+
+        this.challengeService.acceptChallenge(this.challenge.id)
+            .pipe(finalize(() => (this.acceptingChallenge = false)))
+            .subscribe({
+                next: () => {
+                    this.accept.emit(this.challenge);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+                }
+            });
+    }
+
+    onDecline(): void {
+        if (this.acceptingChallenge || this.decliningChallenge) {
+            return;
+        }
+
+        this.decliningChallenge = true;
+        this.errorMessage = '';
+
+        this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
+            .pipe(finalize(() => (this.decliningChallenge = false)))
+            .subscribe({
+                next: () => {
+                    this.decline.emit(this.challenge);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+                }
+            });
+    }
+
+    onClose(): void {
+        this.close.emit();
+    }
+
+    getTimeControlDisplay(): string {
+        const { limit, increment } = this.challenge.timeControl;
+        if (!limit || !increment) {
+            return 'Unlimited';
+        }
+        const minutes = Math.floor(limit / 60);
+        return `${minutes}+${increment}`;
+    }
+
+    getCreatedByDisplay(): string {
+        return this.challenge.challenger.name;
+    }
+
+    getExpirationInfo(): string {
+        const expiresAt = new Date(this.challenge.expiresAt);
+        const now = new Date();
+        const diffMs = expiresAt.getTime() - now.getTime();
+
+        if (diffMs <= 0) {
+            return 'Expired';
+        }
+
+        const minutes = Math.floor(diffMs / 60000);
+        if (minutes > 60) {
+            const hours = Math.floor(minutes / 60);
+            return `Expires in ${hours}h`;
+        }
+
+        return `Expires in ${minutes}m`;
+    }
+}
@@ -1,3 +1,5 @@
+@import '../../button-template.css';
+
 .input-card {
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
@@ -40,22 +42,6 @@

 }

-.input-card .btn {
-  border: var(--button-border);
-  border-radius: var(--border-radius-sm);
-  background: var(--color-bg-button);
-  color: var(--color-text-primary);
-  padding: var(--button-padding);
-  cursor: pointer;
-  font-weight: 600;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.input-card .btn:hover {
-  background: var(--color-bg-button-hover);
-  color: var(--color-text-button-hover);
-}
-
 .hint-text {
  margin: 0;
  color: var(--color-text-primary);
@@ -2,30 +2,18 @@
  <label>{{ label }}</label>

  @if (inputType === 'textarea') {
-    <textarea
-      #textareaInput
-      [placeholder]="placeholder"
-      [value]="value"
-      [rows]="rows"
-      (input)="onValueChange(textareaInput.value)"
-      class="form-input"
-    ></textarea>
+  <textarea #textareaInput [placeholder]="placeholder" [value]="value" [rows]="rows"
+    (input)="onValueChange(textareaInput.value)" class="form-input"></textarea>
  } @else {
-    <input
-      #textInput
-      type="text"
-      [placeholder]="placeholder"
-      [value]="value"
-      (input)="onValueChange(textInput.value)"
-      class="form-input"
-    />
+  <input #textInput type="text" [placeholder]="placeholder" [value]="value" (input)="onValueChange(textInput.value)"
+    class="form-input" />
  }

-  <button type="button" class="btn w-100" (click)="onButtonClick()">
+  <button type="button" class="app-btn w-100" (click)="onButtonClick()">
    {{ buttonLabel }}
  </button>

  @if (hintText) {
-    <p class="hint-text">{{ hintText }}</p>
+  <p class="hint-text">{{ hintText }}</p>
  }
-</section>
+</section>
@@ -0,0 +1,68 @@
+@import '../../button-template.css';
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(2, 2, 10, 0.58);
+  display: grid;
+  place-items: center;
+  z-index: 350;
+  padding: 1rem;
+}
+
+.dialog-card {
+  width: min(460px, 100%);
+  background: var(--dlg-bg);
+  border: 1.5px solid var(--dlg-border);
+  box-shadow: var(--bb-glow);
+  border-radius: 4px;
+  padding: 1rem;
+  display: grid;
+  gap: 0.7rem;
+}
+
+.dialog-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 22px;
+  letter-spacing: 2px;
+  color: var(--bb-title);
+  text-align: center;
+}
+
+.dialog-input {
+  width: 100%;
+  background: rgba(4, 4, 20, 0.62);
+  border: 1px solid var(--bb-border);
+  color: var(--bb-title);
+  border-radius: 2px;
+  padding: 0.6rem 0.7rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 13px;
+}
+
+.dialog-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
+}
+
+.dialog-textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.text-danger {
+  color: #dc3545;
+  font-size: 0.875rem;
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
@@ -0,0 +1,36 @@
+<div class="dialog-overlay" (click)="closeDialog()">
+  <div class="dialog-card" (click)="$event.stopPropagation()">
+    <div class="dialog-title">LOGIN</div>
+
+    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+      <label for="username" class="sr-only">Username</label>
+      <input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
+        [disabled]="isLoading" />
+      @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
+      <small class="text-danger">Username must be at least 3 characters</small>
+      }
+
+      <label for="password" class="sr-only">Password</label>
+      <input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
+        [disabled]="isLoading" />
+      @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+      <small class="text-danger">Password must be at least 6 characters</small>
+      }
+
+      @if (errorMessage) {
+      <div class="error-banner">{{ errorMessage }}</div>
+      }
+
+      <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="openRegister()">Create account</button>
+        <button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
+        <button type="submit" class="app-btn" [disabled]="isLoading || loginForm.invalid">
+          @if (isLoading) {
+          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+          }
+          Login
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
@@ -0,0 +1,62 @@
+import { Component, EventEmitter, Output, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AuthService } from '../../services/auth.service';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+
+@Component({
+  selector: 'app-login-dialog',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './login-dialog.component.html',
+  styleUrl: './login-dialog.component.css'
+})
+export class LoginDialogComponent {
+  @Output() onClose = new EventEmitter<void>();
+  @Output() onSuccess = new EventEmitter<void>();
+
+  private readonly authService = inject(AuthService);
+  private readonly authDialogService = inject(AuthDialogService);
+  private readonly formBuilder = inject(FormBuilder);
+
+  loginForm: FormGroup;
+  errorMessage: string | null = null;
+  isLoading = false;
+
+  constructor() {
+    this.loginForm = this.formBuilder.group({
+      username: ['', [Validators.required, Validators.minLength(3)]],
+      password: ['', [Validators.required, Validators.minLength(6)]]
+    });
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.invalid) {
+      this.errorMessage = 'Please fill in all fields correctly';
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = null;
+
+    const { username, password } = this.loginForm.value;
+    this.authService.login(username, password).subscribe({
+      next: () => {
+        this.isLoading = false;
+        this.onSuccess.emit();
+      },
+      error: (err) => {
+        this.isLoading = false;
+        this.errorMessage = err.error?.message || 'Login failed. Please try again.';
+      }
+    });
+  }
+
+  closeDialog(): void {
+    this.onClose.emit();
+  }
+
+  openRegister(): void {
+    this.authDialogService.openRegister();
+  }
+}
@@ -1,3 +1,5 @@
+@import '../../button-template.css';
+
 .promotion-dialog-overlay {
  position: fixed;
  top: 0;
@@ -20,9 +22,10 @@
 }

 .promotion-dialog {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  background: var(--dlg-bg, white);
+  border: 1.5px solid var(--dlg-border, #ddd);
+  border-radius: 4px;
+  box-shadow: var(--bb-glow, 0 4px 16px rgba(0, 0, 0, 0.2));
  max-width: 400px;
  width: 90%;
  animation: slideUp 0.3s ease;
@@ -44,32 +47,14 @@
  justify-content: space-between;
  align-items: center;
  padding: 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--bb-border, #e0e0e0);

  h3 {
    margin: 0;
+    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    font-weight: 600;
-    color: #333;
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-    color: #999;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: color 0.2s;
-
-    &:hover {
-      color: #333;
-    }
+    color: var(--bb-title, #333);
  }
 }

@@ -80,7 +65,8 @@
 .promotion-prompt {
  margin: 0 0 20px 0;
  text-align: center;
-  color: #666;
+  color: var(--bb-title);
+  opacity: 0.8;
  font-size: 14px;
 }

@@ -89,43 +75,3 @@
  grid-template-columns: 1fr 1fr;
  gap: 12px;
 }
-
-.promotion-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 16px;
-  background: #f5f5f5;
-  border: 2px solid #ddd;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-family: inherit;
-
-  &:hover {
-    background: #e8e8e8;
-    border-color: #999;
-    transform: translateY(-2px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  &:active {
-    transform: translateY(0);
-    box-shadow: none;
-  }
-
-  .piece-symbol {
-    font-size: 32px;
-    line-height: 1;
-  }
-
-  .piece-label {
-    font-size: 12px;
-    font-weight: 500;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-}
@@ -2,25 +2,22 @@
  <div class="promotion-dialog">
    <div class="promotion-header">
      <h3>Pawn Promotion</h3>
-      <button class="close-btn" (click)="close()" aria-label="Close">&times;</button>
+      <button class="app-btn" (click)="close()" aria-label="Close"
+        style="padding:0.2rem 0.5rem;min-width:unset;">&times;</button>
    </div>
-    
+
    <div class="promotion-body">
      <p class="promotion-prompt">Choose a piece to promote your pawn to:</p>
-      
+
      <div class="promotion-options">
        @for (piece of promotionPieces; track piece.type) {
-          <button
-            class="promotion-button"
-            [attr.data-piece]="piece.type"
-            (click)="selectPromotion(piece.type)"
-            [title]="piece.label"
-          >
-            <span class="piece-symbol">{{ piece.symbol }}</span>
-            <span class="piece-label">{{ piece.label }}</span>
-          </button>
+        <button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
+          (click)="selectPromotion(piece.type)" [title]="piece.label">
+          <span class="piece-symbol">{{ piece.symbol }}</span>
+          <span class="piece-label">{{ piece.label }}</span>
+        </button>
        }
      </div>
    </div>
  </div>
-</div>
+</div>
@@ -0,0 +1,68 @@
+@import '../../button-template.css';
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(2, 2, 10, 0.58);
+  display: grid;
+  place-items: center;
+  z-index: 350;
+  padding: 1rem;
+}
+
+.dialog-card {
+  width: min(460px, 100%);
+  background: var(--dlg-bg);
+  border: 1.5px solid var(--dlg-border);
+  box-shadow: var(--bb-glow);
+  border-radius: 4px;
+  padding: 1rem;
+  display: grid;
+  gap: 0.7rem;
+}
+
+.dialog-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 22px;
+  letter-spacing: 2px;
+  color: var(--bb-title);
+  text-align: center;
+}
+
+.dialog-input {
+  width: 100%;
+  background: rgba(4, 4, 20, 0.62);
+  border: 1px solid var(--bb-border);
+  color: var(--bb-title);
+  border-radius: 2px;
+  padding: 0.6rem 0.7rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 13px;
+}
+
+.dialog-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
+}
+
+.dialog-textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.text-danger {
+  color: #dc3545;
+  font-size: 0.875rem;
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
@@ -0,0 +1,43 @@
+<div class="dialog-overlay" (click)="closeDialog()">
+  <div class="dialog-card" (click)="$event.stopPropagation()">
+    <div class="dialog-title">CREATE ACCOUNT</div>
+
+    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+      <input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
+        [disabled]="isLoading" />
+      @if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
+      <small class="text-danger">Username must be at least 3 characters</small>
+      }
+
+      <input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email"
+        [disabled]="isLoading" />
+      @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
+      <small class="text-danger">Please enter a valid email</small>
+      }
+
+      <input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
+        [disabled]="isLoading" />
+      @if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
+      <small class="text-danger">Password must be at least 6 characters</small>
+      }
+
+      <input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
+        placeholder="Confirm Password" [disabled]="isLoading" />
+
+      @if (errorMessage) {
+      <div class="error-banner">{{ errorMessage }}</div>
+      }
+
+      <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="openLogin()">Already have an account?</button>
+        <button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
+        <button type="submit" class="app-btn" [disabled]="isLoading || registerForm.invalid">
+          @if (isLoading) {
+          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+          }
+          Register
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Output, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AuthService } from '../../services/auth.service';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+
+@Component({
+  selector: 'app-register-dialog',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './register-dialog.component.html',
+  styleUrl: './register-dialog.component.css'
+})
+export class RegisterDialogComponent {
+  @Output() onClose = new EventEmitter<void>();
+  @Output() onSuccess = new EventEmitter<void>();
+
+  private readonly authService = inject(AuthService);
+  private readonly authDialogService = inject(AuthDialogService);
+  private readonly formBuilder = inject(FormBuilder);
+
+  registerForm: FormGroup;
+  errorMessage: string | null = null;
+  isLoading = false;
+
+  constructor() {
+    this.registerForm = this.formBuilder.group({
+      username: ['', [Validators.required, Validators.minLength(3)]],
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: ['', [Validators.required]]
+    });
+  }
+
+  onSubmit(): void {
+    if (this.registerForm.invalid) {
+      this.errorMessage = 'Please fill in all fields correctly';
+      return;
+    }
+
+    const { password, confirmPassword } = this.registerForm.value;
+    if (password !== confirmPassword) {
+      this.errorMessage = 'Passwords do not match';
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = null;
+
+    const { username, email, password: pwd } = this.registerForm.value;
+    this.authService.register(username, pwd, email).subscribe({
+      next: () => {
+        this.isLoading = false;
+        this.onSuccess.emit();
+      },
+      error: (err) => {
+        this.isLoading = false;
+        this.errorMessage =
+          err.error?.message || 'Registration failed. Please try again.';
+      }
+    });
+  }
+
+  closeDialog(): void {
+    this.onClose.emit();
+  }
+
+  openLogin(): void {
+    this.authDialogService.openLogin();
+  }
+}
@@ -0,0 +1,84 @@
+@import '../../button-template.css';
+
+.navbar {
+  background: rgba(8, 6, 28, 0.85);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
+  border-bottom: 1px solid rgba(0, 210, 255, 0.2);
+  border-radius: 0;
+  padding: 0.75rem 1rem;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--bb-title) !important;
+  font-family: 'Bebas Neue', sans-serif;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.user-section {
+  align-items: center;
+}
+
+.me-btn {
+  background: rgba(0, 210, 255, 0.1);
+  color: var(--bb-title);
+  border: 1px solid var(--bb-border);
+  border-radius: 2px;
+  padding: 0.5rem 0.8rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  text-transform: uppercase;
+}
+
+.me-btn:hover {
+  background: rgba(0, 210, 255, 0.2);
+  border-color: var(--bb-tag);
+  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
+  transform: scale(1.05);
+}
+
+.me-btn:active {
+  transform: scale(0.98);
+}
+
+/* Sunset Mode */
+.sunset .navbar {
+  background: rgba(20, 5, 45, 0.85);
+  border-bottom-color: rgba(255, 64, 207, 0.2);
+  box-shadow: 0 4px 20px rgba(242, 106, 226, 0.15);
+}
+
+.sunset .me-btn {
+  background: rgba(242, 106, 226, 0.1);
+  border-color: var(--bb-border);
+}
+
+.sunset .me-btn:hover {
+  background: rgba(242, 106, 226, 0.2);
+  border-color: var(--bb-tag);
+  box-shadow: 0 0 10px rgba(242, 106, 226, 0.4);
+}
+
+.container-fluid {
+  display: flex;
+  align-items: center;
+}
+
+.ms-auto {
+  margin-left: auto;
+}
@@ -0,0 +1,35 @@
+<nav class="navbar">
+  <div class="container-fluid">
+    <span class="navbar-brand">NowChess</span>
+    <div class="ms-auto">
+      <div class="d-flex align-items-center gap-2">
+        <button type="button" class="app-btn" (click)="toggleTheme()">
+          {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
+        </button>
+        @if (currentUser; as user) {
+        <div class="d-flex align-items-center gap-2 user-section">
+          <button type="button" class="me-btn" (click)="goToProfile()">
+            👤 {{ user.username }}
+          </button>
+          <button type="button" class="app-btn" (click)="logout()">Logout</button>
+        </div>
+        } @else {
+        <button type="button" class="app-btn" (click)="openLoginDialog()">
+          Login
+        </button>
+        <button type="button" class="app-btn" (click)="openRegisterDialog()">
+          Register
+        </button>
+        }
+      </div>
+    </div>
+  </div>
+</nav>
+
+@if (showLoginDialog) {
+<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
+}
+
+@if (showRegisterDialog) {
+<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
+}
@@ -0,0 +1,87 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AuthService } from '../../services/auth.service';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+import { CurrentUser } from '../../models/auth.models';
+import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
+import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-toolbar',
+  standalone: true,
+  imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
+  templateUrl: './toolbar.component.html',
+  styleUrl: './toolbar.component.css'
+})
+export class ToolbarComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly authService = inject(AuthService);
+  private readonly authDialogService = inject(AuthDialogService);
+  private readonly themeService = inject(ThemeService);
+  private readonly router = inject(Router);
+
+  currentUser: CurrentUser | null = null;
+  showLoginDialog = false;
+  showRegisterDialog = false;
+  isDarkMode = false;
+
+  ngOnInit(): void {
+    this.authService.currentUser$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((user) => {
+        this.currentUser = user;
+      });
+
+    this.authDialogService.dialogState$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((state) => {
+        this.showLoginDialog = state === 'login';
+        this.showRegisterDialog = state === 'register';
+      });
+
+    this.themeService.darkMode$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((isDarkMode) => {
+        this.isDarkMode = isDarkMode;
+      });
+  }
+
+  openLoginDialog(): void {
+    this.authDialogService.openLogin();
+  }
+
+  closeLoginDialog(): void {
+    this.authDialogService.close();
+  }
+
+  openRegisterDialog(): void {
+    this.authDialogService.openRegister();
+  }
+
+  closeRegisterDialog(): void {
+    this.authDialogService.close();
+  }
+
+  logout(): void {
+    this.authService.logout();
+  }
+
+  toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
+
+  goToProfile(): void {
+    this.router.navigate(['/profile']);
+  }
+
+  onLoginSuccess(): void {
+    this.closeLoginDialog();
+  }
+
+  onRegisterSuccess(): void {
+    this.closeRegisterDialog();
+  }
+}
@@ -0,0 +1,11 @@
+/**
+ * Load runtime configuration from window.__RUNTIME_CONFIG__
+ * This is injected by docker-entrypoint.sh at container startup
+ */
+export function loadRuntimeConfig() {
+  const config = (window as any).__RUNTIME_CONFIG__ || {};
+  return {
+    apiUrl: config.API_URL || '',
+    wsUrl: config.WEBSOCKET_URL || 'ws://localhost:8080'
+  };
+}
@@ -0,0 +1,28 @@
+export interface LoginRequest {
+  username: string;
+  password: string;
+}
+
+export interface RegisterRequest {
+  username: string;
+  password: string;
+  email?: string;
+}
+
+export interface RegisterResponse {
+  id: string;
+  username: string;
+  rating: number;
+  createdAt: string;
+}
+
+export interface LoginResponse {
+  token: string;
+}
+
+export interface CurrentUser {
+  id: string;
+  username: string;
+  rating: number;
+  createdAt: string;
+}
@@ -0,0 +1,49 @@
+export type ChallengeStatus = 'created' | 'pending' | 'accepted' | 'declined' | 'cancelled' | 'expired';
+
+export type PlayerColor = 'white' | 'black' | 'random';
+
+export interface Player {
+    id: string;
+    name: string;
+    rating: number;
+}
+
+export interface TimeControl {
+    type: string | null;
+    limit: number | null;
+    increment: number | null;
+}
+
+export interface Challenge {
+    id: string;
+    challenger: Player;
+    destUser: Player;
+    variant: string;
+    color: PlayerColor;
+    timeControl: TimeControl;
+    status: ChallengeStatus;
+    declineReason: string | null;
+    gameId: string | null;
+    expiresAt: string;
+    createdAt: string;
+}
+
+export interface SendChallengeRequest {
+    timeControl: {
+        limitSeconds: number;
+        incrementSeconds: number;
+    };
+    color?: PlayerColor;
+    ttlSeconds?: number;
+}
+
+export interface ListChallengesResponse {
+    'in'?: Challenge[];
+    'out'?: Challenge[];
+    incoming?: Challenge[];
+    outgoing?: Challenge[];
+}
+
+export interface DeclineChallengeRequest {
+    reason?: string;
+}
@@ -0,0 +1,222 @@
+@import '../../button-template.css';
+
+.challenges-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #04000f 0%, #0e0235 25%, #2d0860 50%, #0e0235 75%, #04000f 100%);
+  color: #e0e0e0;
+  padding: 20px;
+  font-family: 'Space Mono', 'Courier New', monospace;
+}
+
+.challenges-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid rgba(0, 213, 255, 0.3);
+
+  h1 {
+    margin: 0;
+    color: #00d5ff;
+    font-size: 32px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+}
+
+.back-btn {
+  background: transparent;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  color: #00d5ff;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 213, 255, 0.1);
+    border-color: #00d5ff;
+  }
+}
+
+.error-banner {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  padding: 15px;
+  color: #ff9999;
+  margin-bottom: 20px;
+}
+
+.challenges-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.challenges-section {
+  h2 {
+    color: #00d5ff;
+    font-size: 20px;
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+}
+
+.loading-spinner {
+  text-align: center;
+  padding: 40px;
+  color: #00d5ff;
+  font-size: 16px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px;
+  color: #b0b0d0;
+  font-size: 14px;
+  background-color: rgba(0, 213, 255, 0.05);
+  border: 1px dashed rgba(0, 213, 255, 0.2);
+  border-radius: 4px;
+}
+
+.challenge-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.challenge-card {
+  background: linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(26, 26, 62, 0.8) 100%);
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: rgba(0, 213, 255, 0.6);
+    box-shadow: 0 0 15px rgba(0, 213, 255, 0.2);
+  }
+}
+
+.challenge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.1);
+
+  .challenger-name {
+    color: #d4f4ff;
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  .time-control {
+    background-color: rgba(0, 213, 255, 0.15);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    color: #00d5ff;
+    padding: 4px 12px;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 12px;
+  }
+}
+
+.challenge-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+
+  .detail {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+
+    .label {
+      color: #b0b0d0;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .value {
+      color: #00d5ff;
+      font-weight: 600;
+
+      &.status-pending {
+        color: #ffcc30;
+      }
+
+      &.status-accepted {
+        color: #4ade80;
+      }
+
+      &.status-declined {
+        color: #ff6b6b;
+      }
+
+      &.status-expired {
+        color: #b0b0d0;
+      }
+    }
+  }
+}
+
+.challenge-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+
+  .btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    background-color: transparent;
+    color: #00d5ff;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 213, 255, 0.1);
+      border-color: #00d5ff;
+    }
+
+    &.btn-accept {
+      background-color: #00d5ff;
+      color: #04000f;
+      border: none;
+
+      &:hover {
+        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
+      }
+    }
+
+    &.btn-decline,
+    &.btn-cancel {
+      color: #ff6b6b;
+      border-color: rgba(255, 107, 107, 0.3);
+
+      &:hover {
+        background-color: rgba(255, 107, 107, 0.1);
+        border-color: #ff6b6b;
+      }
+    }
+  }
+}
@@ -0,0 +1,102 @@
+<div class="challenges-container">
+    <div class="challenges-header">
+        <h1>Active Challenges</h1>
+        <button type="button" class="back-btn" (click)="goBack()">← Back</button>
+    </div>
+
+    <div *ngIf="errorMessage" class="error-banner">
+        {{ errorMessage }}
+    </div>
+
+    <div class="challenges-grid">
+        <!-- Incoming Challenges -->
+        <div class="challenges-section">
+            <h2>Incoming Challenges</h2>
+            <div *ngIf="loading" class="loading-spinner">Loading...</div>
+
+            <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
+                <p>No incoming challenges</p>
+            </div>
+
+            <div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
+                <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
+                    <div class="challenge-header">
+                        <span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
+                        <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+                    </div>
+
+                    <div class="challenge-details">
+                        <div class="detail">
+                            <span class="label">Status:</span>
+                            <span class="value" [class]="'status-' + challenge.status">
+                                {{ challenge.status | uppercase }}
+                            </span>
+                        </div>
+                        <div class="detail">
+                            <span class="label">Expires in:</span>
+                            <span class="value">{{ getExpirationInfo(challenge) }}</span>
+                        </div>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+                        <button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
+                            Decline
+                        </button>
+                        <button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
+                            Accept
+                        </button>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
+                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
+                            Play
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Outgoing Challenges -->
+        <div class="challenges-section">
+            <h2>Outgoing Challenges</h2>
+
+            <div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state">
+                <p>No outgoing challenges</p>
+            </div>
+
+            <div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list">
+                <div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
+                    <div class="challenge-header">
+                        <span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span>
+                        <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+                    </div>
+
+                    <div class="challenge-details">
+                        <div class="detail">
+                            <span class="label">Status:</span>
+                            <span class="value" [class]="'status-' + challenge.status">
+                                {{ challenge.status | uppercase }}
+                            </span>
+                        </div>
+                        <div class="detail">
+                            <span class="label">Expires in:</span>
+                            <span class="value">{{ getExpirationInfo(challenge) }}</span>
+                        </div>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+                        <button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
+                            Cancel
+                        </button>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
+                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
+                            Play
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,179 @@
+import { Component, inject, OnInit, OnDestroy, DestroyRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChallengeService } from '../../services/challenge.service';
+import { ChallengeEventService } from '../../services/challenge-event.service';
+import { Challenge } from '../../models/challenge.models';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+@Component({
+    selector: 'app-challenges',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './challenges.component.html',
+    styleUrls: ['./challenges.component.css']
+})
+export class ChallengesComponent implements OnInit, OnDestroy {
+    private readonly challengeService = inject(ChallengeService);
+    private readonly challengeEventService = inject(ChallengeEventService);
+    private readonly router = inject(Router);
+    private readonly destroyRef = inject(DestroyRef);
+
+    incomingChallenges: Challenge[] = [];
+    outgoingChallenges: Challenge[] = [];
+    loading = false;
+    errorMessage = '';
+
+    private pollInterval: any = null;
+    private readonly pollIntervalMs = 5000; // Poll every 5 seconds
+
+    ngOnInit(): void {
+        this.loadChallenges(true);
+
+        // Subscribe to challenge events
+        this.challengeEventService.getChallengeReceived$()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                this.loadChallenges();
+            });
+
+        // Start polling for challenge updates
+        this.startPolling();
+    }
+
+    ngOnDestroy(): void {
+        this.stopPolling();
+    }
+
+    private startPolling(): void {
+        this.pollInterval = setInterval(() => {
+            this.loadChallenges(false);
+        }, this.pollIntervalMs);
+    }
+
+    private stopPolling(): void {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+            this.pollInterval = null;
+        }
+    }
+
+    loadChallenges(showLoader = false): void {
+        if (showLoader) {
+            this.loading = true;
+            this.errorMessage = '';
+        }
+
+        this.challengeService.listChallenges()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: (response) => {
+                    this.incomingChallenges = response.in || response.incoming || [];
+                    this.outgoingChallenges = response.out || response.outgoing || [];
+                    if (showLoader) {
+                        this.loading = false;
+                    }
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to load challenges');
+                    if (showLoader) {
+                        this.loading = false;
+                    }
+                }
+            });
+    }
+
+    acceptChallenge(challenge: Challenge): void {
+        this.challengeService.acceptChallenge(challenge.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: (acceptedChallenge) => {
+                    this.challengeEventService.onChallengeAccepted(acceptedChallenge);
+                    this.loadChallenges();
+                    if (acceptedChallenge.gameId) {
+                        void this.router.navigate(['/game', acceptedChallenge.gameId]);
+                    } else {
+                        this.errorMessage = 'Challenge accepted, but no game was created.';
+                    }
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+                }
+            });
+    }
+
+    declineChallenge(challenge: Challenge): void {
+        this.challengeService.declineChallenge(challenge.id, { reason: 'Not interested' })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: () => {
+                    this.challengeEventService.removeChallenge(challenge.id);
+                    this.loadChallenges();
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+                }
+            });
+    }
+
+    cancelChallenge(challenge: Challenge): void {
+        this.challengeService.cancelChallenge(challenge.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: () => {
+                    this.loadChallenges();
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to cancel challenge');
+                }
+            });
+    }
+
+    goBack(): void {
+        void this.router.navigate(['/']);
+    }
+
+    openGame(challenge: Challenge): void {
+        if (!challenge.gameId) {
+            this.errorMessage = 'Missing game id for this challenge.';
+            return;
+        }
+        void this.router.navigate(['/game', challenge.gameId]);
+    }
+
+    getTimeControlDisplay(challenge: Challenge): string {
+        const { limit, increment } = challenge.timeControl;
+        if (!limit || !increment) {
+            return 'Unlimited';
+        }
+        const minutes = Math.floor(limit / 60);
+        return `${minutes}+${increment}`;
+    }
+
+    getChallengerDisplay(challenge: Challenge): string {
+        return challenge.challenger.name;
+    }
+
+    getOpponentDisplay(challenge: Challenge): string {
+        return challenge.destUser.name;
+    }
+
+    getExpirationInfo(challenge: Challenge): string {
+        const expiresAt = new Date(challenge.expiresAt);
+        const now = new Date();
+        const diffMs = expiresAt.getTime() - now.getTime();
+
+        if (diffMs <= 0 || challenge.status === 'expired') {
+            return 'Expired';
+        }
+
+        const minutes = Math.floor(diffMs / 60000);
+        if (minutes > 60) {
+            const hours = Math.floor(minutes / 60);
+            return `${hours}h`;
+        }
+
+        return `${minutes}m`;
+    }
+}
@@ -1,3 +1,5 @@
+@import '../../button-template.css';
+
 .game-shell {
  min-height: 100dvh;
  padding: clamp(var(--size-md), 2vw, var(--size-xl));
@@ -28,6 +30,7 @@

 header {
  margin-bottom: var(--size-xl);
+  margin-bottom: var(--size-xl);
 }

 h1,
@@ -35,9 +38,13 @@ h2 {
  color: var(--color-text-primary);
  margin: 0 0 var(--size-md);
  font-size: var(--heading-h1);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--size-md);
+  font-size: var(--heading-h1);
 }

 .meta {
+  color: var(--color-text-primary);
  color: var(--color-text-primary);
  font-size: 0.95rem;
 }
@@ -46,6 +53,8 @@ h2 {
  display: inline-block;
  margin-bottom: var(--size-sm);
  color: var(--color-text-primary);
+  margin-bottom: var(--size-sm);
+  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 600;
 }
@@ -108,6 +117,10 @@ h2 {
 }

 .board-section {
+  background: var(--color-bg-board);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
  background: var(--color-bg-board);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-md);
@@ -314,6 +327,7 @@ h2 {
@media (max-width: 991px) {
  .game-card {
    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
+    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
  }

  .board-section {
@@ -323,25 +337,30 @@ h2 {
  h1,
  h2 {
    font-size: var(--heading-h1-tablet);
+    font-size: var(--heading-h1-tablet);
  }
 }

@media (max-width: 768px) {
  .game-shell {
    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
+    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
  }

  .game-card {
    padding: clamp(var(--size-sm), 1vw, var(--size-md));
+    padding: clamp(var(--size-sm), 1vw, var(--size-md));
  }

  header {
    margin-bottom: var(--size-lg);
+    margin-bottom: var(--size-lg);
  }

  h1,
  h2 {
    font-size: var(--heading-h1-mobile);
+    font-size: var(--heading-h1-mobile);
  }

  .meta {
@@ -351,6 +370,8 @@ h2 {
  .top-section {
    gap: var(--size-xs);
    margin-bottom: var(--size-xs);
+    gap: var(--size-xs);
+    margin-bottom: var(--size-xs);
  }

  .board-section {
@@ -361,19 +382,24 @@ h2 {
@media (max-width: 480px) {
  .game-shell {
    padding: var(--size-sm);
+    padding: var(--size-sm);
  }

  .game-card {
    padding: var(--size-sm);
    border-radius: var(--border-radius-md);
+    padding: var(--size-sm);
+    border-radius: var(--border-radius-md);
  }

  header {
    margin-bottom: var(--size-md);
+    margin-bottom: var(--size-md);
  }

  h1 {
    font-size: var(--heading-h1-small);
+    font-size: var(--heading-h1-small);
  }

  .meta {
@@ -383,6 +409,8 @@ h2 {
  .top-section {
    gap: var(--size-xs-gap);
    margin-bottom: var(--size-xs);
+    gap: var(--size-xs-gap);
+    margin-bottom: var(--size-xs);
  }

  .board-section {
@@ -1,9 +1,6 @@
 <main class="game-shell" [class.theme-dark]="isDarkMode">
-  <app-promotion-dialog
-    [isOpen]="facade.isPromotionDialogOpen"
-    (promotionSelected)="facade.onPromotionSelected($event)"
-    (closed)="facade.onPromotionClosed()"
-  />
+  <app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
+    (closed)="facade.onPromotionClosed()" />

  <section class="game-card">
    <header class="mb-3">
@@ -13,150 +10,126 @@
    </header>

    @if (facade.loading) {
-      <p>Loading game state...</p>
+    <p>Loading game state...</p>
    } @else if (facade.state) {
-      @if (facade.isGameFinished && facade.gameCompletionMessage) {
-        <div class="game-completion-alert alert alert-success mb-3">
-          <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-          <p class="completion-subtitle mb-0">
-            <a routerLink="/" class="completion-link">Start a new game</a>
-          </p>
+    @if (facade.isGameFinished && facade.gameCompletionMessage) {
+    <div class="game-completion-alert alert alert-success mb-3">
+      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
+      <p class="completion-subtitle mb-0">
+        <a routerLink="/" class="completion-link">Start a new game</a>
+      </p>
+    </div>
+    }
+    @if (facade.isGameFinished && facade.gameCompletionMessage) {
+    <div class="game-completion-alert alert alert-success mb-3">
+      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
+      <p class="completion-subtitle mb-0">
+        <a routerLink="/" class="completion-link">Start a new game</a>
+      </p>
+    </div>
+    }
+    <div class="container-fluid">
+      <div class="row g-3">
+        <!-- Left Sidebar - Dummy Timers -->
+        <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
+          <section class="timer-card">
+            <h2>Timers</h2>
+            <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
+              <p class="timer-label">White</p>
+              <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
+            </div>
+            <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
+              <p class="timer-label">Black</p>
+              <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
+            </div>
+          </section>
        </div>
-      }
-      <div class="container-fluid">
-        <div class="row g-3">
-          <!-- Left Sidebar - Dummy Timers -->
-          <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-            <section class="timer-card">
-              <h2>Timers</h2>
-              <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
-                <p class="timer-label">White</p>
-                <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
-              </div>
-              <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
-                <p class="timer-label">Black</p>
-                <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
-              </div>
-            </section>
-          </div>

-          <!-- Center - Chess Board -->
-          <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
-            <section class="center-column d-flex flex-column h-100">
-              <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
-                <app-chess-board
-                  [fen]="facade.state.fen"
-                  [selectedSquare]="facade.selectedSquare"
-                  [highlightedSquares]="facade.highlightedSquares"
-                  [boardTheme]="boardTheme"
-                  (squareSelected)="facade.onBoardSquareSelected($event)"
-                />
-              </div>
+        <!-- Center - Chess Board -->
+        <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
+          <section class="center-column d-flex flex-column h-100">
+            <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
+              <app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
+                [highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
+                (squareSelected)="facade.onBoardSquareSelected($event)" />
+            </div>

-              <section class="top-section">
-                <section class="board-theme-card" aria-label="Board design chooser">
-                  <h3>Board Design</h3>
-                  <div class="board-theme-group" role="radiogroup" aria-label="Board design">
-                    <label class="board-theme-option">
-                      <input
-                        type="radio"
-                        name="boardTheme"
-                        [checked]="boardTheme === 'arabian'"
-                        (change)="setBoardTheme('arabian')"
-                      />
-                      <span>Arabian</span>
-                    </label>
+            <section class="top-section">
+              <section class="board-theme-card" aria-label="Board design chooser">
+                <h3>Board Design</h3>
+                <div class="board-theme-group" role="radiogroup" aria-label="Board design">
+                  <label class="board-theme-option">
+                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
+                      (change)="setBoardTheme('arabian')" />
+                    <span>Arabian</span>
+                  </label>

-                    <label class="board-theme-option">
-                      <input
-                        type="radio"
-                        name="boardTheme"
-                        [checked]="boardTheme === 'classic'"
-                        (change)="setBoardTheme('classic')"
-                      />
-                      <span>Classic</span>
-                    </label>
-                  </div>
-                </section>
-
-                <app-input-card
-                  label="Play move (UCI)"
-                  placeholder="e2e4"
-                  buttonLabel="Send Move"
-                  inputType="input"
-                  [value]="facade.moveInput"
-                  cardClass="move-card"
-                  hintText="Click your piece to highlight legal targets."
-                  (valueChange)="facade.moveInput = $event"
-                  (buttonClick)="facade.submitMove()"
-                />
+                  <label class="board-theme-option">
+                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
+                      (change)="setBoardTheme('classic')" />
+                    <span>Classic</span>
+                  </label>
+                </div>
              </section>
+
+              <app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
+                [value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
+                (valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
            </section>
-          </div>
+          </section>
+        </div>

-          <!-- Right Sidebar - Export -->
-          <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <section class="history-card">
-              <h2>Move History</h2>
+        <!-- Right Sidebar - Export -->
+        <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
+          <section class="history-card">
+            <h2>Move History</h2>

-              @if (facade.state.moves.length === 0) {
-                <p class="history-empty">No moves yet.</p>
-              } @else {
-                <ol class="history-list">
-                  @for (move of facade.state.moves; track $index) {
-                    <li>
-                      <span class="history-number">{{ $index + 1 }}.</span>
-                      <span class="history-move">{{ move }}</span>
-                    </li>
-                  }
-                </ol>
+            @if (facade.state.moves.length === 0) {
+            <p class="history-empty">No moves yet.</p>
+            } @else {
+            <ol class="history-list">
+              @for (move of facade.state.moves; track $index) {
+              <li>
+                <span class="history-number">{{ $index + 1 }}.</span>
+                <span class="history-move">{{ move }}</span>
+              </li>
              }
-            </section>
+            </ol>
+            }
+          </section>

-            <section class="export-card">
-              <h2>Export</h2>
-              <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
-                <label class="export-mode-option">
-                  <input
-                    type="radio"
-                    name="exportType"
-                    [checked]="exportType === 'fen'"
-                    (change)="setExportType('fen')"
-                  />
-                  <span>FEN</span>
-                </label>
-                <label class="export-mode-option">
-                  <input
-                    type="radio"
-                    name="exportType"
-                    [checked]="exportType === 'pgn'"
-                    (change)="setExportType('pgn')"
-                  />
-                  <span>PGN</span>
-                </label>
-              </div>
+          <section class="export-card">
+            <h2>Export</h2>
+            <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
+              <label class="export-mode-option">
+                <input type="radio" name="exportType" [checked]="exportType === 'fen'"
+                  (change)="setExportType('fen')" />
+                <span>FEN</span>
+              </label>
+              <label class="export-mode-option">
+                <input type="radio" name="exportType" [checked]="exportType === 'pgn'"
+                  (change)="setExportType('pgn')" />
+                <span>PGN</span>
+              </label>
+            </div>

-              <textarea
-                class="export-text"
-                [value]="exportValue"
-                [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'"
-                rows="8"
-                readonly
-              ></textarea>
+            <textarea class="export-text" [value]="exportValue"
+              [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
+              readonly></textarea>

-              <button type="button" class="export-button" (click)="completeExport()">Done</button>
+            <button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>

-              @if (exportNotice) {
-                <p class="export-note">{{ exportNotice }}</p>
-              }
-            </section>
-          </div>
+            @if (exportNotice) {
+            <p class="export-note">{{ exportNotice }}</p>
+            }
+          </section>
        </div>
      </div>
+    </div>
    }

    @if (facade.errorMessage) {
-      <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
+    <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
    }
  </section>
-</main>
+</main>
@@ -0,0 +1,478 @@
+@import '../welcome/welcome.component.css';
+
+.profile-building-container {
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 15;
+}
+
+.building-wrapper {
+  position: relative;
+  width: clamp(300px, 80vw, 600px);
+  margin: 0 auto;
+}
+
+.building-structure {
+  background: linear-gradient(135deg, var(--bldg-body) 0%, var(--bldg-mid) 50%, var(--bldg-lit) 100%);
+  border: 2px solid var(--dlg-border);
+  border-radius: 8px;
+  box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1);
+  overflow: hidden;
+}
+
+.cityscape-shell.sunset .building-structure {
+  box-shadow: var(--bb-glow), inset 0 0 20px rgba(255, 120, 40, 0.1);
+}
+
+.building-top {
+  height: 30px;
+  background: linear-gradient(180deg, var(--bldg-mid) 0%, var(--bldg-body) 100%);
+  border-bottom: 1px solid rgba(0, 210, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: var(--bb-tag);
+  font-family: 'Bebas Neue', sans-serif;
+  letter-spacing: 2px;
+  position: relative;
+}
+
+.cityscape-shell.sunset .building-top {
+  border-bottom-color: rgba(255, 120, 40, 0.3);
+}
+
+.building-top::after {
+  content: 'MY PROFILE';
+  font-size: 12px;
+}
+
+.building-main {
+  display: grid;
+  grid-template-columns: 80px 1fr 80px;
+  gap: 0;
+  padding: 20px;
+  min-height: 200px;
+  background: linear-gradient(90deg, rgba(0, 210, 255, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 210, 255, 0.03) 100%);
+  align-items: center;
+}
+
+.cityscape-shell.sunset .building-main {
+  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05) 0%, transparent 15%, transparent 85%, rgba(255, 120, 40, 0.05) 100%);
+}
+
+.building-side {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  justify-content: center;
+}
+
+.building-side.left-side {
+  border-right: 1px solid rgba(0, 210, 255, 0.2);
+  padding-right: 15px;
+}
+
+.cityscape-shell.sunset .building-side.left-side {
+  border-right-color: rgba(255, 120, 40, 0.2);
+}
+
+.building-side.right-side {
+  border-left: 1px solid rgba(0, 210, 255, 0.2);
+  padding-left: 15px;
+}
+
+.cityscape-shell.sunset .building-side.right-side {
+  border-left-color: rgba(255, 120, 40, 0.2);
+}
+
+.window {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, var(--win-cool) 0%, var(--win-cool) 100%);
+  border: 1px solid rgba(0, 210, 255, 0.5);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
+  position: relative;
+  animation: windowFlicker 4s ease-in-out infinite;
+}
+
+.cityscape-shell.sunset .window {
+  background: linear-gradient(135deg, var(--win-warm) 0%, var(--win-warm) 100%);
+  border-color: rgba(255, 120, 40, 0.5);
+  box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  animation: windowFlickerSunset 4s ease-in-out infinite;
+}
+
+@keyframes windowFlicker {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 12px rgba(0, 210, 255, 0.3);
+  }
+}
+
+@keyframes windowFlickerSunset {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 15px rgba(255, 120, 40, 0.6), inset 0 0 12px rgba(255, 120, 40, 0.3);
+  }
+}
+
+.building-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.player-display-window {
+  background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.05) 100%);
+  border: 2px solid var(--bb-tag);
+  border-radius: 4px;
+  padding: 30px;
+  text-align: center;
+  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), inset 0 0 15px rgba(0, 210, 255, 0.1);
+  min-width: 250px;
+}
+
+.cityscape-shell.sunset .player-display-window {
+  background: linear-gradient(135deg, rgba(182, 64, 255, 0.1) 0%, rgba(182, 64, 255, 0.05) 100%);
+  box-shadow: 0 0 20px rgba(255, 64, 249, 0.3), inset 0 0 15px rgba(255, 64, 249, 0.1);
+}
+
+.player-avatar {
+  font-size: 4rem;
+  margin-bottom: 15px;
+  display: block;
+  animation: avatarPulse 3s ease-in-out infinite;
+}
+
+@keyframes avatarPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.player-name {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 28px;
+  font-weight: bold;
+  color: var(--bb-title);
+  letter-spacing: 1px;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+  background: linear-gradient(90deg, var(--bb-title), var(--bb-tag));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.player-name:hover {
+  filter: brightness(1.2);
+  background: linear-gradient(90deg, var(--bb-tag), var(--bb-title));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transform: scale(1.05);
+}
+
+.player-name.copied {
+  background: linear-gradient(90deg, #4caf50, #66bb6a);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
+}
+
+.player-id-label {
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--bb-tag);
+  margin-bottom: 8px;
+  opacity: 0.8;
+}
+
+.player-id-value {
+  font-family: 'Space Mono', monospace;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--bb-tag);
+  background: rgba(0, 210, 255, 0.15);
+  padding: 12px 16px;
+  border: 1.5px solid var(--bb-tag);
+  border-radius: 2px;
+  word-break: break-all;
+  box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
+  text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  user-select: text;
+}
+
+.cityscape-shell.sunset .player-id-value {
+  background: rgba(182, 64, 255, 0.15);
+  box-shadow: 0 0 15px rgba(255, 64, 249, 0.4);
+  text-shadow: 0 0 10px rgba(255, 64, 249, 0.5);
+}
+
+.player-id-value:hover {
+  background: rgba(0, 210, 255, 0.25);
+  box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
+  transform: scale(1.02);
+}
+
+.cityscape-shell.sunset .player-id-value:hover {
+  background: rgba(182, 64, 255, 0.25);
+  box-shadow: 0 0 20px rgba(255, 64, 249, 0.6);
+}
+
+.player-id-value.copied {
+  background: rgba(76, 175, 80, 0.2);
+  border-color: #4caf50;
+  color: #4caf50;
+  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
+}
+
+.copy-notification {
+  font-family: 'Space Mono', monospace;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: #4caf50;
+  margin-top: 12px;
+  animation: copyNotification 2s ease-in-out forwards;
+}
+
+@keyframes copyNotification {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  80% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+.building-base {
+  padding: 20px;
+  background: linear-gradient(180deg, rgba(0, 210, 255, 0.05) 0%, rgba(0, 210, 255, 0.02) 100%);
+  border-top: 1px solid rgba(0, 210, 255, 0.2);
+}
+
+.cityscape-shell.sunset .building-base {
+  background: linear-gradient(180deg, rgba(255, 120, 40, 0.05) 0%, rgba(255, 120, 40, 0.02) 100%);
+  border-top-color: rgba(255, 120, 40, 0.2);
+}
+
+.stat-panel {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 20px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.stat-label {
+  font-family: 'Space Mono', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--bb-tag);
+  opacity: 0.7;
+}
+
+.stat-value {
+  font-family: 'Space Mono', monospace;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--bb-title);
+  text-align: center;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 30px;
+  background: rgba(0, 210, 255, 0.2);
+}
+
+.cityscape-shell.sunset .stat-divider {
+  background: rgba(255, 120, 40, 0.2);
+}
+
+.building-door {
+  height: 60px;
+  background: linear-gradient(90deg, var(--bldg-mid) 0%, var(--bldg-body) 50%, var(--bldg-mid) 100%);
+  border-top: 1px solid rgba(0, 210, 255, 0.2);
+  border-radius: 0 0 8px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.cityscape-shell.sunset .building-door {
+  border-top-color: rgba(255, 120, 40, 0.2);
+}
+
+.building-door::before {
+  content: '';
+  position: absolute;
+  width: 90%;
+  height: 100%;
+  border: 1.5px solid rgba(0, 210, 255, 0.3);
+  border-radius: 4px;
+  background: linear-gradient(90deg, rgba(0, 210, 255, 0.05), rgba(0, 210, 255, 0.02));
+}
+
+.cityscape-shell.sunset .building-door::before {
+  border-color: rgba(255, 120, 40, 0.3);
+  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05), rgba(255, 120, 40, 0.02));
+}
+
+.door-handle {
+  width: 12px;
+  height: 12px;
+  background: radial-gradient(circle at 30% 30%, rgba(0, 210, 255, 0.8), rgba(0, 210, 255, 0.4));
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
+  position: relative;
+  z-index: 2;
+  margin-left: 80px;
+  animation: handleGlow 2s ease-in-out infinite;
+}
+
+.cityscape-shell.sunset .door-handle {
+  background: radial-gradient(circle at 30% 30%, rgba(255, 120, 40, 0.8), rgba(255, 120, 40, 0.4));
+  box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
+  animation: handleGlowSunset 2s ease-in-out infinite;
+}
+
+@keyframes handleGlow {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(0, 210, 255, 0.9);
+  }
+}
+
+@keyframes handleGlowSunset {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(255, 120, 40, 0.9);
+  }
+}
+
+.back-btn {
+  position: absolute;
+  top: -50px;
+  left: 0;
+  background: transparent;
+  color: var(--bb-title);
+  border: 1px solid var(--dlg-border);
+  border-radius: 2px;
+  padding: 0.5rem 1rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.back-btn:hover {
+  background: rgba(0, 210, 255, 0.1);
+  border-color: var(--bb-tag);
+  color: var(--bb-tag);
+  box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
+}
+
+.cityscape-shell.sunset .back-btn:hover {
+  background: rgba(182, 64, 255, 0.1);
+  box-shadow: 0 0 15px rgba(255, 64, 249, 0.3);
+}
+
+@media (max-width: 600px) {
+  .building-structure {
+    border-radius: 4px;
+  }
+
+  .building-main {
+    grid-template-columns: 50px 1fr 50px;
+    padding: 15px;
+    gap: 8px;
+  }
+
+  .window {
+    width: 30px;
+    height: 30px;
+  }
+
+  .player-display-window {
+    min-width: 180px;
+    padding: 20px;
+  }
+
+  .player-avatar {
+    font-size: 3rem;
+    margin-bottom: 10px;
+  }
+
+  .player-name {
+    font-size: 20px;
+    margin-bottom: 15px;
+  }
+
+  .player-id-value {
+    font-size: 14px;
+    padding: 8px 12px;
+  }
+
+  .building-base {
+    padding: 15px;
+  }
+
+  .stat-panel {
+    gap: 10px;
+  }
+
+  .back-btn {
+    top: -45px;
+    font-size: 9px;
+    padding: 0.4rem 0.8rem;
+  }
+}
@@ -0,0 +1,97 @@
+<div class="cityscape-shell" [class.sunset]="isSunsetMode">
+
+  <div class="scene">
+    <div class="sky">
+      <div class="stars-layer">
+        <div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
+      </div>
+      <div class="sun"></div>
+      <div class="cloud-wrap">
+        <div class="cloud cloud-a"></div>
+        <div class="cloud cloud-b"></div>
+        <div class="cloud cloud-c"></div>
+        <div class="cloud cloud-d"></div>
+        <div class="cloud cloud-e"></div>
+      </div>
+    </div>
+
+    <div class="bg-layer">
+      <div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
+    </div>
+
+    <div class="main-layer">
+      <div class="profile-building-container">
+        @if (currentUser; as user) {
+        <!-- Player Building with Info Inside -->
+        <div class="building-wrapper">
+          <div class="building-structure">
+            <!-- Building top -->
+            <div class="building-top"></div>
+            
+            <!-- Building main section with user inside -->
+            <div class="building-main">
+              <!-- Left side windows -->
+              <div class="building-side left-side">
+                <div class="window"></div>
+                <div class="window"></div>
+                <div class="window"></div>
+                <div class="window"></div>
+              </div>
+              
+              <!-- Center section - User Info -->
+              <div class="building-center">
+                <div class="player-display-window">
+                  <div class="player-avatar">👤</div>
+                  <div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
+                  <div class="player-id-label">PLAYER ID</div>
+                  <div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
+                  @if (idCopied) {
+                  <div class="copy-notification">✓ COPIED</div>
+                  }
+                  @if (usernameCopied) {
+                  <div class="copy-notification">✓ COPIED</div>
+                  }
+                </div>
+              </div>
+              
+              <!-- Right side windows -->
+              <div class="building-side right-side">
+                <div class="window"></div>
+                <div class="window"></div>
+                <div class="window"></div>
+                <div class="window"></div>
+              </div>
+            </div>
+            
+            <!-- Building base with stats -->
+            <div class="building-base">
+              <div class="stat-panel">
+                <div class="stat">
+                  <span class="stat-label">RATING</span>
+                  <span class="stat-value">{{ user.rating }}</span>
+                </div>
+                <div class="stat-divider"></div>
+                <div class="stat">
+                  <span class="stat-label">MEMBER SINCE</span>
+                  <span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Building door -->
+            <div class="building-door">
+              <div class="door-handle"></div>
+            </div>
+          </div>
+          
+          <!-- Back button -->
+          <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
+        </div>
+        }
+      </div>
+    </div>
+
+    <div class="haze"></div>
+    <div class="ground"></div>
+  </div>
+</div>
@@ -0,0 +1,127 @@
+import { Component, OnInit, DestroyRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AuthService } from '../../services/auth.service';
+import { ThemeService } from '../../services/theme.service';
+import { CurrentUser } from '../../models/auth.models';
+
+interface Star {
+  style: Record<string, string>;
+}
+
+interface BackgroundBuilding {
+  style: Record<string, string>;
+}
+
+@Component({
+  selector: 'app-profile',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './profile.component.html',
+  styleUrl: './profile.component.css'
+})
+export class ProfileComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly authService = inject(AuthService);
+  private readonly themeService = inject(ThemeService);
+  private readonly router = inject(Router);
+
+  currentUser: CurrentUser | null = null;
+  isSunsetMode = false;
+  idCopied = false;
+  usernameCopied = false;
+
+  stars: Star[] = [];
+  bgBuildings: BackgroundBuilding[] = [];
+
+  ngOnInit(): void {
+    this.authService.currentUser$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((user) => {
+        this.currentUser = user;
+        if (!user) {
+          this.router.navigate(['']);
+        }
+      });
+
+    this.themeService.darkMode$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((isDarkMode) => {
+        this.isSunsetMode = !isDarkMode;
+      });
+
+    this.generateStars(220);
+    this.generateBackgroundBuildings();
+  }
+
+  goBack(): void {
+    this.router.navigate(['']);
+  }
+
+  copyPlayerId(id: string): void {
+    navigator.clipboard.writeText(id).then(() => {
+      this.idCopied = true;
+      setTimeout(() => {
+        this.idCopied = false;
+      }, 2000);
+    });
+  }
+
+  copyUsername(username: string): void {
+    navigator.clipboard.writeText(username).then(() => {
+      this.usernameCopied = true;
+      setTimeout(() => {
+        this.usernameCopied = false;
+      }, 2000);
+    });
+  }
+
+  private generateStars(count: number): void {
+    this.stars = Array.from({ length: count }, () => {
+      const size = Math.random() * 2 + 0.5;
+      return {
+        style: {
+          width: `${size}px`,
+          height: `${size}px`,
+          left: `${Math.random() * 100}%`,
+          top: `${Math.random() * 62}%`,
+          '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
+          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
+        }
+      };
+    });
+  }
+
+  private generateBackgroundBuildings(): void {
+    const specs = [
+      { l: '0%', w: '7%', h: '30vh' },
+      { l: '3%', w: '4%', h: '18vh' },
+      { l: '7%', w: '5%', h: '22vh' },
+      { l: '11%', w: '8%', h: '28vh' },
+      { l: '15%', w: '6%', h: '20vh' },
+      { l: '18.5%', w: '4%', h: '18vh' },
+      { l: '22.5%', w: '6%', h: '26vh' },
+      { l: '28%', w: '5%', h: '25vh' },
+      { l: '32%', w: '4%', h: '15vh' },
+      { l: '35.5%', w: '4.5%', h: '20vh' },
+      { l: '42%', w: '5%', h: '28vh' },
+      { l: '47%', w: '5%', h: '22vh' },
+      { l: '50%', w: '7%', h: '30vh' },
+      { l: '55%', w: '6%', h: '27vh' },
+      { l: '60.5%', w: '5%', h: '24vh' },
+      { l: '64.5%', w: '3.5%', h: '17vh' },
+      { l: '70%', w: '6%', h: '23vh' },
+      { l: '75%', w: '4%', h: '19vh' },
+      { l: '80.5%', w: '4%', h: '21vh' },
+      { l: '85.5%', w: '9%', h: '32vh' },
+      { l: '88%', w: '5%', h: '20vh' },
+      { l: '91%', w: '3%', h: '16vh' },
+      { l: '94%', w: '6%', h: '27vh' }
+    ];
+
+    this.bgBuildings = specs.map((spec) => ({
+      style: { left: spec.l, width: spec.w, height: spec.h }
+    }));
+  }
+}
@@ -1,3 +1,5 @@
+@import '../../button-template.css';
+
 :host {
  display: block;
 }
@@ -1,15 +1,4 @@
 <div class="cityscape-shell" [class.sunset]="isSunsetMode">
-  <div class="mode-badge">{{ modeBadge }}</div>
-
-  <button
-    type="button"
-    class="tgl"
-    (click)="toggleTheme()"
-    [attr.aria-label]="isSunsetMode ? 'Switch to night mode' : 'Switch to sunset mode'"
-    title="Toggle theme"
-  >
-    <span class="tgl-icon">{{ isSunsetMode ? '🌙' : '☀' }}</span>
-  </button>

  <div class="scene">
    <div class="sky">
@@ -35,50 +24,41 @@
        <div class="ant" style="height:38px;"></div>
        <div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wA1']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
          <div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wA2']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:36vh;">
-          <div style="padding:5px 5px 0;">
+          <div>
            <div class="bb">
              <div class="bb-tag">JOIN</div>
              <div class="bb-title">JOIN<br />GAME</div>
-              <button type="button" class="bb-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
+              <button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
                {{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
              </button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(5,1fr);">
-            <div
-              class="w"
-              *ngFor="let win of windows['wA3']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
          </div>
        </div>
+
+        <!-- Draggable Meat Emoji -->
+        @if (showMeatEmoji) {
+        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
+          🍖
+        </div>
+        }
      </div>

      <div class="bwrap" style="left:21%;width:15%;">
        <div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
          <div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wB1']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:44vh;">
@@ -89,17 +69,13 @@
            <div class="bb">
              <div class="bb-tag">BOT</div>
              <div class="bb-title">PLAY WITH<br />A BOT</div>
-              <button type="button" class="bb-btn" (click)="openDifficultyDialog()" [disabled]="creating">
+              <button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
                {{ creating ? 'CREATING...' : 'GET STARTED →' }}
              </button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(5,1fr);">
-            <div
-              class="w"
-              *ngFor="let win of windows['wB2']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>
@@ -111,20 +87,12 @@
        </div>
        <div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
          <div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wC1']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:10vh;">
          <div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wC2']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:48vh;">
@@ -133,17 +101,13 @@
              <div class="bb-tag">WELCOME</div>
              <div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
              <div class="bb-subtitle">Play your next move from the skyline.</div>
-              <button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()" [disabled]="creating">
+              <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
                {{ creating ? 'CREATING...' : 'START NOW →' }}
              </button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(7,1fr);">
-            <div
-              class="w"
-              *ngFor="let win of windows['wC3']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>
@@ -152,11 +116,7 @@
        <div class="ant" style="height:30px;"></div>
        <div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
          <div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wD1']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:42vh;">
@@ -167,15 +127,11 @@
            <div class="bb">
              <div class="bb-tag">OPTIONS</div>
              <div class="bb-title">MORE<br />OPTIONS</div>
-              <button type="button" class="bb-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
+              <button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(6,1fr);">
-            <div
-              class="w"
-              *ngFor="let win of windows['wD2']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>
@@ -183,11 +139,7 @@
      <div class="bwrap" style="left:83%;width:10%;">
        <div class="bpart" style="height:30vh;">
          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
-            <div
-              class="w"
-              *ngFor="let win of windows['wE1']"
-              [ngStyle]="win.style"
-            ></div>
+            <div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>
@@ -195,54 +147,46 @@

    <!-- Speech Bubble -->
    @if (showSpeechBubble) {
-      <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
-        <div class="speech-bubble">
-          <div class="bubble-text">{{ bubbleMessage }}</div>
-          <div class="bubble-tail"></div>
-        </div>
+    <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
+      <div class="speech-bubble">
+        <div class="bubble-text">{{ bubbleMessage }}</div>
+        <div class="bubble-tail"></div>
      </div>
+    </div>
    }

    <!-- Zoomed Window View -->
    @if (isZoomedIn) {
-      <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()" (mouseleave)="onMouseUp()">
-        <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
-          <div class="zoom-window-frame">
-            <div class="zoom-player-2">
-              <img 
-                src="/assets/arabian-chess/player-two.gif" 
-                alt="Player 2" 
-                class="player-2-gif"
-                (click)="$event.stopPropagation()"
-              />
-              @if (showSecondSpeechBubble) {
-                <div class="second-speech-bubble">
-                  <div class="bubble-text">Feed me! 🍖</div>
-                  <div class="bubble-tail"></div>
-                </div>
-              }
-              @if (showHappyBubble) {
-                <div class="happy-speech-bubble">
-                  <div class="bubble-text">Happy meow! 😸</div>
-                  <div class="bubble-tail"></div>
-                </div>
-              }
+    <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
+      (mouseleave)="onMouseUp()">
+      <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
+        <div class="zoom-window-frame">
+          <div class="zoom-player-2">
+            <img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
+              (click)="$event.stopPropagation()" />
+            @if (showSecondSpeechBubble) {
+            <div class="second-speech-bubble">
+              <div class="bubble-text">Feed me! 🍖</div>
+              <div class="bubble-tail"></div>
            </div>
+            }
+            @if (showHappyBubble) {
+            <div class="happy-speech-bubble">
+              <div class="bubble-text">Happy meow! 😸</div>
+              <div class="bubble-tail"></div>
+            </div>
+            }
          </div>
-
-          <!-- Draggable Meat Emoji -->
-          @if (showMeatEmoji) {
-            <div 
-              class="meat-emoji"
-              [style.left.px]="meatX"
-              [style.top.px]="meatY"
-              (mousedown)="onMeatMouseDown($event)"
-            >
-              🍖
-            </div>
-          }
        </div>
+
+        <!-- Draggable Meat Emoji -->
+        @if (showMeatEmoji) {
+        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
+          🍖
+        </div>
+        }
      </div>
+    </div>
    }

    <div class="haze"></div>
@@ -250,83 +194,84 @@
  </div>

  @if (showDifficultyDialog) {
-    <div class="dialog-overlay" (click)="closeDifficultyDialog()">
-      <div class="dialog-card" (click)="$event.stopPropagation()">
-        <div class="dialog-title">SELECT DIFFICULTY</div>
-        <div class="dialog-actions">
-          <button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
-          <button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
-          <button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
-        </div>
+  <div class="dialog-overlay" (click)="closeDifficultyDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-title">SELECT DIFFICULTY</div>
+      <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
+        <button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
+        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
      </div>
    </div>
+  </div>
  }

  @if (showOptionsDialog) {
-    <div class="dialog-overlay" (click)="closeOptionsDialog()">
-      <div class="dialog-card" (click)="$event.stopPropagation()">
-        <div class="dialog-title">MORE OPTIONS</div>
-        <div class="dialog-actions">
-          <button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
-        </div>
+  <div class="dialog-overlay" (click)="closeOptionsDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-title">MORE OPTIONS</div>
+      <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
      </div>
    </div>
+  </div>
  }

  @if (showJoinDialog) {
-    <div class="dialog-overlay" (click)="closeJoinDialog()">
-      <div class="dialog-card" (click)="$event.stopPropagation()">
-        <div class="dialog-title">JOIN GAME</div>
-        <input
-          type="text"
-          class="dialog-input"
-          [(ngModel)]="gameIdInput"
-          placeholder="Paste game ID here"
-          [disabled]="joiningGame"
-          (keyup.enter)="submitJoinGame()"
-        />
-        <div class="dialog-actions">
-          <button type="button" class="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
-            {{ joiningGame ? 'JOINING...' : 'JOIN' }}
-          </button>
-          <button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
-        </div>
+  <div class="dialog-overlay" (click)="closeJoinDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-title">JOIN GAME</div>
+      <input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
+        [disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
+      <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="submitJoinGame()"
+          [disabled]="joiningGame || !gameIdInput.trim()">
+          {{ joiningGame ? 'JOINING...' : 'JOIN' }}
+        </button>
+        <button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
      </div>
    </div>
+  </div>
  }

  @if (showImportDialog) {
-    <div class="dialog-overlay" (click)="closeImportDialog()">
-      <div class="dialog-card" (click)="$event.stopPropagation()">
-        <div class="dialog-title">IMPORT GAME</div>
-        <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
-          <label class="import-mode-option">
-            <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')" [disabled]="importing" />
-            <span>FEN</span>
-          </label>
-          <label class="import-mode-option">
-            <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
-            <span>PGN</span>
-          </label>
-        </div>
-        <textarea
-          class="dialog-input dialog-textarea"
-          [(ngModel)]="importText"
-          [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
-          [disabled]="importing"
-          rows="5"
-        ></textarea>
-        <div class="dialog-actions">
-          <button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
-            {{ importing ? 'IMPORTING...' : 'IMPORT' }}
-          </button>
-          <button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
-        </div>
+  <div class="dialog-overlay" (click)="closeImportDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <div class="dialog-title">IMPORT GAME</div>
+      <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
+        <label class="import-mode-option">
+          <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
+            [disabled]="importing" />
+          <span>FEN</span>
+        </label>
+        <label class="import-mode-option">
+          <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
+            [disabled]="importing" />
+          <span>PGN</span>
+        </label>
+      </div>
+      <textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
+        [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
+        rows="5"></textarea>
+      <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
+          {{ importing ? 'IMPORTING...' : 'IMPORT' }}
+        </button>
+        <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
      </div>
    </div>
+  </div>
+  }
+
+  @if (showChallengeDialog) {
+  <div class="dialog-overlay" (click)="closeChallengeDialog()">
+    <div class="dialog-card" (click)="$event.stopPropagation()">
+      <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
+    </div>
+  </div>
  }

  @if (errorMessage) {
-    <p class="error-banner">{{ errorMessage }}</p>
+  <p class="error-banner">{{ errorMessage }}</p>
  }
-</div>
+</div>
@@ -1,10 +1,16 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { getErrorMessage } from '../../core/http/error-message.util';
+import { CurrentUser } from '../../models/auth.models';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+import { AuthService } from '../../services/auth.service';
 import { GameApiService } from '../../services/game-api.service';
+import { ThemeService } from '../../services/theme.service';
+import { ChallengeCreateDialogComponent } from '../../components/challenge-create-dialog/challenge-create-dialog.component';

 type Difficulty = 'easy' | 'medium' | 'hard';
 type ImportMode = 'fen' | 'pgn';
@@ -24,14 +30,34 @@ interface WindowCell {
  style: Record<string, string>;
 }

+interface Star {
+  style: Record<string, string>;
+}
+
+interface BackgroundBuilding {
+  style: Record<string, string>;
+}
+
+interface WindowCell {
+  state: 'off' | 'on';
+  color?: string;
+  glowColor?: string;
+  style: Record<string, string>;
+}
+
@Component({
  selector: 'app-welcome',
  standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
 })
 export class WelcomeComponent implements OnInit, OnDestroy {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly authService = inject(AuthService);
+  private readonly authDialogService = inject(AuthDialogService);
+  private readonly themeService = inject(ThemeService);
+
  creating = false;
  joiningGame = false;
  importing = false;
@@ -41,6 +67,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
  showOptionsDialog = false;
  showJoinDialog = false;
  showImportDialog = false;
+  showChallengeDialog = false;

  gameIdInput = '';
  importMode: ImportMode = 'fen';
@@ -48,6 +75,9 @@ export class WelcomeComponent implements OnInit, OnDestroy {

  isSunsetMode = false;
  modeBadge = 'NIGHT MODE';
+  currentUser: CurrentUser | null = null;
+  private authDialogState: 'login' | 'register' | null = null;
+  private pendingAction: (() => void) | null = null;

  // Speech bubble and zoom features
  showSpeechBubble = false;
@@ -82,15 +112,35 @@ export class WelcomeComponent implements OnInit, OnDestroy {
    private readonly router: Router,
    private readonly gameApi: GameApiService
  ) {
-    this.initTheme();
  }

  ngOnInit(): void {
+    this.themeService.darkMode$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((isDarkMode) => {
+        this.isSunsetMode = !isDarkMode;
+        this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+      });
+
+    this.authService.currentUser$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((user) => {
+        this.currentUser = user;
+        this.maybeRunPendingAction();
+      });
+
+    this.authDialogService.dialogState$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((state) => {
+        this.authDialogState = state;
+        this.maybeRunPendingAction();
+      });
+
    this.generateStars(220);
    this.generateBackgroundBuildings();
    this.generateWindowsForAllBuildings();
    this.startWindowFlicker();
-    
+
    // Show speech bubble after 5 seconds
    this.speechBubbleTimeoutId = setTimeout(() => {
      this.showSpeechBubble = true;
@@ -107,21 +157,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
    }
  }

-  toggleTheme(): void {
-    this.isSunsetMode = !this.isSunsetMode;
-    this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
-
-    if (!this.isSunsetMode) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-      localStorage.setItem('theme', 'dark');
+  openDifficultyDialog(): void {
+    if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
      return;
    }

-    document.documentElement.removeAttribute('data-theme');
-    localStorage.removeItem('theme');
-  }
-
-  openDifficultyDialog(): void {
    this.closeAllDialogs();
    this.showDifficultyDialog = true;
  }
@@ -142,6 +182,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
  }

  openJoinDialog(): void {
+    if (!this.requireAuth(() => this.showJoinDialog = true)) {
+      return;
+    }
+
    this.closeAllDialogs();
    this.showJoinDialog = true;
  }
@@ -156,6 +200,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
  }

  openImportDialog(): void {
+    if (!this.requireAuth(() => this.showImportDialog = true)) {
+      return;
+    }
+
    this.closeAllDialogs();
    this.showImportDialog = true;
  }
@@ -176,29 +224,147 @@ export class WelcomeComponent implements OnInit, OnDestroy {
  }

  startOneVsOne(): void {
-    if (this.creating) {
+    if (!this.requireAuth(() => this.openChallengeDialog())) {
      return;
    }

-    this.errorMessage = '';
-    this.creating = true;
+    this.openChallengeDialog();
+  }

-    this.gameApi
-      .createGame()
-      .pipe(finalize(() => (this.creating = false)))
-      .subscribe({
-        next: (game) => {
-          void this.router.navigate(['/game', game.gameId], {
-            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
-          });
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
-        }
-      });
+  openChallengeDialog(): void {
+    this.closeAllDialogs();
+    this.showChallengeDialog = true;
+  }
+
+  closeChallengeDialog(): void {
+    this.showChallengeDialog = false;
+    this.errorMessage = '';
  }

  startVsBot(difficulty: Difficulty): void {
+    if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
+      return;
+    }
+
+    this.performStartVsBot(difficulty);
+  }
+
+  submitJoinGame(): void {
+    if (!this.requireAuth(() => this.performSubmitJoinGame())) {
+      return;
+    }
+
+    this.performSubmitJoinGame();
+  }
+
+  submitImportGame(): void {
+    if (!this.requireAuth(() => this.performSubmitImportGame())) {
+      return;
+    }
+
+    this.performSubmitImportGame();
+  }
+
+  onSpeechBubbleClick(): void {
+    this.showSpeechBubble = false;
+    this.isZoomedIn = true;
+    this.bubbleMessage = 'meow';
+    this.showMeatEmoji = true;
+    this.showHappyBubble = false;
+    this.showSecondSpeechBubble = true;
+
+    // Reset meat position
+    this.meatX = window.innerWidth / 2 - 100;
+    this.meatY = window.innerHeight / 2 + 150;
+  }
+
+  onZoomedViewClick(): void {
+    this.isZoomedIn = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = false;
+    this.showMeatEmoji = false;
+    this.bubbleMessage = 'meow';
+
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
+    }
+  }
+
+  onMeatMouseDown(event: MouseEvent): void {
+    this.isDraggingMeat = true;
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    this.meatDragOffsetX = event.clientX - rect.left;
+    this.meatDragOffsetY = event.clientY - rect.top;
+  }
+
+  onMouseMove(event: MouseEvent): void {
+    if (!this.isDraggingMeat) {
+      return;
+    }
+
+    this.meatX = event.clientX - this.meatDragOffsetX;
+    this.meatY = event.clientY - this.meatDragOffsetY;
+
+    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
+    if (!gifElement) {
+      return;
+    }
+
+    const gifRect = gifElement.getBoundingClientRect();
+    const gifCenterX = gifRect.left + gifRect.width / 2;
+    const gifCenterY = gifRect.top + gifRect.height / 2;
+
+    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
+    if (!meatElement) {
+      return;
+    }
+
+    const meatRect = meatElement.getBoundingClientRect();
+    const meatCenterX = meatRect.left + meatRect.width / 2;
+    const meatCenterY = meatRect.top + meatRect.height / 2;
+
+    const distance = Math.sqrt(
+      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
+    );
+
+    if (distance < 50) {
+      this.onMeatFed();
+    }
+  }
+
+  onMouseUp(): void {
+    this.isDraggingMeat = false;
+  }
+
+  onMeatFed(): void {
+    this.showMeatEmoji = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = true;
+    this.isDraggingMeat = false;
+  }
+
+  private requireAuth(action: () => void): boolean {
+    if (this.authService.isLoggedIn()) {
+      return true;
+    }
+
+    this.pendingAction = action;
+    this.authDialogService.openLogin();
+    return false;
+  }
+
+  private maybeRunPendingAction(): void {
+    if (!this.currentUser || this.authDialogState !== null || !this.pendingAction) {
+      return;
+    }
+
+    const action = this.pendingAction;
+    this.pendingAction = null;
+    action();
+  }
+
+
+  private performStartVsBot(difficulty: Difficulty): void {
    if (this.creating) {
      return;
    }
@@ -222,7 +388,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
      });
  }

-  submitJoinGame(): void {
+  private performSubmitJoinGame(): void {
    const gameId = this.gameIdInput.trim();
    if (this.joiningGame || !gameId) {
      return;
@@ -247,7 +413,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
      });
  }

-  submitImportGame(): void {
+  private performSubmitImportGame(): void {
    const trimmedImport = this.importText.trim();
    if (this.importing || !trimmedImport) {
      return;
@@ -273,88 +439,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
    });
  }

-  onSpeechBubbleClick(): void {
-    this.showSpeechBubble = false;
-    this.isZoomedIn = true;
-    this.bubbleMessage = 'meow';
-    this.showMeatEmoji = true;
-    this.showHappyBubble = false;
-    this.showSecondSpeechBubble = true;
-    
-    // Reset meat position
-    this.meatX = window.innerWidth / 2 - 100;
-    this.meatY = window.innerHeight / 2 + 150;
-  }
-
-  onZoomedViewClick(): void {
-    this.isZoomedIn = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = false;
-    this.showMeatEmoji = false;
-    this.bubbleMessage = 'meow';
-    
-    if (this.zoomTimeoutId) {
-      clearTimeout(this.zoomTimeoutId);
-    }
-  }
-
-  onMeatMouseDown(event: MouseEvent): void {
-    this.isDraggingMeat = true;
-    const rect = (event.target as HTMLElement).getBoundingClientRect();
-    this.meatDragOffsetX = event.clientX - rect.left;
-    this.meatDragOffsetY = event.clientY - rect.top;
-  }
-
-  onMouseMove(event: MouseEvent): void {
-    if (!this.isDraggingMeat) {
-      return;
-    }
-
-    this.meatX = event.clientX - this.meatDragOffsetX;
-    this.meatY = event.clientY - this.meatDragOffsetY;
-
-    // Get gif element position
-    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
-    if (!gifElement) {
-      return;
-    }
-
-    const gifRect = gifElement.getBoundingClientRect();
-    const gifCenterX = gifRect.left + gifRect.width / 2;
-    const gifCenterY = gifRect.top + gifRect.height / 2;
-
-    // Get meat center position
-    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
-    if (!meatElement) {
-      return;
-    }
-
-    const meatRect = meatElement.getBoundingClientRect();
-    const meatCenterX = meatRect.left + meatRect.width / 2;
-    const meatCenterY = meatRect.top + meatRect.height / 2;
-
-    // Calculate distance
-    const distance = Math.sqrt(
-      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
-    );
-
-    // If meat is close enough to gif center (within 50px), trigger the interaction
-    if (distance < 50) {
-      this.onMeatFed();
-    }
-  }
-
-  onMouseUp(): void {
-    this.isDraggingMeat = false;
-  }
-
-  onMeatFed(): void {
-    this.showMeatEmoji = false;
-    this.showSecondSpeechBubble = false;
-    this.showHappyBubble = true;
-    this.isDraggingMeat = false;
-  }
-
  private closeAllDialogs(): void {
    this.showDifficultyDialog = false;
    this.showOptionsDialog = false;
@@ -363,19 +447,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
    this.errorMessage = '';
  }

-  private initTheme(): void {
-    const savedTheme = localStorage.getItem('theme');
-    this.isSunsetMode = savedTheme !== 'dark';
-    this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
-
-    if (!this.isSunsetMode) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-      return;
-    }
-
-    document.documentElement.removeAttribute('data-theme');
-  }
-
  private generateStars(count: number): void {
    this.stars = Array.from({ length: count }, () => {
      const size = Math.random() * 2 + 0.5;
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export type AuthDialogState = 'login' | 'register' | null;
+
+@Injectable({ providedIn: 'root' })
+export class AuthDialogService {
+    private readonly dialogStateSubject = new BehaviorSubject<AuthDialogState>(null);
+
+    readonly dialogState$ = this.dialogStateSubject.asObservable();
+
+    openLogin(): void {
+        this.dialogStateSubject.next('login');
+    }
+
+    openRegister(): void {
+        this.dialogStateSubject.next('register');
+    }
+
+    close(): void {
+        this.dialogStateSubject.next(null);
+    }
+}
@@ -0,0 +1,22 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const token = localStorage.getItem('token');
+
+  const isProtectedEndpoint =
+    req.url.includes('/api/account/me') ||
+    req.url.includes('/api/account/bots') ||
+    req.url.includes('/api/account/official-bots') ||
+    req.url.includes('/api/board/game') ||
+    req.url.includes('/api/challenge');
+
+  if (token && isProtectedEndpoint) {
+    req = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`
+      }
+    });
+  }
+
+  return next(req);
+};
@@ -0,0 +1,93 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { environment } from '../../environments/environment';
+import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private readonly apiBase = environment.apiBaseUrl;
+  private readonly accountServiceUrl = environment.accountServiceUrl;
+  private readonly http = inject(HttpClient);
+
+  private currentUserSubject = new BehaviorSubject<CurrentUser | null>(null);
+  public currentUser$ = this.currentUserSubject.asObservable();
+
+  constructor() {
+    this.loadCurrentUser();
+  }
+
+  login(username: string, password: string): Observable<LoginResponse> {
+    return this.http
+      .post<LoginResponse>(`${this.accountServiceUrl}/api/account/login`, {
+        username,
+        password
+      })
+      .pipe(
+        tap((response) => {
+          localStorage.setItem('token', response.token);
+          localStorage.setItem('username', username);
+          // After login, fetch current user info
+          this.getCurrentUser().subscribe();
+        })
+      );
+  }
+
+  register(username: string, password: string, email?: string): Observable<RegisterResponse> {
+    return this.http
+      .post<RegisterResponse>(`${this.accountServiceUrl}/api/account`, {
+        username,
+        password,
+        email
+      })
+      .pipe(
+        tap((response) => {
+          localStorage.setItem('username', response.username);
+          localStorage.setItem('userId', response.id);
+          this.currentUserSubject.next({
+            id: response.id,
+            username: response.username,
+            rating: response.rating,
+            createdAt: response.createdAt
+          });
+        })
+      );
+  }
+
+  getCurrentUser(): Observable<CurrentUser> {
+    return this.http.get<CurrentUser>(`${this.accountServiceUrl}/api/account/me`).pipe(
+      tap((user) => {
+        localStorage.setItem('username', user.username);
+        localStorage.setItem('userId', user.id);
+        this.currentUserSubject.next(user);
+      })
+    );
+  }
+
+  logout(): void {
+    localStorage.removeItem('token');
+    localStorage.removeItem('username');
+    localStorage.removeItem('userId');
+    this.currentUserSubject.next(null);
+  }
+
+  isLoggedIn(): boolean {
+    return !!localStorage.getItem('token');
+  }
+
+  private loadCurrentUser(): void {
+    const token = localStorage.getItem('token');
+    const username = localStorage.getItem('username');
+    const userId = localStorage.getItem('userId');
+    if (token && username && userId) {
+      // Try to verify token is still valid by fetching current user
+      this.getCurrentUser().subscribe({
+        error: () => {
+          // Token is invalid, clear it
+          this.logout();
+        }
+      });
+    }
+  }
+}
@@ -0,0 +1,64 @@
+import { Injectable, inject } from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { Challenge } from '../models/challenge.models';
+
+/**
+ * Service to manage challenge events via WebSocket
+ * Listens for incoming challenges and emits them to subscribers
+ */
+@Injectable({ providedIn: 'root' })
+export class ChallengeEventService {
+    private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
+    private readonly challengeReceived$ = new Subject<Challenge>();
+    private readonly challengeAccepted$ = new Subject<Challenge>();
+    private readonly challengeDeclined$ = new Subject<Challenge>();
+
+    getIncomingChallenges$(): Observable<Challenge[]> {
+        return this.incomingChallenges$.asObservable();
+    }
+
+    getChallengeReceived$(): Observable<Challenge> {
+        return this.challengeReceived$.asObservable();
+    }
+
+    getChallengeAccepted$(): Observable<Challenge> {
+        return this.challengeAccepted$.asObservable();
+    }
+
+    getChallengeDeclined$(): Observable<Challenge> {
+        return this.challengeDeclined$.asObservable();
+    }
+
+    /**
+     * Called when a new challenge is received via WebSocket
+     */
+    onChallengeReceived(challenge: Challenge): void {
+        const current = this.incomingChallenges$.value;
+        this.incomingChallenges$.next([...current, challenge]);
+        this.challengeReceived$.next(challenge);
+    }
+
+    /**
+     * Called when a challenge is accepted
+     */
+    onChallengeAccepted(challenge: Challenge): void {
+        const current = this.incomingChallenges$.value;
+        this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
+        this.challengeAccepted$.next(challenge);
+    }
+
+    /**
+     * Called when a challenge is declined or expires
+     */
+    onChallengeRemoved(challengeId: string): void {
+        const current = this.incomingChallenges$.value;
+        this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
+    }
+
+    /**
+     * Remove a challenge from the incoming list
+     */
+    removeChallenge(challengeId: string): void {
+        this.onChallengeRemoved(challengeId);
+    }
+}
@@ -0,0 +1,135 @@
+import { Injectable, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ChallengeEventService } from './challenge-event.service';
+import { Challenge } from '../models/challenge.models';
+
+/**
+ * Service to handle WebSocket connections for challenge events
+ * Listens for incoming challenge notifications and emits them to ChallengeEventService
+ */
+@Injectable({ providedIn: 'root' })
+export class ChallengeWebSocketService {
+    private readonly challengeEventService = inject(ChallengeEventService);
+    private ws: WebSocket | null = null;
+    private reconnectAttempts = 0;
+    private readonly maxReconnectAttempts = 5;
+    private readonly reconnectDelay = 3000;
+
+    /**
+     * Initialize WebSocket connection for challenge events
+     */
+    connect(): void {
+        if (this.ws) {
+            return; // Already connected
+        }
+
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const wsUrl = `${wsProtocol}://${window.location.host}/ws/challenges`;
+
+        try {
+            this.ws = new WebSocket(wsUrl);
+
+            this.ws.onopen = () => {
+                console.log('Challenge WebSocket connected');
+                this.reconnectAttempts = 0;
+            };
+
+            this.ws.onmessage = (event) => {
+                this.handleMessage(event.data);
+            };
+
+            this.ws.onerror = (error) => {
+                console.error('Challenge WebSocket error:', error);
+            };
+
+            this.ws.onclose = () => {
+                console.log('Challenge WebSocket disconnected');
+                this.ws = null;
+                this.attemptReconnect();
+            };
+        } catch (error) {
+            console.error('Failed to create WebSocket:', error);
+            this.attemptReconnect();
+        }
+    }
+
+    /**
+     * Close the WebSocket connection
+     */
+    disconnect(): void {
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+    }
+
+    /**
+     * Send a message through WebSocket
+     */
+    send(message: any): void {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+        }
+    }
+
+    /**
+     * Handle incoming WebSocket messages
+     */
+    private handleMessage(data: string): void {
+        try {
+            const message = JSON.parse(data);
+
+            if (!message.type) {
+                return;
+            }
+
+            switch (message.type) {
+                case 'challenge.received':
+                    if (message.challenge) {
+                        this.challengeEventService.onChallengeReceived(message.challenge as Challenge);
+                    }
+                    break;
+
+                case 'challenge.accepted':
+                    if (message.challenge) {
+                        this.challengeEventService.onChallengeAccepted(message.challenge as Challenge);
+                    }
+                    break;
+
+                case 'challenge.declined':
+                    if (message.challengeId) {
+                        this.challengeEventService.removeChallenge(message.challengeId);
+                    }
+                    break;
+
+                case 'challenge.expired':
+                    if (message.challengeId) {
+                        this.challengeEventService.removeChallenge(message.challengeId);
+                    }
+                    break;
+
+                default:
+                    console.debug('Unknown challenge message type:', message.type);
+            }
+        } catch (error) {
+            console.error('Failed to parse WebSocket message:', error);
+        }
+    }
+
+    /**
+     * Attempt to reconnect to WebSocket
+     */
+    private attemptReconnect(): void {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            console.error('Max WebSocket reconnection attempts reached');
+            return;
+        }
+
+        this.reconnectAttempts++;
+        console.log(`Attempting WebSocket reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+
+        setTimeout(() => {
+            this.connect();
+        }, this.reconnectDelay);
+    }
+}
@@ -0,0 +1,50 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Challenge, DeclineChallengeRequest, ListChallengesResponse, SendChallengeRequest } from '../models/challenge.models';
+
+@Injectable({ providedIn: 'root' })
+export class ChallengeService {
+    private readonly http = inject(HttpClient);
+    private readonly challengeBaseUrl = '/api/challenge';
+
+    sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
+        return this.http.post<Challenge>(
+            `${this.challengeBaseUrl}/${username}`,
+            request
+        );
+    }
+
+    listChallenges(): Observable<ListChallengesResponse> {
+        return this.http.get<ListChallengesResponse>(
+            `${this.challengeBaseUrl}`
+        );
+    }
+
+    getChallenge(challengeId: string): Observable<Challenge> {
+        return this.http.get<Challenge>(
+            `${this.challengeBaseUrl}/${challengeId}`
+        );
+    }
+
+    acceptChallenge(challengeId: string): Observable<Challenge> {
+        return this.http.post<Challenge>(
+            `${this.challengeBaseUrl}/${challengeId}/accept`,
+            {}
+        );
+    }
+
+    declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
+        return this.http.post<void>(
+            `${this.challengeBaseUrl}/${challengeId}/decline`,
+            request || {}
+        );
+    }
+
+    cancelChallenge(challengeId: string): Observable<void> {
+        return this.http.post<void>(
+            `${this.challengeBaseUrl}/${challengeId}/cancel`,
+            {}
+        );
+    }
+}
@@ -10,6 +10,7 @@ export class GameStreamService {
  private readonly destroyRef = inject(DestroyRef);
  private streamSubscription: Subscription | null = null;
  private pollSubscription: Subscription | null = null;
+  private lastGameStateHash: string | null = null;

  startStreaming(
    gameId: string,
@@ -20,7 +21,10 @@ export class GameStreamService {
      .streamGame(gameId)
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
-        next: (event) => onEvent(event),
+        next: (event) => {
+          this.lastGameStateHash = JSON.stringify(event);
+          onEvent(event);
+        },
        error: () => {
          onStreamError();
          this.startPolling(gameId, onEvent);
@@ -37,7 +41,7 @@ export class GameStreamService {
      return;
    }

-    this.pollSubscription = interval(1500)
+    this.pollSubscription = interval(5000)
      .pipe(
        startWith(0),
        switchMap(() => this.gameApi.getGame(gameId)),
@@ -45,11 +49,16 @@ export class GameStreamService {
      )
      .subscribe({
        next: (game) => {
-          const event: GameStreamEvent = {
-            type: 'gameFull',
-            game
-          };
-          onEvent(event);
+          // Only emit if game state changed to avoid unnecessary updates
+          const stateHash = JSON.stringify(game.state);
+          if (this.lastGameStateHash !== stateHash) {
+            this.lastGameStateHash = stateHash;
+            const event: GameStreamEvent = {
+              type: 'gameFull',
+              game
+            };
+            onEvent(event);
+          }
        }
      });
  }
@@ -59,5 +68,6 @@ export class GameStreamService {
    this.pollSubscription?.unsubscribe();
    this.streamSubscription = null;
    this.pollSubscription = null;
+    this.lastGameStateHash = null;
  }
 }
@@ -84,8 +84,19 @@ export class StreamHandlerService {
        }
      };

+      // Set timeout to fallback if WebSocket doesn't connect quickly
+      const connectionTimeoutId = setTimeout(() => {
+        if (!connected && !fallbackActive) {
+          console.warn(`[StreamHandler] WebSocket timeout for ${gameId}, attempting NDJSON fallback`);
+          ws.close();
+          void startNdjsonFallback();
+        }
+      }, 3000);
+
      ws.onopen = () => {
        connected = true;
+        clearTimeout(connectionTimeoutId);
+        console.log(`[StreamHandler] WebSocket connected for ${gameId}`);
      };

      ws.onmessage = (message) => {
@@ -97,19 +108,23 @@ export class StreamHandlerService {
      };

      ws.onerror = (error) => {
-        console.warn(`[StreamHandler] WebSocket error for ${gameId}, attempting NDJSON fallback:`, error);
-        if (!connected) {
+        console.warn(`[StreamHandler] WebSocket error for ${gameId}:`, error);
+        clearTimeout(connectionTimeoutId);
+        if (!connected && !fallbackActive) {
          void startNdjsonFallback();
        }
      };

      ws.onclose = () => {
+        clearTimeout(connectionTimeoutId);
        console.warn(`[StreamHandler] WebSocket closed for ${gameId}, connected=${connected}`);
-        if (!connected) {
+        if (connected) {
+          // Connection was established but closed, stream is complete
+          observer.complete();
+        } else if (!fallbackActive) {
+          // Connection never established, try fallback
          console.log(`[StreamHandler] Starting NDJSON fallback for ${gameId}`);
          void startNdjsonFallback();
-        } else {
-          observer.complete();
        }
      };

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+    private readonly darkModeSubject = new BehaviorSubject<boolean>(false);
+
+    readonly darkMode$ = this.darkModeSubject.asObservable();
+
+    initTheme(): void {
+        const savedTheme = localStorage.getItem('theme');
+        this.applyDarkMode(savedTheme === 'dark');
+    }
+
+    toggleTheme(): void {
+        this.applyDarkMode(!this.darkModeSubject.value);
+    }
+
+    setDarkMode(isDarkMode: boolean): void {
+        this.applyDarkMode(isDarkMode);
+    }
+
+    private applyDarkMode(isDarkMode: boolean): void {
+        if (isDarkMode) {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.documentElement.removeAttribute('data-theme');
+            localStorage.removeItem('theme');
+        }
+
+        this.darkModeSubject.next(isDarkMode);
+    }
+}
@@ -1,6 +1,7 @@
 export const environment = {
  production: false,
  apiBaseUrl: '',
+  accountServiceUrl: '',
  wsBaseUrl: 'ws://localhost:8080',
  apiPath: '/api/board/game'
 };
@@ -0,0 +1,11 @@
+import { loadRuntimeConfig } from '../app/core/config.loader';
+
+const runtimeConfig = loadRuntimeConfig();
+
+export const environment = {
+  production: true,
+  apiBaseUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
+  accountServiceUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
+  wsBaseUrl: runtimeConfig.wsUrl || 'wss://st.nowchess.janis-eccarius.de',
+  apiPath: '/api/board/game'
+};
@@ -1,6 +1,11 @@
+import { loadRuntimeConfig } from '../app/core/config.loader';
+
+const runtimeConfig = loadRuntimeConfig();
+
 export const environment = {
-  production: true,
-  apiBaseUrl: '',
-  wsBaseUrl: 'ws://localhost:8080',
+  production: false,
+  apiBaseUrl: runtimeConfig.apiUrl || '',
+  accountServiceUrl: runtimeConfig.apiUrl || '',
+  wsBaseUrl: runtimeConfig.wsUrl,
  apiPath: '/api/board/game'
 };
@@ -6,6 +6,7 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="/env.js" defer></script>
 </head>
 <body>
  <app-root></app-root>
@@ -1,6 +1,3 @@
-/* ========================================
-   COLOR VARIABLES - Semantic Naming
-   ======================================== */

 /* Light Mode Colors (Default) */
 :root:not([data-theme='dark']) {
@@ -122,4 +119,15 @@
     SHADOWS
     ======================================== */
  --shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
+   /* Neon dialog / card variables (used by welcome dialogs, toolbar, login/register) */
+   --bb-bg: rgba(8, 6, 28, 0.92);
+   --bb-border: #00d5ff;
+   --bb-glow: 0 0 18px rgba(0, 210, 255, 0.5), inset 0 0 10px rgba(0, 210, 255, 0.05);
+   --bb-tag: #00d5ff;
+   --bb-title: #d4f4ff;
+   --btn-bg: #00d5ff;
+   --btn-fg: #04000f;
+   --btn-glow: 0 0 14px rgba(0, 210, 255, 0.9);
+   --dlg-bg: rgba(8, 6, 28, 0.95);
+   --dlg-border: #00d5ff;
 }
@@ -0,0 +1,3 @@
+MAJOR=0
+MINOR=2
+PATCH=2
Author	SHA1	Message	Date
TeamCity	f98bcfd956	ci: bump version to v0.2.2	2026-05-12 22:04:12 +00:00
shosho996	6d1e06dfd6	fix: NCWF-1 401 (#6 ) Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #6	2026-05-13 00:01:26 +02:00
TeamCity	ac4fe8b005	ci: bump version to v0.2.1	2026-05-12 21:13:35 +00:00
shosho996	f8f93efff4	fix: NCWF-1 401 (#5 ) Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #5	2026-05-12 23:11:19 +02:00
TeamCity	9ad23b01cc	ci: bump version to v0.2.0	2026-05-12 20:41:26 +00:00
shosho996	bad7366bdb	feat: NCS-69 Challenge request (#3 ) - create challange window - challanges view page - decline and accept - notif tab (wip) - active game window (wip) --------- Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #3	2026-05-12 22:38:57 +02:00
TeamCity	3c1f5c76e0	ci: bump version to v0.1.0	2026-05-12 16:33:23 +00:00
shosho996	36d72fd6cd	fix: build issues	2026-05-12 17:33:03 +02:00
shosho996	bd7ec581e3	feat: NCS-75 Frontend Deployment Dockerfile (#4 ) Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #4 Co-authored-by: Shahd Lala <shosho996@blackhole.local> Co-committed-by: Shahd Lala <shosho996@blackhole.local>	2026-05-12 11:21:04 +02:00
shosho996	ff75c8ce2f	feat: NCS-63 User account implementation (#2 ) User Profile info, no game before login/register, menu bar --------- Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #2	2026-05-06 10:51:30 +02:00
shosho996	2de003e497	feat: added bot, light and dark mode	2026-04-22 10:22:22 +02:00